流程图 - 基本语法

流程图由**节点**（几何形状）和**边**（箭头或线）组成。Mermaid 代码定义了节点和边是如何创建的，并适应了不同的箭头类型，多方向箭头以及任何到子图和来自子图的链接。

警告

如果您在流程图节点中使用单词“end”，请将整个单词或任何字母大写（例如，“End”或“END”），或应用此解决方法。完全小写“end”将破坏流程图。

警告

如果您使用字母“o”或“x”作为连接流程图节点的第一个字母，请在字母前添加空格或将字母大写（例如，“dev--- ops”，“dev---Ops”）。

键入“A---oB”将创建一个圆形边。

键入“A---xB”将创建一个交叉边。

节点（默认）

信息

id 是在框中显示的内容。

提示

除了 flowchart 之外，还可以使用 graph。

带有文本的节点

还可以设置框中的文本，使其与 id 不同。如果这样做多次，则找到的最后一个节点文本将被使用。另外，如果稍后为节点定义边，则可以省略文本定义。以前定义的文本将在渲染框时使用。

Unicode 文本

使用 " 括起 Unicode 文本。

Markdown 格式

使用双引号和反引号“` text `" 括起 Markdown 文本。

方向

此语句声明流程图的方向。

这声明流程图的方向是从上到下（TD 或 TB）。

这声明流程图的方向是从左到右（LR）。

可能的流程图方向为

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

节点形状

带有圆角的节点

体育场形状的节点

子程序形状的节点

圆柱形节点

圆形节点

非对称形状的节点

目前只有上面的形状是可能的，而不是它的镜像。这可能会在未来的版本中发生变化。

节点（菱形）

六边形节点

平行四边形

平行四边形 alt

梯形

梯形 alt

双圆

Mermaid 流程图中的扩展节点形状 (v11.3.0+)

Mermaid 引入了 30 种新形状，以增强流程图创建的灵活性、精确性。这些新形状提供了更多选项来表示流程、决策、事件、数据存储的视觉效果，以及流程图中的其他元素，从而提高清晰度和语义意义。

形状定义的新语法

Mermaid 现在支持定义形状类型的通用语法，以适应不断增加的形状数量。此语法允许您使用清晰灵活的格式将特定形状分配给节点

A@{ shape: rect }

此语法创建一个名为 A 的矩形节点。它的渲染方式与 A["A"] 或 A 相同。

新形状的完整列表

以下是新引入的形状及其对应的语义含义、简短名称和别名的综合列表

语义名称	形状名称	简短名称	描述	支持的别名
卡片	带缺口的矩形	notch-rect	表示一张卡片	card, notched-rectangle
整理	沙漏	hourglass	表示整理操作	collate, hourglass
通讯链接	闪电	bolt	通信链接	com-link, lightning-bolt
注释	大括号	brace	添加注释	brace-l, comment
注释右侧	大括号	brace-r	添加注释
带有两边大括号的注释	大括号	braces	添加注释
数据输入/输出	向右倾斜	lean-r	表示输入或输出	in-out, lean-right
数据输入/输出	向左倾斜	lean-l	表示输出或输入	lean-left, out-in
数据库	圆柱体	cyl	数据库存储	cylinder, database, db
决策	菱形	diam	决策步骤	decision, diamond, question
延迟	半圆矩形	delay	表示延迟	half-rounded-rectangle
直接存取存储	水平圆柱体	h-cyl	直接存取存储	das, horizontal-cylinder
磁盘存储	带线的圆柱体	lin-cyl	磁盘存储	disk, lined-cylinder
显示	弯曲梯形	curv-trap	表示显示	curved-trapezoid, display
分段流程	分段矩形	div-rect	分段流程形状	div-proc, divided-process, divided-rectangle
文档	文档	doc	表示文档	doc, document
事件	圆角矩形	rounded	表示事件	event
提取	三角形	tri	提取过程	extract, triangle
分支/合并	填充矩形	fork	流程中的分支或合并	join
内部存储	窗格	win-pane	内部存储	internal-storage, window-pane
连接点	填充圆圈	f-circ	连接点	filled-circle, junction
带线的文档	带线的文档	lin-doc	带线的文档	lined-document
带线/阴影的流程	带线的矩形	lin-rect	带线的流程形状	lin-proc, lined-process, lined-rectangle, shaded-process
循环限制	梯形五边形	notch-pent	循环限制步骤	loop-limit, notched-pentagon
手动文件	翻转三角形	flip-tri	手动文件操作	flipped-triangle, manual-file
手动输入	斜坡矩形	sl-rect	手动输入步骤	manual-input, sloped-rectangle
手动操作	梯形底端向上	trap-t	表示手动任务	inv-trapezoid, manual, trapezoid-top
多文档	堆叠文档	docs	多个文档	documents, st-doc, stacked-document
多流程	堆叠矩形	st-rect	多个流程	processes, procs, stacked-rectangle
奇数	奇数	odd	奇数形状
纸带	旗帜	flag	纸带	纸带
准备条件	六边形	六边形	准备或条件步骤	hexagon, prepare
优先行动	梯形底	梯形底	优先行动	priority, trapezoid, trapezoid-bottom
流程	矩形	矩形	标准流程形状	proc, process, rectangle
开始	圆形	圆形	起点	圆形
开始	小圆形	小圆形	小起点	small-circle, start
停止	双圆形	双圆形	代表停止点	双圆形
停止	带框圆形	带框圆形	停止点	framed-circle, stop
存储数据	领结矩形	领结矩形	存储数据	bow-tie-rectangle, stored-data
子流程	带框矩形	带框矩形	子流程	framed-rectangle, subproc, subprocess, subroutine
摘要	带叉圆形	带叉圆形	摘要	crossed-circle, summary
带标签的文档	带标签的文档	带标签的文档	带标签的文档	tag-doc, tagged-document
带标签的流程	带标签的矩形	带标签的矩形	带标签的流程	tag-proc, tagged-process, tagged-rectangle
终止点	体育场	体育场	终止点	pill, terminal
文本块	文本块	文本	文本块

带有新形状的示例流程图

这是一个使用了一些新引入形状的示例流程图

流程

事件

终止点 (体育场)

子流程

数据库 (圆柱体)

开始 (圆形)

奇数

决策 (菱形)

准备条件 (六边形)

数据输入/输出 (右倾)

数据输入/输出 (左倾)

优先行动 (梯形底)

手动操作 (梯形顶)

停止 (双圆形)

文本块

卡片 (带缺口矩形)

带线/阴影的流程

开始 (小圆形)

停止 (带框圆形)

分叉/合并 (长矩形)

整理 (沙漏)

注释 (花括号)

右侧注释 (右侧花括号)

带两侧花括号的注释

通信链接 (闪电)

文档

延迟 (半圆形矩形)

直接存取存储 (水平圆柱体)

磁盘存储 (带线圆柱体)

显示 (曲线梯形)

分隔流程 (分隔矩形)

提取 (小三角形)

内部存储 (窗格)

连接点 (实心圆形)

带线文档

循环限制 (带缺口五边形)

手动文件 (翻转三角形)

手动输入 (斜坡矩形)

多文档 (堆叠文档)

多流程 (堆叠矩形)

纸带 (旗帜)

存储数据 (领结矩形)

摘要 (带叉圆形)

带标签的文档

带标签的流程 (带标签矩形)

Mermaid 流程图中的特殊形状 (v11.3.0+)

Mermaid 还引入了 2 种特殊形状来增强您的流程图：图标 和 图像。这些形状允许您直接在流程图中包含图标和图像，提供更多视觉上下文和清晰度。

图标形状

您可以使用 icon 形状在流程图中包含图标。要使用图标，您需要先注册图标包。请按照 此处 提供的说明进行操作。定义图标形状的语法如下：

参数

• icon：注册图标包中的图标名称。
• form：指定图标的背景形状。如果未定义，则图标将没有背景。选项包括：
  • 正方形
  • 圆形
  • rounded
• label：与图标关联的文本标签。这可以是任何字符串。如果未定义，将不会显示标签。
• pos：标签的位置。如果未定义，标签将默认为图标底部。可能的取值是：
  • 顶部
  • 底部
• h：图标的高度。如果未定义，则默认为 48，这是最小值。

图像形状

您可以使用 image 形状在流程图中包含图像。定义图像形状的语法如下：

参数

• img：要显示的图像的 URL。
• label：与图像关联的文本标签。这可以是任何字符串。如果未定义，将不会显示标签。
• pos：标签的位置。如果未定义，标签将默认为图像底部。可能的取值是：
  • 顶部
  • 底部
• w：图像的宽度。如果未定义，则默认为图像的自然宽度。
• h：图像的高度。如果未定义，则默认为图像的自然高度。
• constraint：确定图像是否应该限制节点大小。此设置还确保图像保持其原始纵横比，根据宽度 (w) 调整高度 (h)。如果未定义，则默认为 off。可能的取值是：
  • 打开
  • 关闭

这些新形状为您的流程图提供了额外的灵活性和视觉吸引力，使它们更具信息性和参与性。

节点之间的链接

节点可以用链接/边连接。可以有不同类型的链接，或者将文本字符串附加到链接。

带箭头头的链接

开放链接

链接上的文本

或者

带箭头头和文本的链接

或者

点线链接

带文本的点线链接

粗线链接

带文本的粗线链接

不可见链接

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

链接的链接

可以在同一行中声明多个链接，如下所示：

也可以在同一行中声明多个节点链接，如下所示：

然后，您可以用非常有表现力的方式描述依赖关系。比如以下单行代码：

如果您使用基本语法描述相同的图表，则需要四行。提醒一下，如果过分使用这种方式，可能会使流程图在 Markdown 形式下更难阅读。瑞典语 lagom 一词就体现了这一点。它的意思是，不多不少。这对有表现力的语法也是一样的。

新的箭头类型

支持新的箭头类型：

• 圆形边
• 交叉边

圆形边示例

交叉边示例

多方向箭头

可以使用多方向箭头。

链接的最小长度

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

在以下示例中，在从节点B到节点E的链接中添加了两个额外的破折号，因此它跨越了比常规链接多两个秩。

注意 链接可能仍然会被渲染引擎设置为比请求的秩数量更长，以适应其他请求。

当链接标签写在链接中间时，额外的破折号必须添加到链接的右侧。以下示例等效于前面的示例

对于虚线或粗线链接，要添加的字符是等号或点，如以下表格中总结的

长度	1	2	3
普通	---	----	-----
带箭头的普通	-->	--->	---->
粗体	===	====	=====
带箭头的粗体	==>	===>	====>
点线	-.-	-..-	-...-
带箭头的点线	-.->	-..->	-...->

破坏语法的特殊字符

为了渲染更多有问题的字符，可以将文本放在引号内。如以下示例所示

转义字符的实体代码

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

给出的数字是十进制的，因此#可以编码为#35;。也可以使用 HTML 字符名称。

子图

subgraph title
    graph definition
end

以下是一个示例

您还可以为子图设置一个显式 ID。

流程图

使用 graphtype 流程图，还可以像下面的流程图一样设置子图的边

子图中的方向

使用 graphtype 流程图，您可以使用方向语句来设置子图渲染的方向，如以下示例所示。

限制

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

Markdown 字符串

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

格式

• 对于粗体文本，在文本前后使用双星号 (**)。
• 对于斜体文本，在文本前后使用单星号 (*)。
• 对于传统的字符串，您需要添加<br>标签才能使文本在节点中换行。但是，markdown 字符串在文本过长时会自动换行，并允许您通过简单地使用换行符（而不是<br>标签）来开始新的一行。

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

可以使用以下方法禁用自动换行

---
config:
  markdownAutoWrap: false
---
graph LR

互动

可以将单击事件绑定到节点，单击可以导致 javascript 回调或将在新浏览器标签中打开的链接。

信息

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

click nodeId callback
click nodeId call callback()

• nodeId 是节点的 ID
• callback 是在显示图形的页面上定义的 javascript 函数的名称，该函数将使用 nodeId 作为参数调用。

以下是如何使用工具提示的示例

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

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

成功 工具提示功能和链接到 url 的功能从 0.5.2 版本开始可用。

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

默认情况下，链接将在同一个浏览器标签/窗口中打开。可以通过在单击定义中添加链接目标来更改此行为 (_self, _blank, _parent 和 _top 受支持)

初学者提示 - 在 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>
    window.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>

注释

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

样式和类

样式链接

可以设置链接的样式。例如，您可能想要设置一个在流程中向后链接的样式。由于链接不像节点那样有 ID，因此需要其他方法来决定应该将什么样式附加到链接上。代替 ID，使用链接在图中定义时的顺序号，或者使用 default 将样式应用于所有链接。在以下示例中，linkStyle 语句中定义的样式将属于图中的第四个链接

linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;

也可以通过用逗号分隔链接号在一个语句中为多个链接添加样式

linkStyle 1,2,7 color:blue;

设置线曲线样式

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

在本例中，一个从左到右的图表使用了stepBefore曲线样式

%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR

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

设置节点样式

可以将特定样式（如更粗的边框或不同的背景颜色）应用于节点。

类

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

类定义类似于以下示例

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

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

    classDef firstClassName,secondClassName font-size:12pt;

将类附加到节点的方式如下所示

    class nodeId1 className;

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

    class nodeId1,nodeId2 className;

添加类的简短形式是使用:::运算符将类名附加到节点，如下所示

此形式可以在声明节点之间多个链接时使用

CSS 类

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

示例样式

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

示例定义

默认类

如果一个类名为 default，它将被分配给所有没有特定类定义的类。

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

对 fontawesome 的基本支持

可以添加来自 fontawesome 的图标。

可以通过语法 fa:#icon 类名# 访问图标。

如果网站上包含了 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"
/>

自定义图标

只要网站导入了相应的工具包，就可以使用从 Font Awesome 提供的自定义图标。

请注意，目前这是 Font Awesome 的付费功能。

对于自定义图标，您需要使用fak前缀。

示例

flowchart TD
    B[fa:fa-twitter] %% standard icon
    B-->E(fak:fa-custom-icon-name) %% custom icon

尝试渲染它

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

• 在图声明中，语句现在也可以不以分号结尾。在 0.2.16 版本发布后，用分号结束图语句只是可选的。因此，以下图声明也与图的旧声明一起有效。

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

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

配置

渲染器

图表的布局由渲染器完成。默认渲染器是 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%
}