Mermaid

外观

在 Mermaid Chart 中与团队成员实时编辑图表

类图 ​

"在软件工程中，统一建模语言 (UML) 中的类图是一种静态结构图，它通过显示系统的类、它们的属性、操作 (或方法) 以及对象之间的关系来描述系统的结构。"

- 维基百科

类图是面向对象建模的主要构建块。它用于应用程序结构的一般概念建模，以及用于详细建模以将模型转换为编程代码。类图也可用于数据建模。类图中的类既代表应用程序中的主要元素和交互，也代表要编程的类。

Mermaid 可以渲染类图。

语法 ​

类 ​

UML 提供了机制来表示类成员，例如属性和方法，以及有关它们的其他信息。图中类的单个实例包含三个部分

  • 顶层部分包含类名。它是以粗体居中打印的，并且首字母大写。它还可以包含可选的注释文本，描述类的性质。
  • 中间部分包含类的属性。它们是左对齐的，并且首字母小写。
  • 底层部分包含类可以执行的操作。它们也是左对齐的，并且首字母小写。

定义类 ​

有两种方法可以定义类

  • 显式使用关键字 **class**，例如 class Animal，它将定义 Animal 类。
  • 通过 **关系**，它同时定义两个类及其关系。例如，Vehicle <|-- Car。

命名约定：类名应仅由字母数字字符（包括 unicode）、下划线和连字符 (-) 组成。

类标签 ​

如果您需要为类提供标签，可以使用以下语法

您也可以使用反引号转义标签中的特殊字符

定义类成员 ​

UML 提供了机制来表示类成员，例如属性和方法，以及有关它们的其他信息。

Mermaid 根据 **圆括号** () 是否存在来区分属性和函数/方法。带 () 的被视为函数/方法，所有其他被视为属性。

有两种方法可以定义类成员，无论使用哪种语法来定义成员，输出都将相同。两种不同的方法是

  • 使用 **:** (冒号) 后跟成员名称来关联类成员，这对于一次定义一个成员很有用。例如
  • 使用 **{}** 括号来关联类成员，其中成员分组在花括号中。适用于一次定义多个成员。例如

返回值类型 ​

您可以选择以将要返回的数据类型结尾方法/函数定义（注意：在最后的 ) 和返回值类型之间必须有一个空格）。一个例子

泛型 ​

泛型可以表示为类定义的一部分，以及类成员/返回值类型的一部分。为了将项目指定为泛型，您将该类型括在 ~ (**波浪号**) 中。**嵌套** 类型声明（例如 List<List<int>>）受支持，但包含逗号的泛型当前不受支持。（例如 List<List<K, V>>）

注意 当在类定义中使用泛型时，泛型类型不被视为类名的一部分。即：对于需要您引用类名的任何语法，您需要删除定义的类型部分。这也意味着 Mermaid 当前不支持具有相同名称但不同泛型类型的两个类。

可见性 ​

要描述作为类的一部分的属性或方法/函数（即类成员）的可见性（或封装），可选符号可以放置在该成员名称之前

  • + 公开
  • - 私有
  • # 受保护
  • ~ 包/内部

注意 您也可以通过将以下符号添加到方法定义的末尾（即：在 () 或返回值类型之后）来包括其他分类器到方法定义中

  • * 抽象 例如：someAbstractMethod()* 或 someAbstractMethod() int*
  • $ 静态 例如：someStaticMethod()$ 或 someStaticMethod() String$

注意 您也可以通过将以下符号添加到最末尾来包括其他分类器到字段定义中

  • $ 静态 例如：String someField$

定义关系 ​

关系是一个通用术语，涵盖在类图和对象图中找到的特定类型的逻辑连接。

[classA][Arrow][ClassB]

UML 为类定义了八种不同的关系类型，这些关系类型目前受支持

类型描述
<|--继承
*--组合
o--聚合
-->关联
--链接 (实线)
..>依赖
..|>实现
..链接 (虚线)

我们可以使用标签来描述两个类之间关系的性质。此外，箭头也可以用于相反方向

关系上的标签 ​

可以将标签文本添加到关系中

[classA][Arrow][ClassB]:LabelText

双向关系 ​

关系在逻辑上可以表示 N:M 关联

以下是语法

[Relation Type][Link][Relation Type]

其中 关系类型 可以是以下之一

类型描述
<|继承
\*组合
o聚合
>关联
<关联
|>实现

并且 链接 可以是以下之一

类型描述
--实线
..虚线

棒棒糖接口 ​

类也可以被赋予一种特殊的关联类型，该类型在类上定义了一个棒棒糖接口。棒棒糖接口使用以下语法定义

  • bar ()-- foo
  • foo --() bar

带棒棒糖的接口 (bar) 连接到类 (foo)。

注意：定义的每个接口都是唯一的，这意味着它不能在类之间共享/不能有多个边连接到它。

定义命名空间 ​

命名空间对类进行分组。

关系上的基数/多重性 ​

类图中的多重性或基数指示一个类的实例可以链接到另一个类的实例的数量。例如，每家公司将拥有一个或多个员工（不为零），而每个员工目前为零家或一家公司工作。

多重性符号放置在关联的末端附近。

不同的基数选项是

  • 1 仅 1
  • 0..1 零或一个
  • 1..* 一个或多个
  • * 很多
  • n n (其中 n>1)
  • 0..n 零到 n (其中 n>1)
  • 1..n 一到 n (其中 n>1)

可以通过在给定箭头之前或之后将文本选项放在引号 " 中来轻松定义基数。例如

[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText

类上的注释 ​

可以使用标记对类进行注释，以提供有关类的更多元数据。这可以更清楚地表明其性质。一些常见的注释包括

  • <<Interface>> 代表接口类
  • <<Abstract>> 代表抽象类
  • <<Service>> 代表服务类
  • <<Enumeration>> 代表枚举

注释定义在开头的 << 和结尾的 >> 之间。有两种方法可以为类添加注释，无论使用哪种方法，输出都将相同

  • 在定义类后的**单独一行**上
  • 在**嵌套结构**中，与类定义一起

注释 ​

可以在类图中输入注释，解析器将忽略这些注释。注释必须在它们自己的行上，并且必须以 %%（双百分号）为前缀。直到下一行的所有文本都将被视为注释，包括任何类图语法。

设置图的方向 ​

在类图中，可以使用方向语句设置图的呈现方向

交互 ​

可以将单击事件绑定到节点。单击可以导致 JavaScript 回调或在新的浏览器选项卡中打开的链接。**注意**：使用 securityLevel='strict' 时，此功能被禁用，而使用 securityLevel='loose' 时则启用。

您可以在声明所有类后的单独一行上定义这些操作。

action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"
  • action 可以是 link 或 callback，具体取决于您要调用的交互类型
  • className 是操作关联到的节点的 ID
  • reference 可以是 URL 链接，也可以是回调的函数名称。
  • （可选）tooltip 是一个字符串，用于在将鼠标悬停在元素上时显示（注意：工具提示的样式由类 .mermaidTooltip 设置）。
  • 注意：回调函数将以 nodeId 作为参数调用。

注释 ​

可以使用 note "line1\nline2" 在图上添加注释。可以使用 note for <CLASS NAME> "line1\nline2" 为特定类添加注释。

示例 ​

URL 链接

回调

html
<script>
  const callbackFunction = function () {
    alert('A callback was triggered');
  };
</script>

成功 工具提示功能和链接到 URL 的功能从版本 0.5.2 开始可用。

初学者提示 - 使用 HTML 页面中的交互式链接的完整示例

html
<body>
  <pre class="mermaid">
    classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
      }
    class Fish{
      -int sizeInFeet
      -canEat()
      }
    class Zebra{
      +bool is_wild
      +run()
      }

      callback Duck callback "Tooltip"
      link Zebra "https://www.github.com" "This is a link"
  </pre>

  <script>
    const callback = function () {
      alert('A callback was triggered');
    };
    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

样式 ​

样式化节点 ​

可以使用 style 关键字将更粗的边框或不同的背景颜色等特定样式应用于单个节点。

请注意，注释和命名空间不能单独设置样式，但支持主题。

类 ​

比每次都定义样式更方便的是定义一个样式类，并将此类附加到应具有不同外观的节点。

类定义如下例所示

classDef className fill:#f9f,stroke:#333,stroke-width:4px;

此外，可以在一个语句中为多个类定义样式

classDef firstClassName,secondClassName font-size:12pt;

将类附加到节点的方式如下所示

cssClass "nodeId1" className;

也可以在一个语句中将类附加到节点列表

cssClass "nodeId1,nodeId2" className;

添加类的简短形式是使用 ::: 运算符将类名附加到节点

或者

默认类 ​

如果一个类名为 default，它将应用于所有节点。应随后定义特定的样式和类以覆盖应用的默认样式。

classDef default fill:#f9f,stroke:#333,stroke-width:4px;

CSS 类 ​

还可以预先定义 CSS 样式中的类，这些类可以从图定义中应用，如下例所示

示例样式

html
<style>
  .styleClass > * > g {
    fill: #ff0000;
    stroke: #ffff00;
    stroke-width: 4px;
  }
</style>

示例定义

cssClasses 不能与关系语句同时使用此简写方法添加。

配置 ​

成员框 ​

可以隐藏类节点的空成员框。

这可以通过更改类图配置的 hideEmptyMembersBox 值来实现。有关如何编辑 Mermaid 配置的更多信息，请参见配置页面。