https://mermaid.js.org/ecosystem/tutorials.html
定义一个类
两种方式定义类：
使用像诸如class Animal这样的关键字显式定义类。
通过对象之间的关系定义两个类：Vehicle <|-- Car，这条语句定义了两个类，分别是车辆和汽车及其从属关系。
classDiagram
class Animal
交通工具 <|-- 小汽车
定义类的成员
UML提供了表示类成员的机制，例如属性和方法，以及关于它们的附加信息。
Mermaid根据括号 () 是否存在来区分属性和函数/方法。带有 () 的被视为函数/方法，其他被视为属性。
定义类的成员有两种方法，无论使用哪种语法来定义成员，输出都是相同的。两种不同的方式是：
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +BigDecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
使用{}关联类的成员，成员被分组在花括号中。适用于一次定义多个成员。例如：
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount)
+withdrawl(amount)
}
返回类型
可选地，您可以在定义结束时设定返回的数据类型 （注意：最终的方法定义和返回类型之间必须有一个空格来结束方法/函数定义），示例：
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawl(amount) int
}
泛型
可以使用通用类型（例如List），对于字段、参数和返回类型，方法是将类型封装在~（波浪号）中。注意：当前不支持嵌套类型声明（例如List<List>）。
这可以作为任何一个类定义方法的一部分来完成：
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~
可见性
要指定类成员（即任何属性或方法）的可见性，可以将这些符号放在成员名称之前（可选）：
+ 公共Public
- 私有Private
- # 保护Protected
- 包/内部Package/Internal
您还可以通过在方法的末尾添加以下符号来将其他分类器包含到方法定义中，例如，在 () 之后：
* Abstract 例如：someAbstractMethod()*
$ Static例如：someStaticMethod()$
定义关系
关系是一个通用术语，涵盖在类和对象图上找到的特定类型的逻辑关系。
类图中「类」之间的逻辑关系由连接线表示，定义的形式如：[类A][箭头][类B]:标签文字。
不同的逻辑关系定义如下：
| 类型 |
定义 |
| <|-- |
继承 |
| *--. |
组合 |
| o--. |
聚合 |
| -->. |
关联 |
| --. |
连接（实线） |
| ..>. |
依赖 |
| ..|> |
实现 |
| ... |
连接（虚线） |
classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classDiagram
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP
关系标签
可以将标签式的文本添加到关系上：
[classA][Arrow][ClassB]:LabelText
classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classDiagram
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)
双向关系
关系可以逻辑上表示 N:M 的关联：
classDiagram
动物 <|--|> 斑马
语法:
[关系类型][链接][关系类型]
其中，“关系类型”可以是以下之一:
其中Relation Type可以是以下之一：
| 类型 |
说明 |
| <|. |
继承 |
| *. |
组合 |
| o. |
聚合 |
| >. |
关联 |
| <. |
关联 |
| >. |
实现 |
以及Link 可以是以下之一：
关系上的基数/多重性
类图中的多重性或基数表示一个类连接到另一个类的一个实例的实例数。例如，一家公司将有一名或多名员工，但每个员工只为一家公司工作。
多重性符号放置在关联的末尾。
不同的基数选项有：
| 类型 |
说明 |
| 1 |
仅1个 |
| 0..1 |
0或者1个 |
| 1..* |
1个或多个 |
| * |
多个 |
| n |
n个（n>1） |
| 0..n |
0-n个（n>1） |
| 1..n |
1-n个（n>1） |
通过在给定箭头之前（可选）和之后（可选）在 "" 内放置基数文本，可以轻松定义基数。
[类A] "基数1" [箭头] "基数2" [类B]:标签文本
classDiagram
消费者 "1" --> "*" 消费券
学生 "1" --> "1…*" 课程
星系 --> "许多的" 星星 : 包含
类的注解
可以使用标记对类进行说明，以提供关于类的其他元数据。这可以更清楚地指示其属性。一些常见的说明包括：
<<Interface>> 表示接口
<<Abstract>> 表示抽象
<<Service>> 表示服务
<<Enumeration>> 表示枚举
classDiagram
class 形状
<<interface>> 形状
形状 : 顶点数
形状 : `绘制()
在类定义的嵌套结构中定义。例如：
classDiagram
class 形状{
<<接口>>
顶点数
绘制()
}
class 颜色{
<<枚举>>
红
蓝
黄
}
注释
注释可以在类图代码中使用，解析器将忽略这些注释。注释需要写在单独的一行里并且必须以 %% 开头。注释开始到下一个换行符之后的任何文本都将被视为注释，包括任何类图语法。
classDiagram
%% 整行都是注释 classDiagram class 形状 <<接口>>
class 形状{
<<接口>>
顶点数
`绘制()
}
设置图的方向
对于类图，您可以使用方向语句来设置图将呈现的方向，就像本示例中的那样：
classDiagram
%% TB
direction LR
class 学生 {
-身份证 : 身份证信息
}
class 身份证信息{
-序号 : int
-名称 : string
}
class 自行车信息{
-序号 : int
-名称 : string
}
学生 "1" --o "1" 身份证信息 : 拿
学生 "1" --o "1" 自行车信息 : 骑
交互
可以将单击事件绑定到节点，单击可以打开链接，该链接将在新的浏览器选项卡中打开。
声明所有类后，可以另起一行定义这些操作：
action className "reference" "tooltip"
click className href "url" "tooltip"
action可以是link
className 是类的名称
reference 可以是一个URL链接
（可选）tooltip是一段鼠标悬浮后显示的文本
示例
classDiagram
class Shape
link Shape "http://www.github.com" "This is a tooltip for a link"
class Shape2
click Shape2 href "http://www.github.com" "This is a tooltip for a link"
使用场景实例
类图主要用于为系统建模。
classDiagram
direction RL
鸟 --|> 动物 : 继承
翅膀 "2" --|> "1" 鸟 : 组合
动物 ..> 氧气 : 依赖
动物 ..> 水 : 依赖、
class 动物 {
<<interface>>
+有生命
+新陈代谢(氧气, 水)
+繁殖()
}
class 鸟 {
+羽毛
+有角质喙没有牙齿
+下蛋()
}
class 鸟 {
+羽毛
+有角质喙没有牙齿
+下蛋()
}
流程图
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
graph BT;
A-->B;
A-->C;
B-->D;
C-->D;
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
---
title: Node
---
flowchart LR
id0[This is the text in the box]
id1["This ❤ Unicode"]
id2([圆括号])
id3(圆括号)
id4[[This is the text in the box]]
id5[(Database)]
id6((This is the text in the circle))
id7>This is the text in the box]
id8{This is the text in the box}
id9{{This is the text in the box}}
id10[/This is the text in the box/]
id11[\This is the text in the box\]
A[/Christmas\]
B[\Go shopping/]
id12(((This is the text in the circle)))
id0 --> id1 & id2--> id3
id4 & id5 --> id6 & id7
A --o B
flowchart LR
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
AA["A double quote:#quot;"] --> BB["A dec char:#9829;"]
flowchart LR
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
样式定制
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
sequenceDiagram
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？
%% 语法示例
gantt
dateFormat YYYY-MM-DD
title 软件开发甘特图
section 设计
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI设计 : des3, after des2, 5d
未来任务 : des4, after des3, 5d
section 开发
学习准备理解需求 :crit, done, 2014-01-06,24h
设计框架 :crit, done, after des2, 2d
开发 :crit, active, 3d
未来任务 :crit, 5d
耍 :2d
section 测试
功能测试 :active, a1, after des3, 3d
压力测试 :after a1 , 20h
测试报告 : 48h
:[参数1:crit,可不填],[参数2:active,done,可不填表示待完成],[参数3:小名],
[参数4:开始时间],[参数5:结束时间]
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
section A
task1 :done,des1, 2014-01-06,2014-01-08
task2 :active,des2, 2014-01-09, 3d
task3 :des3, after des2, 5d
task4 :crit, done, 2014-01-06,24h
task5 :crit, done, after des1, 2d
task6 :crit, active, 3d
task7 :crit, 5d
task8 :2d
task9 :1d
section B
task10 :1d
section C
task11 :1d
gantt
dateFormat YYYY-MM-DD
title 软件开发任务进度安排
excludes weekends
section 软硬件选型
硬件选择 :done,desc1, 2020-01-01,6w
软件设计 :active,desc2, after desc1,3w
section 编码准备
软件选择 :crit,done,desc3,2020-01-01,2020-01-29
编码和测试软件 :1w
安装测试系统 :2020-02-12,1w
section 完成论文
编写手册 :desc5,2020-01-01,10w
论文修改 :crit,after desc3,3w
论文定稿 :after desc5,3w
graph TB;
subgraph 分情况
A(开始)-->B{判断}
end
B--第一种情况-->C[第一种方案]
B--第二种情况-->D[第二种方案]
B--第三种情况-->F{第三种方案}
subgraph 分种类
F-.第1个.->J((测试圆形))
F-.第2个.->H>右向旗帜形]
end
H---I(测试完毕)
C--票数100---I(测试完毕)
D---I(测试完毕)
J---I(测试完毕)
代码说明：
| 字母表示 |
含义 |
| TB |
从上到下 |
| BT |
从下到上 |
| LR |
从左到右 |
| RL |
从右到左 |
| 表述 |
说明 |
含义 |
| id[文字] |
矩形节点 |
表示过程 |
| id(文字) |
圆角矩形节点 |
表示开始与结束 |
| id((文字)) |
圆形节点 |
表示连接。为避免流程过长或有交叉，可将流程切开成对 |
| id |
菱形节点 |
表示判断、决策 |
| id>文字 ] |
右向旗帜节点 |
|
1 T、B、L、T分别是Top/Bottom/Left/Right的缩写
2 id为节点的唯一标识，类似于变量。括号内为节点要显示的文字
3 单向箭头为流程进行方向。支持虚线与实线，有箭头与无箭头、有文字与无文字。分别是---、-.-、 -->、-.->、--文字-->、-.文字.->、--文字---、-.文字.-
4 支持子图。如代码、效果图所示。
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
浙公网安备 33010602011771号