流程图

撰写时间：2023-09-04

修订时间：2023-09-05

节点

--- title: A Simple Flow Chart --- %% This is comment flowchart LR node1 node2[WebGL Server] node1 --> node2

Mermaid的语法与Markdown类似。关键字title用于整个图形的标题。

使用%%来注释，这是行级的注释。

使用关键字flowchart来标识时序图。也可使用关键字graph。LR表示左右方向，具体如下表。

符号	含义
TB	上下（top bottom）
TD	上下（top down）
BT	下上
LR	左右
RL	右左

声明了node1及node2两个节点（Node）。其中，node1及node2表示节点的id。node1后面没有文本，渲染时直接渲染其名称。node2后面有文本，渲染时则渲染这些文本。

注意，如果带有文本，则节点id与开始的中括号之间不能带有空格。

可以使用Markdown的文本。

flowchart LR markdown["`This **is** _Markdown_`"] newlines["`Line1 Line2 Line3`"] markdown --> newlines

Markdown文本须使用"`text`"的格式来标识。上面出现了多余的空格，可通过设置初始参数来调整。

%%{init: {"flowchart": {"htmlLabels": false}} }%% flowchart LR markdown["`This **is** _Markdown_`"] newlines["`Line1 Line2 Line3`"] markdown --> newlines

节点类型

flowchart LR id1[长方形] --> id2(圆角) --> id3([大圆角]) id4[[水平双边]] --> id5[(圆柱体)] id7>左丝带] --> id8{菱形} --> id9{{六边形}} id10[/左平行四边形/] --> id11[\右平行四边形\] id12[/上梯形\] --> id13[\下梯形/] id6((圆)) --> id14(((双圆)))

如果节点文本内容正好包括了这些特殊符号，可使用双引号"将文本包围起来：

flowchart LR id1["文本中包括了(括号)"]

节点文本可以使用转义字符：

flowchart LR A["A double quote:#quot;"] --> B["A dec char:#9829;"]

连线

基本连线

flowchart LR A --> B C --- D E ~~~ F

箭头一般使用3个字符来表示。第1种有箭头，第2种无箭头，第3种不显示连线。

连线中的文本

根据不同的边线，连线中的文本有不同的语法。

无箭头连线

flowchart LR A -- 无箭头连线 --- B

前面用两个字符来表现--，后面是完整的---。

或者：

flowchart LR A --- |无箭头连线| B

先写完整的连线---，接着使用|文本|插入文本。---与|文本|之间的空格可以省略。这种方式比较规范、易记，且后面的几种类型均可使用这种方式，推荐使用。

有箭头连线

flowchart LR A -- 有箭头连线 --> B

或者：

flowchart LR A -->|有箭头连线| B

虚连线

无文本：

flowchart LR A -.-> B

有文本：

flowchart LR A -. 有文本 .-> B C -.->|有文本| D

粗连线

无文本：

flowchart LR A ==> B

有文本：

flowchart LR A == 有文本 ==> B C ==> |有文本| D

连线的串连

单项串连

flowchart LR A -->|frist step| B -->|second step| C

多项串连

一对多的串连：

flowchart LR A --> B & C --> D

使用&来表示同时串连。在权重上，&要高于连线（但在语法上，不能添加括号()）。因此，先将B与C视为一个整体，A分别连向B与C，B与C再各自连向D。

这等同于：

flowchart LR A --> B --> D A --> C --> D

多对多的串连：

flowchart LR A & B --> C & D

等同于：

flowchart LR A --> C A --> D B --> C B --> D

其他类型的连线

flowchart LR A --o B --x C

Mermaid支持双向连线，只需在前面添加表示连线类型的字符即可。

flowchart LR A <--> B o--o C x--x D

连线的长度

flowchart TD A[Start] --> B{Is it?} B -->|Yes| C[OK] C --> D[Rethink] D --> B B -->|No| E[End]

B到E的连线太短，不好看，这是因为B同时连向C与E，导致后两者节点都默认排在同一等级（rank）上。要改变后者的长度，可通过增加-的方式加大E的等级：

flowchart TD A[Start] --> B{Is it?} B -->|Yes| C[OK] C --> D[Rethink] D --> B B ---->|No| E[End]

---->的结果是增加了2个等级。且Mermaid自动智能地避开连线的交叉。

对于虚线，则需改变连线中的点即可：-...->

Subgraph

基本使用方法

flowchart TB c1 --> a2 subgraph one a1 --> a2 end subgraph two b1 --> b2 end subgraph three [title] c1 --> c2 end one --> two

注意，subgraph的id与标题之间可以带有空格。

各个subgraph的元素之间可以自由连接，subgraph也可连接另外的subgraph。

一个WebGL例子

subgraph可以嵌套。

flowchart TB subgraph "WebGL Buffers" vertexVBO colorVBO end subgraph GPU subgraph "Vertex Shader" aPosition aColor --> v1[vColor] end subgraph "Fragment Shader" v2[vColor] --> fragColor end v1 -.-> v2 end FrameBuffer vertexVBO --> aPosition colorVBO --> aColor aPosition & fragColor -.-> FrameBuffer

Subgraph内的方向

subgraph内可以使用direction来改变默认方向。

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

Subgraph的方向会改变

flowchart LR subgraph subgraph1 direction TB top1[top] --> bottom1[bottom] end subgraph subgraph2 direction TB top2[top] --> bottom2[bottom] end outside --> subgraph1 outside ---> top2

outside连向了subgraph2的top，导致subgraph2的方向被忽略。相反，它将继承父节点的方向。

设置样式

设置连线样式

flowchart LR A --> B C --> D E --> F linkStyle 0 stroke:#ff3, stroke-width:2px linkStyle 1,2 stroke:blue, stroke-width:3px

使用linkStyle来设置连线的样式，后面的数字为所声明的连线的索引顺序，从0开始计算。同时设置多个连线的样式时，使用逗号,隔开数字，不能有空格。

设置连线的曲线样式

如果连线不是直线，则可设置其曲线的样式。

%%{init: {'flowchart': {'curve': 'stepBefore'}}}%% flowchart LR A --> B & C --> D

可用的样式有：

basis
bumpX
bumpY
cardinal
catmullRom
linear
monotoneX
monotoneY
natural
step
stepAfter
stepBefore

设置节点样式

方法1：

flowchart LR id1(Start)-->id2(Stop) style id1 fill:#369,stroke:#333 style id2 fill:#aaa,stroke:#369,color:blue

使用style后接节点的id来设置样式。

方法2：

flowchart LR classDef someclass,otherclass fill:#555 classDef otherclass font-size:24pt A:::someclass --> B --> C class B,C otherclass

使用classDef来声明样式，使用:::让具体的节点应用样式，也可使用class为多个节点应用样式。

如果声明了名为default的类，则所有的节点均应用该样式。

flowchart LR classDef default fill:#555,color:magenta A --> B --> C

方法3：

先在HTML中声明：

然后再应用该样式。

flowchart LR A --> B[AAABBB] B --> D class A cssClass

参考资源

Mermaid Flowchart