Mermaid 流程图语法参考四

2301_80966902

376人浏览 · 2026-05-24 18:50:21

2301_80966902 · 2026-05-24 18:50:21 发布

Mermaid 流程图语法参考四

子图（Subgraphs）

subgraph title
    graph definition
end

示例：

```mermaid
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
```

也可以为子图指定显式 ID：

```mermaid
flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end
```

子图中的边缘

使用 flowchart 类型时，可以设置子图间的边缘：

```mermaid
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
```

子图中的方向

可以在子图中使用 direction 语句设置子图的布局方向：

```mermaid
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
```

限制

若子图中的节点与外部有连接，子图方向将被忽略，转而继承父图方向：

```mermaid
flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    %% ^ 以上两个子图相同，区别在于与外部的连接方式：

    %% 链接"到" subgraph1：子图方向保持不变
    outside --> subgraph1
    %% 链接"到" subgraph2 内部的节点：
    %% subgraph2 将继承顶层图的方向 (LR)
    outside ---> top2
```

Markdown 字符串

"Markdown Strings"功能通过支持粗体、斜体等格式以及自动文本换行来增强流程图和思维导图的可读性。

```mermaid
%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
subgraph "One"
  a("`The **cat**
  in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
  c("`The **cat**
  in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
```

格式规则：

粗体：在文本前后使用双星号 **
斜体：在文本前后使用单星号 *
传统字符串需要 <br> 标签换行；Markdown 字符串支持自动换行，也可直接使用换行符

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

禁用自动换行：

---
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 类控制。

```mermaid
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 C call callback() "Tooltip for a callback"
    click D href "https://www.github.com" "This is a tooltip for a link"
```

✅ 成功 工具提示和链接功能自 v0.5.2 起可用。

链接默认在同一标签页打开，可通过添加目标参数修改（支持 _self、_blank、_parent、_top）：

```mermaid
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
```

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,
      htmlLabels: true,
      flowchart: { useMaxWidth: true, curve: 'cardinal' },
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

注释

注释需单独成行，以 %% 开头，直到行尾的所有内容都会被忽略：

```mermaid
flowchart LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C
```

样式与类

链接样式

链接没有 id，通过定义顺序号来指定样式。以下示例将样式应用到第 4 条链接（索引从 0 开始）：

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。

完整曲线列表参见 d3-shape 文档。

图表级曲线样式

---
config:
  flowchart:
    curve: stepBefore
---
graph LR

边缘级曲线样式（v11.10.0+）

为边缘分配 ID 后，可以修改其 curve 属性：

```mermaid
flowchart LR
  A e1@--> B
  e1@{ curve: natural }
```

注意： 边缘级曲线样式会覆盖图表级样式；同一边缘多次修改时以最后一次为准。

节点样式

可为单个节点设置特定样式（如更粗的边框或不同的背景色）：

```mermaid
flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```

类（Class）

定义样式类并附加到节点，比逐节点定义更方便：

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

一次定义多个类：

classDef firstClassName,secondClassName font-size:12pt;

将类附加到节点：

class nodeId1 className;

同时附加到多个节点：

class nodeId1,nodeId2 className;

使用 ::: 操作符的简写形式：

```mermaid
flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96
```

多节点链接中也可使用此语法：

```mermaid
flowchart LR
    A:::foo & B:::bar --> C:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    classDef foobar stroke:#00f
```

CSS 类

⚠️ 注意： 通过外部 CSS 对 Mermaid 节点应用样式（如 .cssClass > rect { fill: ... }）不可靠。Mermaid 内部样式使用 !important 并按 SVG 元素 ID 限定作用域，优先级高于外部 CSS，外部 CSS 会被静默覆盖。

推荐使用 classDef 语法（见上方"类"章节），这是官方支持的样式方式。

若必须使用外部 CSS，所有属性都需要 !important——但不推荐此做法。

推荐方式——使用 classDef：

```mermaid
flowchart LR
    A:::myclass --> B
    classDef myclass fill:#ff0000,stroke:#ffff00,stroke-width:4px
```

默认类

命名为 default 的类将自动应用到所有未指定类的节点：

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

Font Awesome 图标支持

注册 FontAwesome 图标包（v11.7.0+）

按照注册图标包说明注册自定义图标包。

支持的前缀：fa、fab、fas、far、fal、fad。

ℹ️ 说明：若未注册图标包，将自动回退到 FontAwesome CSS 方式。

注册 FontAwesome CSS

Mermaid 支持通过 CSS 引入 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"
/>

图标通过 fa:#icon class name# 语法访问：

```mermaid
flowchart TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner)
    B-->E(A fa:fa-camera-retro perhaps?)
```

自定义图标

可使用 Font Awesome 提供的自定义图标（网站需导入对应 kit，此为 Font Awesome 付费功能）。自定义图标使用 fak 前缀：

```mermaid
flowchart TD
    B["fa:fa-twitter for peace"]
    B-->C["fab:fa-truck-bold a custom icon"]
```

不带分号的图声明

v0.2.16 起，语句末尾的分号为可选项。顶点与链接之间允许有一个空格，但顶点与其文本之间、链接与其文本之间不得有空格：

```mermaid
flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```

配置

渲染器（Renderer）

默认渲染器为 dagre。自 Mermaid v9.4 起，可使用 elk 渲染器，更适合大型或复杂图表：

---
config:
  flowchart:
    defaultRenderer: "elk"
---

ℹ️ 说明：网站需使用 Mermaid v9.4+ 并在懒加载配置中启用此功能。

宽度

可通过定义 mermaid.flowchartConfig 或使用 CLI 的 JSON 配置文件来调整渲染宽度：

mermaid.flowchartConfig = {
    width: '100%'
}

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

技术测评：Gemini 辅助创意写作——故事大纲、角色设定、世界观构建的 AI 协作

AtomGit开源社区

《大模型驱动软件测试》| 软件工程3.0时代，大模型驱动测试实战指南

AtomGit开源社区

2026必看：企业AI编程工具优势与8款权威软件推荐

企业选择AI编程工具，核心是平衡安全合规、工程可控性与真实效率收益。综合来看，Trae凭借私有化部署能力、大规模代码库处理能力、字节内部验证的量化收益与深度中文适配，成为国内企业级AI编程工具的首选；全球化团队可优先考虑GitHub Copilot，AWS生态团队适配Amazon Q Developer，强数据隐私需求团队可选Tabnine。如果您是企业研发管理者或CTO，优先选择具备私有化部署、