How to Write Mermaid
tl;dr:
1 节点
flowchart LR
这是一个描述性文本
2 文本节点
flowchart LR
id[这是一个文本节点]
3 图
graph TD
start --> stop
4 方向
- TB
- BT
- RL
- LR
5 节点形状
5.1 圆角矩形
开始或结束。
flowchart LR
id(圆角矩形)
5.2 体育场节点
开始或结束。
flowchart LR
id([体育场节点])
5.3 子程序
已经定义过的程序、流程，不在图表中详细列出。
flowchart LR
id[[子程序]]
5.4 数据库
flowchart LR
id[(数据库)]
5.5 圆形
表示同一页内流程图引用另一个流程图，页内引用。
流程图之间的接口。
圈内有一个字母或数字。在相互联系的流程图内，连接符号使用同样的字母或数字，以表示各个过程是如何连接的。
flowchart LR
id((1)) --- id2((1))
5.6 不对称节点
文档输入、输出。
flowchart LR
id>不对称节点]
5.7 菱形
分支判断。
flowchart LR
id1{菱形}
5.8 六边形
表示初始化或预处理的过程。
flowchart LR
id{{六边形}}
5.9 平行四边形
数据输入或输出。
flowchart LR
id[/平行四边形/]
id2[\平行四边形\]
5.10 梯形
表示手动操作。
flowchart LR
id[/梯形\]
id2[\梯形/]
5.11 双圆
flowchart LR
id(((双圆)))
6 节点之间的连接
6.1 箭头线
flowchart LR
A --> B
6.2 无箭头的链接
批注连接线。
flowchart LR
A --- B
6.3 带文本的链接
flowchart LR
A -- 文本 --- B
6.4 带文本的箭头
flowchart LR
A -- 文本 --> B
6.5 虚线箭头
流程的可选分支。
flowchart LR
A -.-> B
6.6 带文本的虚线
flowchart LR
A -. 文本 .-> B
6.7 粗体链接
flowchart LR
A ==> B
6.8 粗体带文本
flowchart LR
A == 文本 ==> B
6.9 连接链
flowchart LR
A -- text --> B --> C
D --> E & F --> G
I & J --> K & L
W --> Y
W --> Z
X --> Y
X --> Z
6.10 新箭头
flowchart LR
A --o B --> C
6.11 双向箭头
flowchart LR
A o--o B
B <--> C
C x--x D
6.12 添加更多的短划线让链接更长
flowchart TB
A[开始] --> B{是吗}
B -- yes--> C[ok]
C --> D[反思] --> B
B -- No ---> E[结束]
flowchart TB
A[开始] --> B{是吗}
B -- yes--> C[ok]
C --> D[反思] --> B
B -- No --> E[结束]
flowchart LR
A -.-> B
B -..-> C -...-> D
E --- F ---- G ----- H
7 特殊字符
flowchart LR
id["现在可以打出？、：”了！"]
8 子图
flowchart TB
subgraph one
a1 --> a2
end
subgraph two
b1 --> b2
end
subgraph three
c1 --> a2 & c2
end
8.2 子图之间的连接
flowchart TB
subgraph one
A --> B
end
subgraph two
C --> D
end
subgraph three
E --> F
end
one --> two
8.3 子图的方向
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 --> f1
end
subgraph B2
direction BT
i2 --> f2
end
B1 --> B2
end
A --> TOP --> B
留言或评论请使用 Github Issues。