Markdown Mermaid从入门到入土
饼状图
语法——仅供参考，建议直接看实例
从pie关键字开始图表
然后使用title关键字及其在字符串中的值，为饼图赋予标题。（这是可选的）
数据部分
在” “内写上分区名。
分区名后使用:作为分隔符
分隔符后写上数值，最多支持2位小数——数据会以百分比的形式展示
实例
1
2
3
4
5
| pie
title 为什么总是宅在家里？
"喜欢宅" : 15
"天气太热或太冷" : 20
"穷" : 500
|
1
2
3
4
5
| pie
title 为什么总是宅在家里？
"喜欢宅" : 15
"天气太热或太冷" : 20
"穷" : 500
|
流程图
实例
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
3
4
5
6
| 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：从右往左
结点
无名字的结点：直接写内容，此时结点边框为方形；节点内容不支持空格
有名字的结点：节点名后书写内容，内容左右有特定符号，结点边框由符号决定；节点内容可以有空格
下面的实例中，没有为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
8
| graph
默认方形
id1[方形]
id2(圆边矩形)
id3([体育场形])
id4[[子程序形]]
id5[(圆柱形)]
id6((圆形))
|
1
2
3
4
5
6
7
| 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
| 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
|
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
旧连线 --文本--> 也会不同
|
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
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
| 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
| graph
a --> b & c--> d
A & B--> C & D
X --> M
X --> N
Y --> M
Y --> N
|
其他
子图：需要将graph关键字改为flowchart，在代码段的开始加入subgraph，尾部加入end
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
|
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
|
注释：在行首加入%%即可。
1
2
3
4
5
6
| graph LR
%%这是一条注释，在渲染图中不可见
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
|
1
2
3
4
5
6
| graph LR
%%这是一条注释，在渲染图中不可见
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
|
