Mermaid能绘制的内容

关键字图类型关键字图类型
pie饼状图graph
flow流程图gantt甘特图
classDiagram类图stateDiagram状态图
journey用户旅程图

类图(classDiagram)

甘特图(gantt)

其他类型图(pie、stateDiagram、journey)

Mermaid图(Graph)

相关参数

图方向

  • graphgraph TBgraph TD:从上往下
  • graph BT:从下往上
  • graph LR:从左往右
  • graph RL:从右往左

图形状

1
2
3
4
5
6
7
graph
id1[方形]
id2(圆边矩形)
id3([体育场形])
id4[[子程序形]]
id5[(圆柱形)]
id6((圆形))

图线型

1
2
3
4
5
6
7
8
9
```mermaid
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
```mermaid
flowchart LR
A o--o B
B <--> C
C x--x D
## 其他线性需要用flowchart

子图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
```memaid
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
```mermaid
graph LR
you((你))-.子.->长子-.子.->grandson((孙子))
you-.子.->次子-.女.->granddaught((孙女))

father((爸)) --子-->弟
father --子-->you
father --女-->姐

妈 --子-->弟
妈 --子-->you
妈 --女-->姐

姐--子-->外甥

Flow流程图

1
2
3
4
5
6
7
8
9
10
11
12
13
```flow
st=>start: Start
op=>operation: Your Operation
op1=>operation: Your Operation1
op2=>operation: Your Operation2
cond=>condition: Yes or No?
cond2=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->op1->e
cond(no)->op2->cond2
cond2(yes)->e
cond2(no)->e

image-20230809145913838