Mermaid中文文档

Appearance

类图 ​

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

  • 维基百科

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

Mermaid 可以渲染类图。

Code:
mermaid

语法 ​

类 ​

UML 提供了表示类成员（例如属性和方法）以及关于它们的附加信息的机制。 图中类的单个实例包含三个部分：

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

定义类 ​

有两种方法可以定义类：

  • 显式使用关键字class，例如class Animal，这将定义 Animal 类。
  • 通过关系，一次定义两个类及其关系。例如，Vehicle <|-- Car。
Code:
mermaid

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

类标签 ​

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

Code:
mermaid

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

Code:
mermaid

定义类的成员 ​

UML 提供了表示类成员（例如属性和方法）以及关于它们的附加信息的机制。

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

有两种方法可以定义类的成员，无论使用哪种语法定义成员，输出仍然相同。这两种不同的方法是：

  • 使用 :（冒号）后跟成员名称来关联类的成员，这对于一次定义一个成员很有用。例如：
Code:
mermaid
  • 使用 {} 括号关联类的成员，其中成员分组在花括号内。适合一次定义多个成员。例如：
Code:
mermaid

返回类型 ​

您可以选择使用将返回的数据类型结束方法/函数定义（注意：最终的 ) 和返回类型之间必须有一个空格）。例如：

Code:
mermaid

泛型类型 ​

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

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

Code:
mermaid

可见性 ​

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

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

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

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

注意 您还可以通过在末尾添加以下符号来向字段定义添加其他_分类器_：

  • $ 静态 例如：String someField$

定义关系 ​

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

[classA][Arrow][ClassB]

UML 中为类定义了八种不同类型的关系，目前已得到支持：

类型描述
<|--继承
*--组合
o--聚合
-->关联
--链接（实线）
..>依赖
..|>实现
..链接（虚线）
Code:
mermaid

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

Code:
mermaid

关系上的标签 ​

可以向关系添加标签文本：

[classA][Arrow][ClassB]:LabelText
Code:
mermaid

双向关系 ​

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

以下是语法：

[Relation Type][Link][Relation Type]

其中 Relation Type 可以是以下之一：

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

而 Link 可以是以下之一：

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

棒棒糖接口 ​

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

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

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

注意：每个定义的接口都是唯一的，并且不打算在类之间共享/有多条边连接到它。

Code:
mermaid
Code:
mermaid

定义命名空间 ​

命名空间对类进行分组。

Code:
mermaid

关系上的基数/多重性 ​

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

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

不同的基数选项是：

  • 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
Code:
mermaid

类上的注释 ​

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

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

注释定义在起始 << 和结束 >> 内。有两种方法可以向类添加注释，无论哪种方式，输出都相同：

  • 在定义类**之后的单独一行**中：
Code:
mermaid
  • 在包含类定义的**嵌套结构**中：
Code:
mermaid

注释 ​

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

设置图的方向 ​

使用类图，您可以使用 direction 语句来设置图将呈现的方向：

Code:
mermaid

交互 ​

可以将点击事件绑定到节点。点击可以导致 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>

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

初学者提示——在 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 关键字为单个节点应用特定的样式，例如较粗的边框或不同的背景颜色。

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

Code:
mermaid

类 ​

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

类定义如下例所示：

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

此外，还可以使用一个语句为多个类定义样式：

classDef firstClassName,secondClassName font-size:12pt;

将类附加到节点的操作如下所示：

cssClass "nodeId1" className;

还可以使用一个语句将类附加到节点列表：

cssClass "nodeId1,nodeId2" className;

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

Code:
mermaid

或者：

Code:
mermaid

默认类 ​

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

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

CSS 类 ​

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

示例样式

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

示例定义

Code:
mermaid

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

配置 ​

成员框 ​

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

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

Code:
mermaid