流程图 - 基本语法 ​

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

一个节点（默认） ​

带有文本的节点 ​

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

Unicode 文本 ​

使用 " 来包围 Unicode 文本。

Markdown 格式化 ​

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

方向 ​

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

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

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

可能的流程图方向有：

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

节点形状 ​

一个带有圆角的节点 ​

一个体育场形状的节点 ​

子程序形状中的节点 ​

圆柱形状的节点 ​

一个以圆形形式表示的节点 ​

非对称形状中的节点 ​

目前只能实现上述形状，而不能实现其镜像。这可能会在未来的版本中有所改变。

一个节点（菱形） ​

一个六边形节点 ​

平行四边形 ​

平行四边形替代 ​

梯形 ​

梯形替代方案 ​

双圆 ​

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

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

形状定义的新语法

Mermaid 现在支持一种通用的语法来定义形状类型，以适应不断增长的形状数量。这种语法允许您使用清晰灵活的格式为节点分配特定的形状：

A@{ shape: rect }

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

新形状的完整列表 ​

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

新形状的流程图示例 ​

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

流程 ​

事件 ​

终点（体育场） ​

子进程 ​

数据库 (Cylinder) ​

开始（圆形） ​

奇数 ​

决策（菱形） ​

准备条件（六边形） ​

数据输入/输出（Lean Right） ​

数据输入/输出（左倾） ​

优先行动（梯形底部基础） ​

手动操作（梯形底座顶部） ​

停止（双圈） ​

文本块 ​

卡片（缺口矩形） ​

线条/阴影处理 ​

开始（小圆圈） ​

停止（带框圆圈） ​

Fork/Join (长矩形) ​

整理（沙漏） ​

注释（花括号） ​

注释右（大括号右） ​

两侧带有大括号的注释 ​

通信链接（闪电符号） ​

文档 ​

延迟（半圆角矩形） ​

直接访问存储（水平圆柱体） ​

磁盘存储（衬里圆柱体） ​

显示（曲线梯形） ​

分割过程（分割矩形） ​

提取（小三角形） ​

内部存储（窗口面板） ​

连接点（实心圆） ​

带线文档 ​

循环限制（缺口五边形） ​

手动文件（翻转三角形） ​

手动输入（斜矩形） ​

多文档（堆叠文档） ​

多进程（堆叠矩形） ​

纸带（标志） ​

存储的数据（蝴蝶结矩形） ​

摘要（带叉圆圈） ​

标记文档 ​

标记过程（标记矩形） ​

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

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

图标形状 ​

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

参数 ​

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

图像形状 ​

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

参数 ​

• img: 要显示的图像的URL。
• label: 与图像关联的文本标签。这可以是任何字符串。如果未定义，则不会显示任何标签。
• pos: 标签的位置。如果未定义，标签将默认显示在图像的底部。可能的值为：
  • t
  • b
• w: 图像的宽度。如果未定义，将默认为图像的自然宽度。
• h: 图像的高度。如果未定义，将默认为图像的自然高度。
• constraint: 确定图像是否应约束节点大小。此设置还确保图像保持其原始宽高比，根据宽度（w）相应调整高度（h）。如果未定义，则默认为off。可能的值为：
  • on
  • off

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

节点之间的链接 ​

节点可以通过链接/边连接。可以有不同类型的链接或在链接上附加文本字符串。

带箭头的链接 ​

一个开放的链接 ​

链接上的文本 ​

或

带有箭头和文本的链接 ​

或

虚线链接 ​

带文本的虚线链接 ​

粗链接 ​

带有文字的粗体链接 ​

一个不可见的链接 ​

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

链接的链式操作 ​

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

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

然后你可以用一种非常表达性的方式描述依赖关系。如下所示的一行代码：

如果你使用基本语法来描述相同的图表，它将需要四行。一个警告是，人们可能会过度使用这种方法，使得流程图在markdown形式下更难阅读。瑞典语单词lagom浮现在脑海中。它的意思是，既不太多也不太少。这也适用于表达性语法。

新箭头类型 ​

支持的新类型箭头有：

• 圆形边缘
• 交叉边

圆形边缘示例 ​

跨边示例 ​

多方向箭头 ​

有可能使用多向箭头。

链接的最小长度 ​

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

在以下示例中，从节点B到节点E的链接中添加了两个额外的破折号，使其比常规链接跨越更多的层级：

注意 渲染引擎可能会使链接的长度超过请求的排名数量，以适应其他请求。

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

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

破坏语法的特殊字符 ​

可以将文本放在引号内以渲染更棘手的字符。如下例所示：

用于转义字符的实体代码 ​

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

给定的数字是十进制的，所以#可以编码为#35;。也支持使用HTML字符名称。

子图 ​

subgraph title
    graph definition
end

以下是一个示例：

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

流程图 ​

使用流程图类型，也可以设置从子图到子图的边，如下面的流程图所示。

子图中的方向 ​

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

限制 ​

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

Markdown 字符串 ​

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

格式化：

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

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

可以通过使用禁用自动换行

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

交互 ​

可以将点击事件绑定到一个节点，点击可以触发一个JavaScript回调函数，或者在新浏览器标签页中打开一个链接。

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，而是使用链接在图中定义时的顺序号，或者使用默认值应用于所有链接。在下面的示例中，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:#图标类名# 访问。

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

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

将此代码片段添加到 中将添加对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.flowchartConfig或通过CLI使用包含配置的JSON文件来完成的。如何使用CLI在mermaidCLI页面中有描述。mermaid.flowchartConfig可以设置为带有配置参数的JSON字符串或相应的对象。

mermaid.flowchartConfig = {
    width: 100%
}