流程图
流程图是对过程、算法、流程的一种图像表示，在技术设计、交流及商业简报等领域有广泛的应用。 通常用一些图框来表示各种类型的操作，在框内写出各个步骤，然后用带箭头的线把它们连接起来， 以表示执行的先后顺序。用图形表示算法，直观形象，易于理解。有时候也被称之为输入-输出图。 顾名思义，就是用来直观地描述一个工作过程的具体步骤。这种过程既可以是生产线上的工艺流程， 也可以是完成一项任务所必需的管理过程。
mermaid flowchart文档
mermaid关键字flowchart
图例方向
| 关键字 | 描述 |
|---|
| TB | top to bottom, 从顶到底 |
| TD | top-down, 同TB |
| BT | bottom to top, 从底到顶 |
| RL | right to left, 从右到左 |
| LR | left to right, 从左到右 |
节点形状
| 形状 | 效果 |
|---|
| (圆角) |
flowchart LR
id1(圆角)
|
| ([圆边]) |
flowchart LR
id1([圆边])
|
| [[子程序]] |
flowchart LR
id1[[子程序]]
|
| ((圆形)) |
flowchart LR
id1((圆形))
|
| [(圆柱体)] |
flowchart LR
id1[(圆柱体)]
|
| >不对称的] |
flowchart LR
id1>不对称的]
|
| {菱形} |
flowchart LR
id1{菱形}
|
| {{六边形}} |
flowchart LR
id1{{六边形}}
|
| [/平行四边形/] |
flowchart LR
id1[/平行四边形/]
|
| [/梯形\] |
flowchart LR
id1[/梯形\]
|
连接
连接符号
| 连接 | 代码 | 效果 |
|---|
| --直线--- |
flowchart LR
A --- B
C --直线--- D
E ---|直线| F
|
flowchart LR
A --- B
C --直线--- D
E ---|直线| F
|
| --箭头直线--> |
flowchart LR
A --> B
C --箭头直线--> D
E -->|箭头直线| F
|
flowchart LR
A --> B
C --箭头直线--> D
E -->|箭头直线| F
|
| ==粗直线=== |
flowchart LR
A === B
C ==直线=== D
E ===|直线| F
|
flowchart LR
A === B
C ==直线=== D
E ===|直线| F
|
| ==粗箭头直线==> |
flowchart LR
A ==> B
C ==粗箭头直线==> D
E ==>|粗箭头直线| F
|
flowchart LR
A ==> B
C ==粗箭头直线==> D
E ==>|粗箭头直线| F
|
| -.虚线.- |
flowchart LR
A -.- B
C -.虚线.- D
E -.-|虚线| F
|
flowchart LR
A -.- B
C -.虚线.- D
E -.-|虚线| F
|
| -.箭头虚线.-> |
flowchart LR
A -.-> B
C -.箭头虚线.-> D
E -.->|箭头虚线| F
|
flowchart LR
A -.-> B
C -.箭头虚线.-> D
E -.->|箭头虚线| F
|
连接长度
| 连接类型 | 长度1 | 长度2 | 长度3 |
|---|
| 直线 | --- | ---- | ----- |
| 箭头直线 | --> | ---> | ----> |
| 粗直线 | === | ==== | ===== |
| 粗箭头直线 | ==> | ===> | ====> |
| 虚线 | -.- | -..- | -...- |
| 箭头虚线 | -.-> | -..-> | -...-> |
连接链
连续连接
flowchart LR
A --- B --文字--> C -.- D -.文字.- E === F ==文字==> G
flowchart LR
A --- B --文字--> C -.- D -.文字.- E === F ==文字==> G
相同线连接
flowchart LR
a --> b & c--> d
flowchart LR
a --> b & c--> d
flowchart TD
A & B--> C & D
flowchart TD
A & B--> C & D
超链接
flowchart LR
A-->B
click A "https://mermaid-js.github.io/" _blank
click B "https://www.xiehai.win" _blank
flowchart LR
A-->B
click A "https://mermaid-js.github.io/" _blank
click B "https://www.xiehai.win" _blank
子图
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
