利用Mermaid绘制图标
详见: https://github.com/mermaid-js/mermaid/blob/develop/README.zh-CN.md
图类
饼状图：使用pie关键字
流程图：使用graph关键字
序列图：使用sequenceDiagram关键字
甘特图：使用gantt关键字
类图：使用classDiagram关键字
状态图：使用stateDiagram关键字
用户旅程图：使用journey关键字
饼状图
1
2
3
4
5
6
| %%注释
pie
title 为什么总是宅在家里？
"喜欢宅" : 15
"天气太热或太冷" : 20
"穷" : 500
|
%%注释
pie
title 为什么总是宅在家里？
"喜欢宅" : 15
"天气太热或太冷" : 20
"穷" : 500
流程图
1
2
3
4
5
6
7
| %%注释
graph LR
A[Start] --> B{Is it?};
B -- Yes --> C[OK];
C --> D[Rethink];
D --> B;
B -- No ----> E[End];
|
%%注释
graph LR
A[Start] --> B{Is it?};
B -- Yes --> C[OK];
C --> D[Rethink];
D --> B;
B -- No ----> E[End];
方向
graph或graph TB或graph TD：从上往下
graph BT：从下往上
graph LR：从左往右
graph RL：从右往左
节点
无名字的结点：直接写内容，此时结点边框为方形；节点内容不支持空格
有名字的结点：节点名后书写内容，内容左右有特定符号，结点边框由符号决定；节点内容可以有空格
1
2
3
4
5
6
7
8
9
| %%注释
graph
默认方形
id1[方形]
id2(圆边矩形)
id3([体育场形])
id4[[子程序形]]
id5[(圆柱形)]
id6((圆形))
|
%%注释
graph
默认方形
id1[方形]
id2(圆边矩形)
id3([体育场形])
id4[[子程序形]]
id5[(圆柱形)]
id6((圆形))
1
2
3
4
5
6
7
8
| %%注释
graph
id1{菱形}
id2{{六角形}}
id3[/平行四边形/]
id4[\反向平行四边形\]
id5[/梯形\]
id6[\反向梯形/]
|
%%注释
graph
id1{菱形}
id2
id3[/平行四边形/]
id4[\反向平行四边形\]
id5[/梯形\]
id6[\反向梯形/]
连线样式
1
2
3
4
5
| %%注释
graph LR
a-->b--实线-->c-->|实线|d
a==>b==粗线==>c
a-.->b-.虚线.->c
|
%%注释
graph LR
a-->b--实线-->c-->|实线|d
a==>b==粗线==>c
a-.->b-.虚线.->c
1
2
3
4
5
6
7
8
| graph LR
a---b
b--无箭头!---c
c---|无箭头|d
d===e
e==无箭头===f
f-.-g
g-.无箭头.-h
|
graph LR
a---b
b--无箭头!---c
c---|无箭头|d
d===e
e==无箭头===f
f-.-g
g-.无箭头.-h
1
2
3
4
| flowchart LR
A o--o B
B <--> C
C x--x D
|
flowchart LR
A o--o B
B <--> C
C x--x D
1
2
3
4
5
6
7
8
9
10
| %%多重连接
graph
a --> b & c--> d
A & B--> C & D
X --> M
X --> N
Y --> M
Y --> N
|
%%多重连接
graph
a --> b & c--> d
A & B--> C & D
X --> M
X --> N
Y --> M
Y --> N