流程图 - 基本语法
所有流程图都由节点、几何形状和边缘、箭头或线条组成。代码图定义了这些节点和边的制作和交互方式。
它还可以容纳不同的箭头类型、多向箭头以及与子图的链接。
重要提示：请勿将“end”一词键入为流程图节点。将所有或任何一个字母大写以防止流程图中断，即“End”或“END”。
一个节点（默认）
flowchart LR
id
id
注意id 是框中显示的内容。
带文本的节点
也可以在不同于 id 的框中设置文本。如果多次这样做，它将是为将使用的节点找到的最后一个文本。此外，如果您稍后为节点定义边，则可以省略文本定义。渲染框时将使用先前定义的那个。
flowchart LR
id1[This is the text in the box]
This is the text in the box
图形
该语句声明了流程图的方向。
这声明流程图从上到下（TD或TB）定向。
flowchart TD
Start --> Stop
StartStop
这表明流程图是从左到右的（LR）。
flowchart LR
Start --> Stop
StartStop
流程图方向
可能的流程图方向是：
TB - 从上到下
TD - 自上而下/与自上而下相同
BT - 自下而上
RL - 从右到左
LR——从左到右
节点形状
具有圆边的节点
flowchart LR
id1(This is the text in the box)
This is the text in the box
体育场形状的节点
flowchart LR
id1([This is the text in the box])
This is the text in the box
子程序形状中的节点
flowchart LR
id1[[This is the text in the box]]
This is the text in the box
圆柱形节点
flowchart LR
id1[(Database)]
Database
圆形节点
flowchart LR
id1((This is the text in the circle))
This is the text in the circle
不对称形状的节点
flowchart LR
id1>This is the text in the box]
This is the text in the box
目前只有上面的形状是可能的，而不是它的镜子。这可能会随着未来的版本而改变。
一个节点（菱形）
flowchart LR
id1{This is the text in the box}
This is the text in the box
六边形节点
flowchart LR
id1{{This is the text in the box}}
This is the text in the box
平行四边形
flowchart TD
id1[/This is the text in the box/]
This is the text in the box
平行四边形替代
flowchart TD
id1[\This is the text in the box\]
This is the text in the box
梯形
flowchart TD
A[/Christmas\]
Christmas
梯形 alt
flowchart TD
B[\Go shopping/]
Go shopping
双圈
flowchart TD
id1(((This is the text in the circle)))
This is the text in the circle
节点之间的链接
节点可以与链接/边连接。可以有不同类型的链接或将文本字符串附加到链接。
带箭头的链接
flowchart LR
A-->B
AB
一个开放的链接
flowchart LR
A --- B
AB
链接上的文字
flowchart LR
A-- This is the text! ---B
This is the text!AB
或者
flowchart LR
A---|This is the text|B
This is the textAB
带有箭头和文本的链接
flowchart LR
A-->|text|B
textAB
或者
flowchart LR
A-- text -->B
textAB
虚线链接
flowchart LR;
A-.->B;
AB
带文本的虚线链接
flowchart LR
A-. text .-> B
textAB
厚链接
flowchart LR
A ==> B
AB
带文本的粗链接
flowchart LR
A == text ==> B
textAB
链接的链接
可以在同一行中声明许多链接，如下所示：
flowchart LR
A -- text --> B -- text2 --> C
texttext2ABC
也可以在同一行中声明多个节点链接，如下所示：
flowchart LR
a --> b & c--> d
abcd
然后，您可以以非常有表现力的方式描述依赖关系。就像下面的单线：
flowchart TB
A & B--> C & D
ABCD
如果您使用基本语法描述相同的图表，则需要四行。警告一句，这可能会使流程图更难以降价形式阅读。瑞典词lagom浮现在脑海。这意味着，不要太多也不要太少。这也适用于表达性语法。
flowchart TB
A --> C
A --> D
B --> C
B --> D
新的箭头类型
支持以下新类型的箭头：
flowchart LR
A --o B
B --x C
ABC
多向箭头
可以使用多向箭头。
flowchart LR
A o--o B
B <--> C
C x--x D
ABCD
链接的最小长度
流程图中的每个节点最终都根据其链接到的节点被分配到渲染图中的等级，即垂直或水平级别（取决于流程图方向）。默认情况下，链接可以跨越任意数量的等级，但您可以通过在链接定义中添加额外的破折号来要求任何链接比其他链接更长。
在以下示例中，在从节点B 到节点E的链接中添加了两个额外的破折号，因此它比常规链接多两个等级：
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
YesNoStartIs it?OKRethinkEnd
注意链接可能仍会比渲染引擎请求的等级数更长，以适应其他请求。
当链接标签写在链接中间时，额外的破折号必须添加在链接的右侧。以下示例与上一个示例等效：
flowchart TD
A[Start] --> B{Is it?}
B -- Yes --> C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
YesNoStartIs it?OKRethinkEnd
对于点链接或粗链接，要添加的字符是等号或点，如下表所示：
长度123
普通的------------
正常带箭头-->--->---->
厚的============
粗带箭头==>===>====>
点缀-.--..--...-
点缀箭头-.->-..->-...->
破坏语法的特殊字符
可以将文本放在引号内以呈现更麻烦的字符。如下例所示：
flowchart LR
id1["This is the (text) in the box"]
This is the (text) in the box
用于转义字符的实体代码
可以使用此处示例的语法来转义字符。
flowchart LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
A double quote:"A dec char:♥
给出的数字以 10 为底，因此#可以编码为#35;. 还支持使用 HTML 字符名称。
子图
subgraph title
graph definition
end
下面的一个例子：
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
threeonec2c1twob2b1a2a1
您还可以为子图设置显式 id。
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
onea2a1c1
流程图
使用 graphtype 流程图，还可以设置与子图之间的边，如下面的流程图所示。
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
threeonec2c1twob2b1a2a1
子图中的方向
使用 graphtype 流程图，您可以使用方向语句来设置子图将呈现的方向，如本例所示。
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
TOPB1f1i1B2f2i2AB
相互作用
可以将单击事件绑定到节点，单击可以导致 javascript 回调或将在新浏览器选项卡中打开的链接。注意：此功能在使用时禁用，在使用时securityLevel='strict'启用securityLevel='loose'。
click nodeId callback
click nodeId call callback()
nodeId 是节点的id
callback 是在显示图形的页面上定义的 javascript 函数的名称，该函数将以 nodeId 作为参数被调用。
下面的工具提示用法示例：
工具提示文本用双引号括起来。工具提示的样式由类设置.mermaidTooltip。
flowchart LR
A-->B
B-->C
C-->D
click A callback "Tooltip for a callback"
click B "https://www.github.com" "This is a tooltip for a link"
click A call callback() "Tooltip for a callback"
click B href "https://www.github.com" "This is a tooltip for a link"
ABCD
默认情况下，链接在同一浏览器选项卡/窗口中打开。可以通过将链接目标添加到点击定义来更改此设置（支持_self,_blank和）：_parent_top
flowchart LR
A-->B
B-->C
C-->D
D-->E
click A "https://www.github.com" _blank
click B "https://www.github.com" "Open this in a new tab" _blank
click C href "https://www.github.com" _blank
click D href "https://www.github.com" "Open this in a new tab" _blank
ABCDE
初学者提示——在 html 上下文中使用交互式链接的完整示例：