本文详述了流程图的基本构成元素，如节点、边和箭头类型，以及流程图的方向设定，包括不同流向如TB、TD、BT、RL、LR等。介绍了节点形状的多样性和如何在代码中定义文本、虚线链接、带文本的链接等。还涉及了通过CSS类自定义样式和节点类别的应用。
流程图 - 基本语法
所有流程图都由节点、几何形状和边缘、箭头或线条组成。代码图定义了这些节点和边的制作和交互方式。
它还可以容纳不同的箭头类型、多向箭头以及与子图的链接。
重要提示：请勿将“end”一词键入为流程图节点。将所有或任何一个字母大写以防止流程图中断，即“End”或“END”。
一个节点（默认）
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">id</span>
</span></span>
id
注意id 是框中显示的内容。
带文本的节点
也可以在不同于 id 的框中设置文本。如果多次这样做，它将是为将使用的节点找到的最后一个文本。此外，如果您稍后为节点定义边，则可以省略文本定义。渲染框时将使用先前定义的那个。
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">id1</span><span style="color:#aa8500">[This is the text in the box]</span>
</span></span>
This is the text in the box
图形
该语句声明了流程图的方向。
这声明流程图从上到下（TD或TB）定向。
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">TD</span>
<span style="color:#a22889">Start</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">Stop</span>
</span></span>
Start
Stop
这表明流程图是从左到右的（LR）。
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">Start</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">Stop</span>
</span></span>
Start
Stop
流程图方向
可能的流程图方向是：
- TB - 从上到下
- TD - 自上而下/与自上而下相同
- BT - 自下而上
- RL - 从右到左
- LR——从左到右
节点形状
具有圆边的节点
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">id1</span><span style="color:#aa8500">(This is the text in the box)</span>
</span></span>
This is the text in the box
体育场形状的节点
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">id1</span><span style="color:#aa8500">([This is the text in the box])</span>
</span></span>
This is the text in the box
子程序形状中的节点
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">id1</span><span style="color:#aa8500">[[This is the text in the box]]</span>
</span></span>
This is the text in the box
圆柱形节点
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">id1</span><span style="color:#aa8500">[(Database)]</span>
</span></span>
Database
圆形节点
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">id1</span><span style="color:#aa8500">((This is the text in the circle))</span>
</span></span>
This is the text in the circle
不对称形状的节点
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">id1</span><span style="color:#aa8500">>This is the text in the box]</span>
</span></span>
This is the text in the box
目前只有上面的形状是可能的，而不是它的镜子。这可能会随着未来的版本而改变。
一个节点（菱形）
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">id1</span><span style="color:#aa8500">{This is the text in the box}</span>
</span></span>
This is the text in the box
六边形节点
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">id1</span><span style="color:#aa8500">{{This is the text in the box}}</span>
</span></span>
This is the text in the box
平行四边形
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">TD</span>
<span style="color:#a22889">id1</span><span style="color:#aa8500">[/This is the text in the box/]</span>
</span></span>
This is the text in the box
平行四边形替代
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">TD</span>
<span style="color:#a22889">id1</span><span style="color:#aa8500">[\This is the text in the box\]</span>
</span></span>
This is the text in the box
梯形
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">TD</span>
<span style="color:#a22889">A</span><span style="color:#aa8500">[/Christmas\]</span>
</span></span>
Christmas
梯形 alt
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">TD</span>
<span style="color:#a22889">B</span><span style="color:#aa8500">[\Go shopping/]</span>
</span></span>
Go shopping
双圈
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">TD</span>
<span style="color:#a22889">id1</span><span style="color:#aa8500">(((This is the text in the circle)))</span>
</span></span>
This is the text in the circle
节点之间的链接
节点可以与链接/边连接。可以有不同类型的链接或将文本字符串附加到链接。
带箭头的链接
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">B</span>
</span></span>
A
B
一个开放的链接
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span> <span style="color:#008800"><strong>---</strong></span> <span style="color:#a22889">B</span>
</span></span>
A
B
链接上的文字
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span><span style="color:#008800"><strong>--</strong></span><span style="color:#aa8500"> This is the text! </span><span style="color:#008800"><strong>---</strong></span><span style="color:#a22889">B</span>
</span></span>
This is the text!
A
B
或者
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span><span style="color:#008800"><strong>---</strong></span><span style="color:#aa8500">|This is the text|</span><span style="color:#a22889">B</span>
</span></span>
This is the text
A
B
带有箭头和文本的链接
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span><span style="color:#008800"><strong>--></strong></span><span style="color:#aa8500">|text|</span><span style="color:#a22889">B</span>
</span></span>
text
A
B
或者
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span><span style="color:#008800"><strong>--</strong></span><span style="color:#aa8500"> text </span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">B</span>
</span></span>
text
A
B
虚线链接
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span><span style="color:#000000"><strong>;</strong></span>
<span style="color:#a22889">A</span><span style="color:#008800"><strong>-.-></strong></span><span style="color:#a22889">B</span><span style="color:#000000"><strong>;</strong></span>
</span></span>
A
B
带文本的虚线链接
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span><span style="color:#008800"><strong>-.</strong></span><span style="color:#aa8500"> text </span><span style="color:#008800"><strong>.-></strong></span> <span style="color:#a22889">B</span>
</span></span>
text
A
B
厚链接
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span> <span style="color:#008800"><strong>==></strong></span> <span style="color:#a22889">B</span>
</span></span>
A
B
带文本的粗链接
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span> <span style="color:#008800"><strong>==</strong></span><span style="color:#aa8500"> text </span><span style="color:#008800"><strong>==></strong></span> <span style="color:#a22889">B</span>
</span></span>
text
A
B
链接的链接
可以在同一行中声明许多链接，如下所示：
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span> <span style="color:#008800"><strong>--</strong></span><span style="color:#aa8500"> text </span><span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">B</span> <span style="color:#008800"><strong>--</strong></span><span style="color:#aa8500"> text2 </span><span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">C</span>
</span></span>
text
text2
A
B
C
也可以在同一行中声明多个节点链接，如下所示：
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">a</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">b</span> <span style="color:#000000"><strong>&</strong></span> <span style="color:#a22889">c</span><span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">d</span>
</span></span>
a
b
c
d
然后，您可以以非常有表现力的方式描述依赖关系。就像下面的单线：
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">TB</span>
<span style="color:#a22889">A</span> <span style="color:#000000"><strong>&</strong></span> <span style="color:#a22889">B</span><span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">C</span> <span style="color:#000000"><strong>&</strong></span> <span style="color:#a22889">D</span>
</span></span>
A
B
C
D
如果您使用基本语法描述相同的图表，则需要四行。警告一句，这可能会使流程图更难以降价形式阅读。瑞典词lagom浮现在脑海。这意味着，不要太多也不要太少。这也适用于表达性语法。
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">TB</span>
<span style="color:#a22889">A</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">C</span>
<span style="color:#a22889">A</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">D</span>
<span style="color:#a22889">B</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">C</span>
<span style="color:#a22889">B</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">D</span>
</span></span>新的箭头类型
支持以下新类型的箭头：
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span> <span style="color:#008800"><strong>--o</strong></span> <span style="color:#a22889">B</span>
<span style="color:#a22889">B</span> <span style="color:#008800"><strong>--x</strong></span> <span style="color:#a22889">C</span>
</span></span>
A
B
C
多向箭头
可以使用多向箭头。
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span> <span style="color:#008800"><strong>o--o</strong></span> <span style="color:#a22889">B</span>
<span style="color:#a22889">B</span> <span style="color:#008800"><strong><--></strong></span> <span style="color:#a22889">C</span>
<span style="color:#a22889">C</span> <span style="color:#008800"><strong>x--x</strong></span> <span style="color:#a22889">D</span>
</span></span>
A
B
C
D
链接的最小长度
流程图中的每个节点最终都根据其链接到的节点被分配到渲染图中的等级，即垂直或水平级别（取决于流程图方向）。默认情况下，链接可以跨越任意数量的等级，但您可以通过在链接定义中添加额外的破折号来要求任何链接比其他链接更长。
在以下示例中，在从节点B 到节点E的链接中添加了两个额外的破折号，因此它比常规链接多两个等级：
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">TD</span>
<span style="color:#a22889">A</span><span style="color:#aa8500">[Start]</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">B</span><span style="color:#aa8500">{Is it?}</span>
<span style="color:#a22889">B</span> <span style="color:#008800"><strong>--></strong></span><span style="color:#aa8500">|Yes|</span> <span style="color:#a22889">C</span><span style="color:#aa8500">[OK]</span>
<span style="color:#a22889">C</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">D</span><span style="color:#aa8500">[Rethink]</span>
<span style="color:#a22889">D</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">B</span>
<span style="color:#a22889">B</span> <span style="color:#008800"><strong>----></strong></span><span style="color:#aa8500">|No|</span> <span style="color:#a22889">E</span><span style="color:#aa8500">[End]</span>
</span></span>
Yes
No
Start
Is it?
OK
Rethink
End
注意链接可能仍会比渲染引擎请求的等级数更长，以适应其他请求。
当链接标签写在链接中间时，额外的破折号必须添加在链接的右侧。以下示例与上一个示例等效：
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">TD</span>
<span style="color:#a22889">A</span><span style="color:#aa8500">[Start]</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">B</span><span style="color:#aa8500">{Is it?}</span>
<span style="color:#a22889">B</span> <span style="color:#008800"><strong>--</strong></span><span style="color:#aa8500"> Yes </span><span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">C</span><span style="color:#aa8500">[OK]</span>
<span style="color:#a22889">C</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">D</span><span style="color:#aa8500">[Rethink]</span>
<span style="color:#a22889">D</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">B</span>
<span style="color:#a22889">B</span> <span style="color:#008800"><strong>--</strong></span><span style="color:#aa8500"> No </span><span style="color:#008800"><strong>----</strong></span><span style="color:#000000">> </span><span style="color:#a22889">E</span><span style="color:#aa8500">[End]</span>
</span></span>
Yes
No
Start
Is it?
OK
Rethink
End
对于点链接或粗链接，要添加的字符是等号或点，如下表所示：
| 长度 | 1 | 2 | 3 |
|---|---|---|---|
| 普通的 | --- | ---- | ----- |
| 正常带箭头 | --> | ---> | ----> |
| 厚的 | === | ==== | ===== |
| 粗带箭头 | ==> | ===> | ====> |
| 点缀 | -.- | -..- | -...- |
| 点缀箭头 | -.-> | -..-> | -...-> |
破坏语法的特殊字符
可以将文本放在引号内以呈现更麻烦的字符。如下例所示：
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">id1</span><span style="color:#aa8500">["This is the (text) in the box"]</span>
</span></span>
This is the (text) in the box
用于转义字符的实体代码
可以使用此处示例的语法来转义字符。
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong> flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span><span style="color:#aa8500">["A double quote:#quot;"]</span> <span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">B</span><span style="color:#aa8500">["A dec char:#9829;"]</span>
</span></span>
A double quote:"
A dec char:♥
给出的数字以 10 为底，因此#可以编码为#35;. 还支持使用 HTML 字符名称。
子图
<span style="background-color:#f8f8f8"><span style="color:#34495e"><code>subgraph title
graph definition
end</code></span></span>下面的一个例子：
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">TB</span>
<span style="color:#a22889">c1</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">a2</span>
<span style="color:#9650c8"><strong>subgraph</strong></span> <span style="color:#a22889">one</span>
<span style="color:#a22889">a1</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">a2</span>
<span style="color:#9650c8"><strong>end</strong></span>
<span style="color:#9650c8"><strong>subgraph</strong></span> <span style="color:#a22889">two</span>
<span style="color:#a22889">b1</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">b2</span>
<span style="color:#9650c8"><strong>end</strong></span>
<span style="color:#9650c8"><strong>subgraph</strong></span> <span style="color:#a22889">three</span>
<span style="color:#a22889">c1</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">c2</span>
<span style="color:#9650c8"><strong>end</strong></span>
</span></span>
three
one
c2
c1
two
b2
b1
a2
a1
您还可以为子图设置显式 id。
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">TB</span>
<span style="color:#a22889">c1</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">a2</span>
<span style="color:#9650c8"><strong>subgraph</strong></span> <span style="color:#a22889">ide1</span> <span style="color:#aa8500">[one]</span>
<span style="color:#a22889">a1</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">a2</span>
<span style="color:#9650c8"><strong>end</strong></span>
</span></span>
one
a2
a1
c1
流程图
使用 graphtype 流程图，还可以设置与子图之间的边，如下面的流程图所示。
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">TB</span>
<span style="color:#a22889">c1</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">a2</span>
<span style="color:#9650c8"><strong>subgraph</strong></span> <span style="color:#a22889">one</span>
<span style="color:#a22889">a1</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">a2</span>
<span style="color:#9650c8"><strong>end</strong></span>
<span style="color:#9650c8"><strong>subgraph</strong></span> <span style="color:#a22889">two</span>
<span style="color:#a22889">b1</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">b2</span>
<span style="color:#9650c8"><strong>end</strong></span>
<span style="color:#9650c8"><strong>subgraph</strong></span> <span style="color:#a22889">three</span>
<span style="color:#a22889">c1</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">c2</span>
<span style="color:#9650c8"><strong>end</strong></span>
<span style="color:#a22889">one</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">two</span>
<span style="color:#a22889">three</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">two</span>
<span style="color:#a22889">two</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">c2</span>
</span></span>
three
one
c2
c1
two
b2
b1
a2
a1
子图中的方向
使用 graphtype 流程图，您可以使用方向语句来设置子图将呈现的方向，如本例所示。
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#9650c8"><strong>subgraph</strong></span> <span style="color:#a22889">TOP</span>
<span style="color:#649696">direction</span> <span style="color:#649696">TB</span>
<span style="color:#9650c8"><strong>subgraph</strong></span> <span style="color:#a22889">B1</span>
<span style="color:#649696">direction</span> <span style="color:#649696">RL</span>
<span style="color:#a22889">i1</span> <span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">f1</span>
<span style="color:#9650c8"><strong>end</strong></span>
<span style="color:#9650c8"><strong>subgraph</strong></span> <span style="color:#a22889">B2</span>
<span style="color:#649696">direction</span> <span style="color:#649696">BT</span>
<span style="color:#a22889">i2</span> <span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">f2</span>
<span style="color:#9650c8"><strong>end</strong></span>
<span style="color:#9650c8"><strong>end</strong></span>
<span style="color:#a22889">A</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">TOP</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">B</span>
<span style="color:#a22889">B1</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">B2</span>
</span></span>
TOP
B1
f1
i1
B2
f2
i2
A
B
相互作用
可以将单击事件绑定到节点，单击可以导致 javascript 回调或将在新浏览器选项卡中打开的链接。注意：此功能在使用时禁用，在使用时securityLevel='strict'启用securityLevel='loose'。
<span style="background-color:#f8f8f8"><span style="color:#34495e"><code>click nodeId callback
click nodeId call callback()</code></span></span>- nodeId 是节点的id
- callback 是在显示图形的页面上定义的 javascript 函数的名称，该函数将以 nodeId 作为参数被调用。
下面的工具提示用法示例：
<span style="background-color:#f8f8f8"><span style="color:#34495e"><code><span style="color:#2973b7"><span style="color:#2973b7"><span style="color:#525252"><</span>script</span><span style="color:#525252">></span></span>
<span style="color:#e96900">var</span> <span style="color:#e96900">callback</span> = <span style="color:#e96900">function</span> <span style="color:#525252">(</span><span style="color:#525252">)</span> <span style="color:#525252">{</span>
<span style="color:#e96900">alert</span><span style="color:#525252">(</span><span style="color:var(--theme-color,#42b983)">'A callback was triggered'</span><span style="color:#525252">)</span><span style="color:#525252">;</span>
<span style="color:#525252">}</span><span style="color:#525252">;</span>
<span style="color:#2973b7"><span style="color:#2973b7"><span style="color:#525252"></</span>script</span><span style="color:#525252">></span></span></code></span></span>工具提示文本用双引号括起来。工具提示的样式由类设置.mermaidTooltip。
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">B</span>
<span style="color:#a22889">B</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">C</span>
<span style="color:#a22889">C</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">D</span>
<span style="color:#649696">click</span> <span style="color:#a22889">A</span> <span style="color:#a22889">callback</span> <span style="color:#aa8500">"Tooltip for a callback"</span>
<span style="color:#649696">click</span> <span style="color:#a22889">B</span> <span style="color:#aa8500">"https://www.github.com"</span> <span style="color:#aa8500">"This is a tooltip for a link"</span>
<span style="color:#649696">click</span> <span style="color:#a22889">A</span> <span style="color:#649696">call</span> <span style="color:#a22889">callback</span><span style="color:#000000">() </span><span style="color:#aa8500">"Tooltip for a callback"</span>
<span style="color:#649696">click</span> <span style="color:#a22889">B</span> <span style="color:#649696">href</span> <span style="color:#aa8500">"https://www.github.com"</span> <span style="color:#aa8500">"This is a tooltip for a link"</span>
</span></span>
A
B
C
D
默认情况下，链接在同一浏览器选项卡/窗口中打开。可以通过将链接目标添加到点击定义来更改此设置（支持_self,_blank和）：_parent_top
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">B</span>
<span style="color:#a22889">B</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">C</span>
<span style="color:#a22889">C</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">D</span>
<span style="color:#a22889">D</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">E</span>
<span style="color:#649696">click</span> <span style="color:#a22889">A</span> <span style="color:#aa8500">"https://www.github.com"</span><span style="color:#000000"> _</span><span style="color:#a22889">blank</span>
<span style="color:#649696">click</span> <span style="color:#a22889">B</span> <span style="color:#aa8500">"https://www.github.com"</span> <span style="color:#aa8500">"Open this in a new tab"</span><span style="color:#000000"> _</span><span style="color:#a22889">blank</span>
<span style="color:#649696">click</span> <span style="color:#a22889">C</span> <span style="color:#649696">href</span> <span style="color:#aa8500">"https://www.github.com"</span><span style="color:#000000"> _</span><span style="color:#a22889">blank</span>
<span style="color:#649696">click</span> <span style="color:#a22889">D</span> <span style="color:#649696">href</span> <span style="color:#aa8500">"https://www.github.com"</span> <span style="color:#aa8500">"Open this in a new tab"</span><span style="color:#000000"> _</span><span style="color:#a22889">blank</span>
</span></span>
A
B
C
D
E
初学者提示——在 html 上下文中使用交互式链接的完整示例：
<span style="background-color:#f8f8f8"><span style="color:#34495e"><code><span style="color:#2973b7"><span style="color:#2973b7"><span style="color:#525252"><</span>body</span><span style="color:#525252">></span></span>
<span style="color:#2973b7"><span style="color:#2973b7"><span style="color:#525252"><</span>div</span> <span style="color:#2973b7">class</span><span style="color:var(--theme-color,#42b983)"><span style="color:#525252">=</span><span style="color:#525252">"</span>mermaid<span style="color:#525252">"</span></span><span style="color:#525252">></span></span>
flowchart LR
A-->B
B-->C
C-->D
click A callback "Tooltip"
click B "https://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "https://www.github.com" "This is a link"
<span style="color:#2973b7"><span style="color:#2973b7"><span style="color:#525252"></</span>div</span><span style="color:#525252">></span></span>
<span style="color:#2973b7"><span style="color:#2973b7"><span style="color:#525252"><</span>script</span><span style="color:#525252">></span></span>
<span style="color:#e96900">var</span> <span style="color:#e96900">callback</span> = <span style="color:#e96900">function</span> <span style="color:#525252">(</span><span style="color:#525252">)</span> <span style="color:#525252">{</span>
<span style="color:#e96900">alert</span><span style="color:#525252">(</span><span style="color:var(--theme-color,#42b983)">'A callback was triggered'</span><span style="color:#525252">)</span><span style="color:#525252">;</span>
<span style="color:#525252">}</span><span style="color:#525252">;</span>
<span style="color:#e96900">var</span> config = <span style="color:#525252">{</span>
startOnLoad: <span style="color:#c76b29">true</span><span style="color:#525252">,</span>
flowchart: <span style="color:#525252">{</span> useMaxWidth: <span style="color:#c76b29">true</span><span style="color:#525252">,</span> htmlLabels: <span style="color:#c76b29">true</span><span style="color:#525252">,</span> curve: <span style="color:var(--theme-color,#42b983)">'cardinal'</span> <span style="color:#525252">}</span><span style="color:#525252">,</span>
securityLevel:<span style="color:var(--theme-color,#42b983)">'loose'</span>
<span style="color:#525252">}</span><span style="color:#525252">;</span>
mermaid<span style="color:#525252">.</span><span style="color:#e96900">initialize</span><span style="color:#525252">(</span>config<span style="color:#525252">)</span><span style="color:#525252">;</span>
<span style="color:#2973b7"><span style="color:#2973b7"><span style="color:#525252"></</span>script</span><span style="color:#525252">></span></span>
<span style="color:#2973b7"><span style="color:#2973b7"><span style="color:#525252"></</span>body</span><span style="color:#525252">></span></span></code></span></span>注释
可以在流程图中输入注释，解析器将忽略这些注释。注释需要单独一行，并且必须以%%（双百分号）开头。注释开始后到下一个换行符的任何文本都将被视为注释，包括任何流语法
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#888c89">%% this is a comment A -- text --> B{node}</span>
<span style="color:#a22889">A</span> <span style="color:#008800"><strong>--</strong></span><span style="color:#aa8500"> text </span><span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">B</span> <span style="color:#008800"><strong>--</strong></span><span style="color:#aa8500"> text2 </span><span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">C</span>
</span></span>造型和课程
样式链接
可以设置链接样式。例如，您可能想要对流中向后的链接进行样式设置。由于链接没有与节点相同的 id，因此需要其他方式来确定链接应附加到哪种样式。使用图表中定义链接时的顺序号代替 ids，或使用默认值应用于所有链接。在下面的示例中，linkStyle 语句中定义的样式将属于图中的第四个链接：
<span style="background-color:#f8f8f8"><span style="color:#34495e"><code>linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;</code></span></span>造型线曲线
如果默认方法不能满足您的需要，则可以设置用于项目之间线条的曲线类型。可用的曲线样式包括basis、bump、linear、monotoneX、monotoneY、natural、step、stepAfter和stepBefore。
在此示例中，从左到右的图形使用stepBefore曲线样式：
<span style="background-color:#f8f8f8"><span style="color:#34495e"><code>%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR</code></span></span>有关可用曲线的完整列表，包括自定义曲线的说明，请参阅d3-shape项目中的Shapes文档 。
样式化节点
可以对节点应用特定样式，例如较粗的边框或不同的背景颜色。
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">id1</span><span style="color:#aa8500">(Start)</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">id2</span><span style="color:#aa8500">(Stop)</span>
<span style="color:#649696">style</span> <span style="color:#a22889">id1</span> <span style="color:#a22889">fill</span><span style="color:#000000">:#</span><span style="color:#a22889">f9f</span><span style="color:#000000">,</span><span style="color:#a22889">stroke</span><span style="color:#000000">:#333,</span><span style="color:#a22889">stroke</span><span style="color:#000000">-</span><span style="color:#a22889">width</span><span style="color:#000000">:4</span><span style="color:#a22889">px</span>
<span style="color:#649696">style</span> <span style="color:#a22889">id2</span> <span style="color:#a22889">fill</span><span style="color:#000000">:#</span><span style="color:#a22889">bbf</span><span style="color:#000000">,</span><span style="color:#a22889">stroke</span><span style="color:#000000">:#</span><span style="color:#a22889">f66</span><span style="color:#000000">,</span><span style="color:#a22889">stroke</span><span style="color:#000000">-</span><span style="color:#a22889">width</span><span style="color:#000000">:2</span><span style="color:#a22889">px</span><span style="color:#000000">,</span><span style="color:#a22889">color</span><span style="color:#000000">:#</span><span style="color:#a22889">fff</span><span style="color:#000000">,</span><span style="color:#a22889">stroke</span><span style="color:#000000">-</span><span style="color:#a22889">dasharray</span><span style="color:#000000">: 5 5</span>
</span></span>
Start
Stop
比每次都定义样式更方便的是定义一个样式类，并将该类附加到应该具有不同外观的节点上。
类定义如下例所示：
<span style="background-color:#f8f8f8"><span style="color:#34495e"><code> classDef className fill:#f9f,stroke:#333,stroke-width:4px;</code></span></span>将类附加到节点按以下方式完成：
<span style="background-color:#f8f8f8"><span style="color:#34495e"><code> class nodeId1 className;</code></span></span>也可以在一个语句中将一个类附加到节点列表：
<span style="background-color:#f8f8f8"><span style="color:#34495e"><code> class nodeId1,nodeId2 className;</code></span></span>添加类的更短形式是使用运算符将类名附加到节点:::，如下所示：
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span><span style="color:#008800"><strong>:::</strong></span><span style="color:#a22889">someclass</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">B</span>
<span style="color:#649696">classDef</span> <span style="color:#a22889">someclass</span> <span style="color:#a22889">fill</span><span style="color:#000000">:#</span><span style="color:#a22889">f96</span><span style="color:#000000"><strong>;</strong></span>
</span></span>
A
B
CSS类
也可以在 css 样式中预定义可以从图形定义中应用的类，如下例所示：
示例样式
<span style="background-color:#f8f8f8"><span style="color:#34495e"><code><span style="color:#2973b7"><span style="color:#2973b7"><span style="color:#525252"><</span>style</span><span style="color:#525252">></span></span>
<span style="color:#6679cc">.cssClass > rect</span><span style="color:#525252">{</span>
<span style="color:#c08b30">fill</span><span style="color:#525252">:</span>#FF0000<span style="color:#525252">;</span>
<span style="color:#c08b30">stroke</span><span style="color:#525252">:</span>#FFFF00<span style="color:#525252">;</span>
<span style="color:#c08b30">stroke-width</span><span style="color:#525252">:</span>4px<span style="color:#525252">;</span>
<span style="color:#525252">}</span>
<span style="color:#2973b7"><span style="color:#2973b7"><span style="color:#525252"></</span>style</span><span style="color:#525252">></span></span></code></span></span>示例定义
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span><span style="color:#000000"><strong>;</strong></span>
<span style="color:#a22889">A</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">B</span><span style="color:#aa8500">[AAA<span>BBB</span>]</span>
<span style="color:#a22889">B</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">D</span>
<span style="color:#649696">class</span> <span style="color:#a22889">A</span> <span style="color:#a22889">cssClass</span>
</span></span>
A
AAABBB
D
默认类
如果一个类被命名为 default ，它将被分配给所有没有特定类定义的类。
<span style="background-color:#f8f8f8"><span style="color:#34495e"><code> classDef default fill:#f9f,stroke:#333,stroke-width:4px;</code></span></span>对 fontawesome 的基本支持
可以从 fontawesome 添加图标。
图标通过语法 fa:#icon class name# 访问。
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">TD</span>
<span style="color:#a22889">B</span><span style="color:#aa8500">["fab:fa-twitter for peace"]</span>
<span style="color:#a22889">B</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">C</span><span style="color:#aa8500">[fa:fa-ban forbidden]</span>
<span style="color:#a22889">B</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">D</span><span style="color:#aa8500">(fa:fa-spinner)</span><span style="color:#000000"><strong>;</strong></span>
<span style="color:#a22889">B</span><span style="color:#008800"><strong>--></strong></span><span style="color:#a22889">E</span><span style="color:#aa8500">(A fa:fa-camera-retro perhaps?)</span>
</span></span>
for peace
forbidden
A perhaps?
Code Chart 现在仅与 Font Awesome 版本 4、5 和 6 兼容。检查您使用的 Font Awesome 版本是否正确。
顶点和链接之间有空格且不带分号的图形声明
-
在图形声明中，语句现在也可以不用分号结束。在 0.2.16 版本之后，以分号结束图形语句只是可选的。因此，下面的图形声明与图形的旧声明一起也是有效的。
-
顶点和链接之间允许有一个空格。但是，顶点及其文本与链接及其文本之间不应有任何空格。图形声明的旧语法也可以使用，因此这个新特性是可选的，并被引入以提高可读性。
下面是图边的新声明，它与图边的旧声明一样有效。
<span style="background-color:#f8f8f8"><span style="color:#34495e"><span style="color:#9650c8"><strong>flowchart</strong></span> <span style="color:#649696">LR</span>
<span style="color:#a22889">A</span><span style="color:#aa8500">[Hard edge]</span> <span style="color:#008800"><strong>--></strong></span><span style="color:#aa8500">|Link text|</span> <span style="color:#a22889">B</span><span style="color:#aa8500">(Round edge)</span>
<span style="color:#a22889">B</span> <span style="color:#008800"><strong>--></strong></span> <span style="color:#a22889">C</span><span style="color:#aa8500">{Decision}</span>
<span style="color:#a22889">C</span> <span style="color:#008800"><strong>--></strong></span><span style="color:#aa8500">|One|</span> <span style="color:#a22889">D</span><span style="color:#aa8500">[Result one]</span>
<span style="color:#a22889">C</span> <span style="color:#008800"><strong>--></strong></span><span style="color:#aa8500">|Two|</span> <span style="color:#a22889">E</span><span style="color:#aa8500">[Result two]</span>
</span></span>
扫一扫
5887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
