mermaid语法-类图

mermaid语法收集

参考文档：mermaid中文网

类图

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

-Wikipedia

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

mermaid 可以渲染类图。

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{% mermaid %}
---
title: Animal example
---
classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    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()
    }
{% endmermaid %}

屏幕截图 2024-12-26 023600.png

语法

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

顶部隔间包含类的名称。它以粗体居中打印，第一个字母大写。它还可能包含描述类性质的可选注释文本。

中间的部分包含类的属性。它们左对齐且第一个字母小写。

底部隔间包含该类可以执行的操作。它们也是左对齐的，并且第一个字母是小写的。

代码:

1
2
3
4
5
6
7
8
9
<pre class="mermaid">---
title: Bank example
---
classDiagram
    class BankAccount
    BankAccount : +String owner
    BankAccount : +Bigdecimal balance
    BankAccount : +deposit(amount)
    BankAccount : +withdrawal(amount)</pre>

image

定义一个类

定义类有两种方法：

显式使用关键字 class（如 class Animal）来定义 Animal 类。

通过一次定义两个类及其关系的关系。例如，Vehicle <|-- Car。

代码:

1
2
3
4
5
{% mermaid %}
classDiagram
    class Animal
    Vehicle <|-- Car
{% endmermaid %}

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

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

代码:

1
2
3
4
5
6
{% mermaid %}
classDiagram
    class Animal["Animal with a label"]
    class Car["Car with *! symbols"]
    Animal --> Car
{% endmermaid %}

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

代码:

1
2
3
4
5
6
{% mermaid %}
classDiagram
    class `Animal Class!`
    class `Car Class`
    `Animal Class!` --> `Car Class`
{% endmermaid %}

定义类的成员

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

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

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

使用 :（冒号）后跟成员名称来关联类的成员，这对于一次定义一个成员很有用。例如：

代码:

1
2
3
4
5
6
7
8
{% mermaid %}
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +BigDecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
{% endmermaid %}

使用 {} 括号关联类的成员，其中成员分组在大括号内。适合一次定义多个成员。例如：

代码:

1
2
3
4
5
6
7
8
9
{% mermaid %}
classDiagram
class BankAccount{
    +String owner
    +BigDecimal balance
    +deposit(amount)
    +withdrawal(amount)
}
{% endmermaid %}

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

代码:

1
2
3
4
5
6
7
8
9
{% mermaid %}
classDiagram
class BankAccount{
    +String owner
    +BigDecimal balance
    +deposit(amount) bool
    +withdrawal(amount) int
}
{% endmermaid %}

通用类型
泛型可以表示为类定义的一部分，也可以表示为类成员/返回类型。为了将该项目表示为通用项，请将该类型括在 ~（波形符）内。支持嵌套类型声明（例如 List<List>），但当前不支持包含逗号的泛型。（如 List<List<K, V>>）

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

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% mermaid %}
classDiagram
class Square~Shape~{
    int id
    List~int~ position
    setPoints(List~int~ points)
    getPoints() List~int~
}

Square : -List~string~ messages
Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~
Square : +getDistanceMatrix() List~List~int~~
{% endmermaid %}

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

  • + 民众
  • - 私有的
  • # 受保护
  • ~ 封装/内部

请注意，你还可以通过在方法末尾添加以下符号来在方法定义中包含其他分类器，即：在 () 或返回类型之后：

  • * 摘要例如：someAbstractMethod()* 或 someAbstractMethod() int*
  • $ 静态例如：someStaticMethod()$ 或 someStaticMethod() String$

请注意，你还可以通过在末尾添加以下符号来在字段定义中包含其他分类器：

  • $ 静态例如：String someField$

定义关系

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

1
[classA][Arrow][ClassB]

目前支持的 UML 下为类定义了八种不同类型的关系：

类型 描述
<|-- 继承
*-- 作品
o-- 聚合
--> 关联
-- 链接（实心）
..> 依赖
..|> 实现
.. 链接（虚线）

代码:

1
2
3
4
5
6
7
8
9
10
11
{% mermaid %}
classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP
{% endmermaid %}

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

代码:

1
2
3
4
5
6
7
8
9
10
11
{% mermaid %}
classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)
{% endmermaid %}

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

1
[classA][Arrow][ClassB]:LabelText

代码:

1
2
3
4
5
6
{% mermaid %}
classDiagram
classA <|-- classB : implements
classC *-- classD : composition
classE o-- classF : aggregation
{% endmermaid %}

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

代码:

1
2
3
4
{% mermaid %}
classDiagram
    Animal <|--|> Zebra
{% endmermaid %}

语法如下：

[Relation Type][Link][Relation Type]
其中 Relation Type 可以是以下之一：

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

Link 可以是以下之一：

类型 描述
– 实线
.. 虚线

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

  • bar ()-- foo

  • foo --() bar

带有棒棒糖的界面（bar）连接到类（foo）。

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

代码:

1
2
3
4
{% mermaid %}
classDiagram
  bar ()-- foo
{% endmermaid %}

代码:

1
2
3
4
5
6
7
8
9
10
11
{% mermaid %}
classDiagram
  class Class01 {
    int amount
    draw()
  }
  Class01 --() bar
  Class02 --() bar

  foo ()-- Class01
{% endmermaid %}

定义命名空间

命名空间对类进行分组。

代码:

1
2
3
4
5
6
7
8
9
10
{% mermaid %}
classDiagram
namespace BaseShapes {
    class Triangle
    class Rectangle {
      double width
      double height
    }
}
{% endmermaid %}

关系的基数/多重性

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

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

不同的基数选项是：

  • 1 只有 1 个
  • 0..1 零或一
  • 1..* 一个或多个
  • * 许多
  • n n（其中 n>1）
  • 0..n 0 到 n（其中 n>1）
  • 1..n 1 到 n（其中 n>1）

通过将文本选项放在给定箭头之前或之后的引号 “ 内，可以轻松定义基数。例如：

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

代码:

1
2
3
4
5
6
{% mermaid %}
classDiagram
    Customer "1" --> "*" Ticket
    Student "1" --> "1..*" Course
    Galaxy --> "many" Star : Contains
{% endmermaid %}

类上的注释

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

  • <<Interface>> 表示一个接口类

  • <<Abstract>> 表示一个抽象类

  • <<Service>> 代表一个服务类

  • <<Enumeration>> 表示一个枚举

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

  • 在定义类之后的单独一行中：

代码:

1
2
3
4
5
6
7
{% mermaid %}
classDiagram
class Shape
<<interface>> Shape
Shape : noOfVertices
Shape : draw()
{% endmermaid %}
  • 在与类定义一起的嵌套结构中：

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% mermaid %}
classDiagram
class Shape{
    <<interface>>
    noOfVertices
    draw()
}
class Color{
    <<enumeration>>
    RED
    BLUE
    GREEN
    WHITE
    BLACK
}
{% endmermaid %}

注释

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

代码:

1
2
3
4
5
6
7
8
9
{% mermaid %}
classDiagram
%% This whole line is a comment classDiagram class Shape <<interface>>
class Shape{
    <<interface>>
    noOfVertices
    draw()
}
{% endmermaid %}

设置图表的方向

对于类图，你可以使用方向语句来设置图渲染的方向：

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% mermaid %}
classDiagram
  direction RL
  class Student {
    -idCard : IdCard
  }
  class IdCard{
    -id : int
    -name : string
  }
  class Bike{
    -id : int
    -name : string
  }
  Student "1" --o "1" IdCard : carries
  Student "1" --o "1" Bike : rides
{% endmermaid %}

相互作用

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

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

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

注意

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

示例
代码:

1
2
3
4
5
6
7
{% mermaid %}
classDiagram
    note "This is a general note"
    note for MyClass "This is a note for a class"
    class MyClass{
    }
{% endmermaid %}

网址链接：

代码:

1
2
3
4
5
<pre class="mermaid">classDiagram
class Shape
link Shape "https://www.github.com" "This is a tooltip for a link"
class Shape2
click Shape2 href "https://www.github.com" "This is a tooltip for a link"</pre>

image.png

回调：

代码:

1
2
3
4
5
6
7
{% mermaid %}
classDiagram
class Shape
callback Shape "callbackFunction" "This is a tooltip for a callback"
class Shape2
click Shape2 call callbackFunction() "This is a tooltip for a callback"
{% endmermaid %}
1
2
3
4
5
<script>
  const callbackFunction = function () {
    alert('A callback was triggered');
  };
</script>

代码:

1
2
3
4
5
6
7
8
9
10
11
{% mermaid %}
classDiagram
    class Class01
    class Class02
    callback Class01 "callbackFunction" "Callback tooltip"
    link Class02 "https://www.github.com" "This is a link"
    class Class03
    class Class04
    click Class03 call callbackFunction() "Callback tooltip"
    click Class04 href "https://www.github.com" "This is a link"
{% endmermaid %}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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>
<!-- endtab -->

样式

设置节点样式
可以使用 style 关键字将特定样式（例如较粗的边框或不同的背景颜色）应用于单个节点。

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

代码:

1
2
3
4
5
6
7
{% mermaid %}
classDiagram
  class Animal
  class Mineral
  style Animal fill:#f9f,stroke:#333,stroke-width:4px
  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
{% endmermaid %}

屏幕截图 2024-12-26 024430.png

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

类定义如下例所示：

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

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

1
classDef firstClassName,secondClassName font-size:12pt;

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

1
cssClass "nodeId1" className;

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

1
cssClass "nodeId1,nodeId2" className;

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

代码:

1
2
3
4
5
{% mermaid %}
classDiagram
    class Animal:::someclass
    classDef someclass fill:#f96
{% endmermaid %}

屏幕截图 2024-12-26 024850.png

或者：

代码:

1
2
3
4
5
6
7
8
{% mermaid %}
classDiagram
    class Animal:::someclass {
        -int sizeInFeet
        -canEat()
    }
    classDef someclass fill:#f96
{% endmermaid %}

image.png

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

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

代码:

1
2
3
4
5
6
7
8
{% mermaid %}
classDiagram
  class Animal:::pink
  class Mineral

  classDef default fill:#f96,color:red
  classDef pink color:#f9f
{% endmermaid %}

屏幕截图 2024-12-26 025144.png

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

示例样式

1
2
3
4
5
6
7
<style>
  .styleClass > * > g {
    fill: #ff0000;
    stroke: #ffff00;
    stroke-width: 4px;
  }
</style>

定义示例

代码:

1
2
3
4
{% mermaid %}
classDiagram
    class Animal:::styleClass
{% endmermaid %}

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

配置

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

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

代码:

1
2
3
4
5
6
7
8
9
{% mermaid %}
---
  config:
    class:
      hideEmptyMembersBox: true
---
classDiagram
  class Duck
{% endmermaid %}
屏幕截图 2024-12-26 021427.png
这是我自己搭建的blog网站，用来记录和分享我自己研究的健身造型知识，类似于一个知识库。可以把这个网站分享给你身边的健身爱好者，转载或节选引，用务必注明为“李瑶的原创”，您的支持和尊重是我更新的动力！
理型健