Mermaid基础语法(一)
流程图-基本语法
Graph
graph用于定义流程局节点的走线方向；
T D或者TB可以让流程图从上往下走。
```mermaid
graph T D
Start --> Stop
```
graph TD
Start --> Stop
LR 从左到右
graph LR
Start --> Stop
graph LR
Start --> Stop
流程图方向定义语法：
- TB从上到下
- T D 从上到下(与TB相同)
- BT 从下到上
- RL 从右到左
- LR 从左到右
No Des&Shapes
默认情况下流程图的节点形状为直角矩形，可通过括号的组合来改变流程图节点的形状
graph LR
A --> B
C(A) --> D([Shape])
graph LR
A --> B
C(A) --> D([Shape])
mermai D添加括号改变节点形状时语法也有了些许的改变;添加括号语法后，括号内的内容就是节点里显示的内容且里面必须有内容，括号外面的内容变成了节点形状的name(在一个图表中name不能相同);
节点形状语法表
| 语法 | 说明 |
|---|---|
| start[start] | 直角矩形 |
| start(start) | 圆角矩形 |
| start([start]) | 体育场形 |
| start[[start]] | 长灯光形 |
| start[(start)] | 圆柱体形 |
| start((start)) | 正圆形 |
| start>start] | 标签形 |
| start | 菱形 |
| start{{start}} | 六角形 |
| start[/start/] | 平行四边形 |
| start[\start] | 反向平行四边行 |
| start[/start] | 梯形 |
| start[\start/] | 倒梯形 |
Line&Label
节点形状间可以添加各式各样的连线，并且可以在线上添加注释；
graph TB
A --> B
C --- D
E -- Run! --- F
G ---|Run!| H
I -.- J
K .-> L
M -.Run!.-> N
O ==Run!==> P
Q --Run!--> R --stop!--> S
graph TB
A --> B
C --- D
E -- Run! --- F
G ---|Run!| H
I -.- J
K .-> L
M -.Run!.-> N
O ==Run!==> P
Q --Run!--> R --stop!--> S
flowchart TB
T--> U & V --> W
X & Y --> Z & ZZ
flowchart TB
T--> U & V --> W
X & Y --> Z & ZZ
Flowchart
特殊类型的连线
flowchart和graph比连线变得平滑了些许，而且flowchart有更多的连线类型
flowchart TB
A --o B --x C & D
E & F --> G & H
I <--> J
K x--x L
M o--o N
flowchart TB
A --o B --x C & D
E & F --> G & H
I <--> J
K x--x L
M o--o N
较长连线(下面的代码要在8.8以上的mermaid上才能正常运行)
graph TB
subgraph one
A[A0] --> B{B0}
B -->|Yes| C[OK0]
C --> D[Rethink0]
D --> B
B ----> |No| E[End0]
end
subgraph two
F[A1] --> G{B1}
G -->|Yes| H[OK1]
H--> I[Rethink1]
I --> G
G -- NO ----> J[End1]
end
graph TD
subgraph one
A[A0] --> B{B0}
B -->|Yes| C[OK0]
C --> D[Rethink0]
D --> B
B ----> |No| E[End0]
end
subgraph two
F[A1] --> G{B1}
G -->|Yes| H[OK1]
H--> I[Rethink1]
I --> G
G -- NO ----> J[End1]
end
更多线的修饰符:
| 长度 | 1 | 2 | 3 |
|---|---|---|---|
| 正常 | --- | ---- | ----- |
| 普通带箭头 | --> | ---> | ----> |
| 粗 | === | ==== | ===== |
| 粗带箭头 | ==> | ===> | ====> |
| 点缀 | -.- | -..- | -...- |
| 点缀带箭头 | -.-> | -..-> | -...-> |
更加复杂的注释信息
在写注释的时候可能会使用到一些符号表情，这些符号表情可能会破坏代码结构，这是可以使用双引号将注释信息转成字符串
graph LR
A--"Run! && ❤❤ "-->B--"🕒stop!"-->C
graph LR
A--"Run! && ❤❤ "-->B--"🕒stop!"-->C
转义字符
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
多层嵌套(字图)
为流程添加子层
subgraph title
graph definition
end
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
graph TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
graph TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
更多有趣的用法官方文档
