原文链接: https://www.cnblogs.com/jinliang374003909/p/15265205.html
https://mermaid-js.github.io/mermaid/#/flowchart
基础语法–流程图
- 结点
- 带有文字的结点
流程图方向
- TB - top to bottom
- BT - bottom to top
- RL - right to left
- LR - left to right
- TD - top-down / same as top to bottom
结点形状
圆角结点
子程序结点
圆柱形结点
圆形结点
菱形结点
六角形结点
平行四边形结点
梯形结点
连接两个结点
带箭头的连接线
不带箭头
带文字的线
带箭头带文字
虚线和带文字的虚线
带文字的虚线
加粗线
多条线
上图关系可以通过4行描述
flowchart TB
A-->C
A-->D
B-->C
B-->D
过度追求简洁会降低代码可读性,不便于理解。
新的箭头类型
多方向的箭头
加长线
对于虚线或粗线链接,添加的字符为等号或点,汇总如下表
Length | 1 | 2 | 3 |
---|---|---|---|
Normal | — | ---- | ----- |
Normal with arrow | –> | —> | ----> |
Thick | === | ==== | ===== |
Thick with arrow | ==> | ===> | ====> |
Dotted | -.- | -…- | -…- |
Dotted with arrow | -.-> | -…-> | -…-> |
子图-语法
subgraph title
graph definition
end
举例
给子图设置id
设置子图的边