前言
官网
https://mermaid.js.org/
在线编辑器
https://mermaid.live/edit
Mermaid能绘制哪些图？
- 饼状图：使用
pie关键字，具体用法后文将详细介绍
- 流程图：使用
graph关键字，具体用法后文将详细介绍
- 序列图：使用
sequenceDiagram关键字
- 甘特图：使用
gantt关键字
- 类图：使用
classDiagram关键字
- 状态图：使用
stateDiagram关键字
- 用户旅程图：使用
journey关键字
基本格式
Pie(饼图)
语法——仅供参考，建议直接看实例
1
2
3
4
5
| pie
title 为什么总是宅在家里？
"喜欢宅" : 15
"天气太热或太冷" : 20
"穷" : 500
|
效果
Sequence diagram(时序图)
其中
示例
1
2
3
4
5
6
7
8
| sequenceDiagram
participant 用户A
participant WS
participant 用户B
用户A->>WS: 1. 创建offer并发送 sdp type:offer
WS->>用户B: 2. sdp type:offer
用户B->>WS: 3. sdp type:answer
WS-->>用户A: 4. sdp type:answer
|
效果
使用别名
1
2
3
4
5
6
7
8
9
| sequenceDiagram
participant A as 用户A
participant WS as WS
participant B as 用户B
A->>WS: 1. 创建offer并发送 sdp type:offer
WS->>B: 2. sdp type:offer
B->>WS: 3. sdp type:answer
WS->>A: 4. sdp type:answer
|
效果
Flowchart(流程图)
方向
方向：用于开头，声明流程图的方向。
graph或graph TB或graph TD：从上往下graph BT：从下往上graph LR：从左往右graph RL：从右往左
左右布局
1
2
3
4
5
6
| graph LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
|
效果
上下布局
1
2
3
4
5
6
| graph TB
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
|
效果
结点
- 无名字的结点：直接写内容，此时结点边框为方形；节点内容不支持空格
- 有名字的结点：节点名后书写内容，内容左右有特定符号，结点边框由符号决定；节点内容可以有空格
下面的实例中，没有为graph指定方向，因此默认是从上往下的。但是由于各个结点之前没有箭头，所以他们都处于同一排。id1-id6是节点名，可随意定义。
1
2
3
4
5
6
7
8
| graph
默认方形
id1[方形]
id2(圆边矩形)
id3([体育场形])
id4[[子程序形]]
id5[(圆柱形)]
id6((圆形))
|
效果
1
2
3
4
5
6
7
| graph
id1{菱形}
id2{{六角形}}
id3[/平行四边形/]
id4[\反向平行四边形\]
id5[/梯形\]
id6[\反向梯形/]
|
效果
连线样式
实线箭头：分为无文本箭头和有文本箭头，有文本箭头有2种书写格式
1
2
| graph LR
a-->b--文本1-->c-->|文本2|d
|
效果
粗实线箭头：分为无文本箭头和有文本箭头
效果
虚线箭头：分为无文本箭头和有文本箭头
效果
无箭头线：即以上三种连线去掉箭头后的形式
1
2
3
4
5
6
7
8
| graph LR
a---b
b--文本1!---c
c---|文本2|d
d===e
e==文本3===f
f-.-g
g-.文本.-h
|
效果
其他连线：需要将graph关键字改为flowchart，除了新增加的连线形式外，上面三种线的渲染效果也会不同
1
2
3
4
5
6
| flowchart LR
A o--o B
B <--> C
C x--x D
旧连线 --文本--> 也会不同
|
效果
延长连线：增加相应字符即可，如下图中的B到E，连线中增加了一个-。字符可多次添加。
1
2
3
4
5
6
| graph LR
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B --->|No| E[End];
|
效果
连线形式
直链
1
2
| graph LR
A -- text --> B -- text2 --> C
|
效果
多重链：可以使用&字符，或单个描述
1
2
3
4
5
6
7
8
9
| graph
a --> b & c--> d
A & B--> C & D
X --> M
X --> N
Y --> M
Y --> N
|
效果
子图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
|
效果
Gantt chart(甘特图)
1
2
3
4
5
6
7
8
| gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
|
效果
StateDiagram(状态图)
语法解释：[*] 表示开始或者结束，如果在箭头右边则表示结束。
1
2
3
4
5
6
| stateDiagram
[*] --> s1
s1 --> s2
s1 --> s3
s2 --> [*]
s3 --> [*]
|
效果
设置方向
1
2
3
4
5
6
7
| stateDiagram
direction LR
BI --> 表
BI --> 业务主题
BI --> 数据集
数据集 --> 数据模型
数据集 --> 指标模型
|
效果
Class diagram(类图)
语法解释：<|-- 表示继承，+ 表示 public，- 表示 private，学过 Java 的应该都知道。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| 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()
}
|
效果
