流程图 - 基础语法

官方文档：https://mermaid.js.org/syntax/flowchart.html

流程图简介

流程图由节点（几何形状）和边（箭头或线条）组成。Mermaid 代码定义了如何创建节点和边，并支持不同的箭头类型、多方向箭头以及与子图的连接。

警告：

  • 如果在流程图节点中使用单词 “end”，请将整个单词或其中任何一个字母大写（例如，“End” 或 “END”），或者应用此解决方法。全小写输入 “end” 会导致流程图无法渲染。
  • 如果在连接流程图节点时使用字母 “o” 或 “x” 作为第一个字母，请在字母前添加空格或将字母大写（例如，“dev— ops”, “dev—Ops”）。输入 “A—oB” 会创建一个圆形边缘，输入 “A—xB” 会创建一个交叉边缘。

节点

默认节点

id

注意： 框中显示的是节点的 id。

提示： 除了 graph 关键字，还可以使用 flowchart 关键字。

带文本的节点

This is the text in the box

可以在节点中设置与 id 不同的文本。如果多次定义节点文本，将使用最后一次定义的文本。此外，如果稍后为节点定义边，则可以省略文本定义，渲染时将使用之前定义的文本。

Unicode 文本

这是 (text) in the box

使用双引号 " 来包裹包含 Unicode 字符的文本。

Markdown 格式化
A double quote:"
A dec char:♥

使用双引号和反引号 "` text `" 来包裹 Markdown 文本。

流程图方向
Start
Stop

此语句声明了流程图的方向。TD 或 TB 表示流程图从上到下方向，LR 表示流程图从左到右方向。

可能的流程图方向有：

  • TB - 从上到下
  • TD - 从上到下/与从上到下相同
  • BT - 从下到上
  • RL - 从右到左
  • LR - 从左到右

节点形状

圆角矩形节点

This is the text in the box

体育场形节点

This is the text in the box

子程序形节点

This is the text in the box

圆柱形节点

Database

圆形节点

This is the text in the circle

不对称节点

This is the text in the box

目前仅支持此形状，而不支持其镜像形状。未来版本可能会有变化。

菱形节点

This is the text in the box

六边形节点

This is the text in the box

平行四边形节点

This is the text in the box

另一种平行四边形节点

This is the text in the box

梯形节点

Christmas

另一种梯形节点

Go shopping

双圆节点

graph TD
    id1(((This is the text in the circle)))

节点之间的连接

节点之间可以用链接/边来连接。可以在链接上设置不同类型或附加文本字符串。

带箭头的链接
A
B

开放式链接
A
B

带文本的链接

This is the text!
A
B

或者

This is the text
A
B

带箭头和文本的链接

text
A
B

或者

text
A
B

虚线链接
A
B

带文本的虚线链接

text
A
B

粗链接
A
B

带文本的粗链接

text
A
B

隐藏链接

graph LR
   A ~~~ B

这在某些情况下可能是一个有用的工具，你想更改节点的默认位置。

链接的链式

可以在同一行中声明多个链接：

text
text2
A
B
C

也可以在同一行中声明多个节点链接：
a
b
c
d

然后，你可以用一种非常富有表现力的方式来描述依赖关系，就像下面这个单行代码：
A
B
C
D

如果使用基本语法来描述同样的图表，则需要四行代码。需要注意的是，过度使用这种方式可能会使流程图在 Markdown 中更难阅读。瑞典语中有一个词 lagom，意思是不多不少，刚刚好。这也适用于表现力强的语法。

新型箭头类型

支持以下新型箭头：

  • 圆形边缘：---o
  • 交叉边缘：---x

圆形边缘示例
A
B

交叉边缘示例
A
B

多向箭头

可以使用多向箭头。
A
B
C
D

链接的最小长度

流程图中的每个节点最终都会被分配到渲染图中的一个等级，即垂直或水平级别（取决于流程图方向），这取决于它所链接的节点。默认情况下，链接可以跨越任意数量的等级，但你可以通过在链接定义中添加额外的破折号来要求任何链接比其他链接更长。

在以下示例中，从节点 B 到节点 E 的链接中添加了两个额外的破折号，因此它跨越的等级比普通链接多两个：
Yes
No
Start
Is it?
OK
Rethink
End

注意： 为了适应其他请求，渲染引擎可能仍然会使链接比请求的等级数更长。

当链接标签写在链接中间时，额外的破折号必须添加在链接的右侧。以下示例等同于前一个示例：
Yes
No
Start
Is it?
OK
Rethink
End

对于虚线或粗体链接，要添加的字符是等号或点，如下表所示：

Length123
Normal—---------
Normal with arrow–>—>---->
Thick============
Thick with arrow==>===>====>
Dotted-.--…--…-
Dotted with arrow-.->-…->-…->

语法中断的特殊字符

可以使用引号将文本括起来，以呈现更多有问题的字符。如下例所示：

This is the (text) in the box

转义字符的实体代码

可以使用此处示例中的语法来转义字符。

给定的数字是以 10 为基数的，因此 # 可以编码为 #35;。还支持使用 HTML 字符名称。
A double quote:"
A dec char:♥

子图

使用以下语法添加子图：

subgraph title
    graph definition
end

示例如下：

three
two
one
c2
c1
b2
b1
a2
a1

你还可以为子图设置显式 id。

one
a2
a1
c1

对于流程图

使用 flowchart 图类型，还可以为子图设置边，连接到子图外部，如下图所示：

three
one
c2
c1
two
b2
b1
a2
a1

子图中的方向

使用 flowcharts 图类型，可以使用方向语句设置子图的渲染方向，如本例所示：
TOP
B1
f1
i1
B2
f2
i2
A
B

限制

如果子图的任何节点与外部链接，子图方向将被忽略。相反，子图将继承父图的方向：

TOP
B1
B2
f2
i2
f1
i1
A
B

Markdown 字符串

"Markdown 字符串"功能通过提供一个更通用的字符串类型来增强流程图和思维导图，该类型支持粗体和斜体等文本格式选项，并自动换行标签内的文本。

格式：

  • 对于粗体文本，在文本前后使用双星号 (**)。
  • 对于斜体，在文本前后使用单星号 (*)。

使用传统字符串时，需要添加 <br> 标签才能在节点中换行。但是，Markdown 字符串会在文本过长时自动换行，只需使用换行符而不是 <br> 标签即可开始新行。

此功能适用于节点标签、边标签和子图标签。

交互

可以将单击事件绑定到节点，单击可以导致 JavaScript 回调或打开新的浏览器选项卡中的链接。

click nodeId callback
click nodeId call callback()
  • nodeId 是节点的 id
  • callback 是在显示图形的页面上定义的 JavaScript 函数的名称，该函数将使用 nodeId 作为参数调用。

注意： 使用 securityLevel='strict' 时，此功能被禁用，使用 securityLevel='loose' 时，此功能被启用。

下面是工具提示用法的示例：

<script>
  const callback = function () {
    alert('A callback was triggered');
  };
</script>

工具提示文本用双引号括起来。工具提示的样式由 .mermaidTooltip 类设置。

成功：工具提示功能和链接到 URL 的功能从 0.5.2 版开始提供。

由于 Docsify 处理 JavaScript 回调函数的限制，可以在此 jsfiddle 中查看上述代码的替代工作演示。

默认情况下，链接在同一浏览器标签/窗口中打开。可以通过在单击定义中添加链接目标来更改此行为（支持 _self、_blank、_parent 和 _top）：
A
B
C
D
E

以下是在 HTML 上下文中使用交互式链接的完整示例：

<body>
  <pre class="mermaid">
    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"
  </pre>

  <script>
    const callback = function () {
      alert('A callback was triggered');
    };
    const config = {
      startOnLoad: true,
      flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

注释

可以在流程图中输入注释，解析器将忽略这些注释。注释需要自成一行，并以 %% (双百分号) 开头。从注释开始到下一个换行符之间的任何文本都将被视为注释，包括任何流程图语法。

text
text2
A
B
C

样式和类

设置链接样式

可以设置链接的样式。例如，你可能希望根据流程图中的流向来设置链接样式。由于链接没有像节点一样的 id，因此需要其他方法来决定应该将哪些样式附加到链接上。可以使用链接在图中定义时的顺序号，或使用 default 将样式应用于所有链接。在下面的示例中，linkStyle 语句中定义的样式将属于图中的第四个链接：
A
B
C
D
E

也可以在一条语句中为多个链接添加样式，方法是用逗号分隔链接编号：

graph LR
    A-->B
    B-->C
    C-->D
    D-->E
    linkStyle 1,2,7 color:blue;

设置线条曲线样式

如果默认方法不能满足你的需求，可以设置项目之间线条的曲线类型。可用的曲线样式包括 basis、bumpX、bumpY、cardinal、catmullRom、linear、monotoneX、monotoneY、natural、step、stepAfter 和 stepBefore。

在本例中，从左到右的图使用 stepBefore 曲线样式：

有关可用曲线的完整列表，包括自定义曲线的说明，请参阅 d3-shape 项目中的形状文档。

设置节点样式

可以为节点应用特定的样式，例如更粗的边框或不同的背景颜色。

类

比每次都定义样式更方便的是定义一组样式并将此类附加到具有不同外观的节点。

类定义如下例所示：

classDef className fill:#f9f,stroke:#333,stroke-width:4px;

此外，还可以在一条语句中为多个类定义样式：

classDef firstClassName,secondClassName font-size:12pt;

可以按如下方式将类附加到节点：

class nodeId1 className;

也可以在一条语句中将一个类附加到节点列表：

class nodeId1,nodeId2 className;

添加类的一种更短的形式是使用 ::: 运算符将类名附加到节点：
A
B

此表单可在声明节点之间的多个链接时使用：
A
B
C
D

CSS 类

也可以在 CSS 样式中预定义类，这些类可以从图定义中应用，如下例所示：

示例样式：

<style>
  .cssClass > rect {
    fill: #ff0000;
    stroke: #ffff00;
    stroke-width: 4px;
  }
</style>

示例定义：
A
AAA BBB
D

默认类

如果将类命名为 default，它将被分配给所有没有特定类定义的类。
A
B
C
D
E

对 Fontawesome 的基本支持

可以从 Fontawesome 添加图标。

可以通过语法 fa:#icon class name# 访问图标。

如果网站包含 CSS，Mermaid 支持 Font Awesome。Mermaid 对可以使用的 Font Awesome 版本没有任何限制。

请参考官方 Font Awesome 文档了解如何在你的网站中包含它。

将此代码片段添加到 <head> 中将添加对 Font Awesome v6.5.1 的支持：

<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
  rel="stylesheet"
/>
for peace
forbidden
A perhaps?

顶点和链接之间有空格且没有分号的图声明

在图声明中，语句现在也可以在没有分号的情况下结束。在 0.2.16 版之后，以分号结束图语句只是可选的。因此，下面的图声明也是有效的，与旧的图声明一起使用。

顶点和链接之间允许有一个空格。但是，顶点及其文本之间以及链接及其文本之间不应有任何空格。图边缘声明的旧语法仍然有效，因此这个新功能是可选的，引入它是为了提高可读性。

下面是图边缘的新声明，它与图边缘的旧声明一起有效。

Link text
One
Two
Hard edge
Round edge
Decision
Result one
Result two

配置

渲染器

图的布局由渲染器完成。默认的渲染器是 dagre。

从 Mermaid 9.4 版开始，你可以使用一个名为 elk 的替代渲染器。elk 渲染器更适合较大和/或更复杂的图。

elk 渲染器是一个实验性功能。你可以通过添加如下指令将渲染器更改为 elk：

%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%

注意： 网站需要使用 mermaid 9.4+ 版本才能使其工作，并在延迟加载配置中启用此功能。

宽度

可以调整渲染流程图的宽度。

这可以通过定义 mermaid.flowchartConfig 或通过 CLI 使用包含配置的 JSON 文件来完成。如何使用 CLI 在 mermaidCLI 页面中进行了描述。mermaid.flowchartConfig 可以设置为包含配置参数的 JSON 字符串或相应的对象。

mermaid.flowchartConfig = {
    width: 100%
}
# 流程图 # 网络 # 服务器
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

avatar 开放原子开发者工作坊

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

avatar 开放原子开发者工作坊

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

avatar 开放原子开发者工作坊