Mermaid

外观

与团队成员在Mermaid Chart中实时绘制图表

类图 ​

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

-维基百科

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

Mermaid 可以渲染类图。

语法 ​

类 ​

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

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

定义一个类 ​

有两种定义类的方法：

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

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

类别标签 ​

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

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

定义类的成员 ​

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

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

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

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

返回类型 ​

可选地，你可以在方法/函数定义的末尾加上将返回的数据类型（注意：在最后的)和返回类型之间必须有一个空格）。例如：

泛型类型 ​

泛型可以作为类定义的一部分以及类成员/返回类型的一部分来表示。为了将某个项目表示为泛型，您需要将该类型用~（波浪号）括起来。嵌套类型声明如List>是支持的，但目前不支持包含逗号的泛型。（例如List>）

注意 当泛型在类定义中使用时，泛型类型不被视为类名的一部分。即：对于任何需要引用类名的语法，你需要去掉定义中的类型部分。这也意味着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]

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

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

并且 Link 可以是以下之一：

类型描述
--固体
..虚线

棒棒糖接口 ​

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

  • 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

类上的注解 ​

可以使用标记来注释类，以提供关于类的额外元数据。这可以更清楚地表明其性质。一些常见的注释包括：

  • <> 用于表示一个接口类
  • <> 表示一个抽象类
  • <> 用于表示一个服务类
  • <> 用于表示枚举

注释定义在开头的<<和结尾的>>之间。有两种方法可以向类添加注释，无论哪种方式，输出结果都是相同的：

  • 在类定义之后的单独一行中：
  • 在一个嵌套结构中，与类定义一起：

评论 ​

可以在类图中输入注释，这些注释将被解析器忽略。注释需要单独成行，并且必须以%%（双百分号）开头。直到下一个换行符之前的任何文本都将被视为注释，包括任何类图语法。

设置图表的方向 ​

使用类图时，您可以使用方向语句来设置图表的渲染方向：

交互 ​

可以将点击事件绑定到一个节点。点击可以触发一个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 是一个字符串，当悬停在元素上时显示（注意：tooltip 的样式由类 .mermaidTooltip 设置。）
  • 注意：回调函数将以nodeId作为参数调用。

注释 ​

可以在图表上使用note "line1\nline2"添加注释。可以使用note for "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配置的更多信息，请参阅配置页面。