Mermaid 流程图语法参考三

下一篇
Mermaid 流程图语法参考四

特殊形状（v11.3.0+）

Mermaid 还引入了 2 种特殊形状：icon（图标） 和 image（图像），可在流程图中直接嵌入图标或图片。

图标形状（Icon Shape）

使用前需先注册图标包，参考自定义图标文档。

```mermaid
flowchart TD
    A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }
```

参数说明：

• icon：已注册图标包中的图标名称。
• form：图标背景形状，不设置则无背景。可选值：square、circle、rounded。
• label：图标关联的文本标签，不设置则不显示。
• pos：标签位置，默认在图标下方。可选值：t（上）、b（下）。
• h：图标高度，最小值为 48（默认值）。

图像形状（Image Shape）

```mermaid
flowchart TD
    A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
```

参数说明：

• img：图像的 URL 地址。
• label：图像关联的文本标签，不设置则不显示。
• pos：标签位置，默认在图像下方。可选值：t（上）、b（下）。
• w：图像宽度，默认为图像自然宽度。
• h：图像高度，默认为图像自然高度。
• constraint：是否约束节点大小并保持宽高比。可选值：on、off（默认）。

若要在保持宽高比的同时调整大小，设置 h 并将 constraint 设为 on。

---

节点间的链接

节点可以用链接/边缘连接，支持多种类型和文本标注。

带箭头的链接

```mermaid
flowchart LR
    A-->B
```

开放链接（无箭头）

```mermaid
flowchart LR
    A --- B
```

链接上的文字

```mermaid
flowchart LR
    A-- This is the text! ---B
```

或：

```mermaid
flowchart LR
    A---|This is the text|B
```

带箭头和文字的链接

```mermaid
flowchart LR
    A-->|text|B
```

或：

```mermaid
flowchart LR
    A-- text -->B
```

虚线链接

```mermaid
flowchart LR
   A-.->B;
```

带文字的虚线链接

```mermaid
flowchart LR
   A-. text .-> B
```

粗线链接

```mermaid
flowchart LR
   A ==> B
```

带文字的粗线链接

```mermaid
flowchart LR
   A == text ==> B
```

不可见链接

在某些场景下可用于调整节点的默认布局位置。

```mermaid
flowchart LR
    A ~~~ B
```

链式声明

可在同一行声明多条链接：

```mermaid
flowchart LR
   A -- text --> B -- text2 --> C
```

也可以声明多节点链接：

```mermaid
flowchart LR
   a --> b & c--> d
```

以更简洁的方式表达依赖关系：

```mermaid
flowchart TB
    A & B--> C & D
```

等价于（基础语法，4 行）：

```mermaid
flowchart TB
    A --> C
    A --> D
    B --> C
    B --> D
```

使用链式语法时注意可读性，适度使用。正如瑞典语单词 lagom——不多不少，恰到好处。

为边缘指定 ID

Mermaid 支持为边缘分配 ID，用于后续的样式、类和动画控制。

语法： 在边缘语法前加 ID@，例如：

```mermaid
flowchart LR
  A e1@--> B
```

示例中 e1 是连接 A 到 B 这条边缘的 ID，可在后续定义中引用。

开启边缘动画

为边缘分配 ID 后，可定义其动画属性：

```mermaid
flowchart LR
  A e1@==> B
  e1@{ animate: true }
```

选择动画类型

初始版本支持两种动画速度：fast 和 slow。

```mermaid
flowchart LR
  A e1@--> B
  e1@{ animation: fast }
```

等同于 { animate: true, animation: fast }。

使用 classDef 定义动画

可通过为边缘指定类并在 classDef 中定义动画属性来设置动画：

```mermaid
flowchart LR
  A e1@--> B
  classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
  class e1 animate
```

• e1@--> 创建带 ID 的边缘
• classDef animate 定义名为 animate 的类及其样式和动画属性
• class e1 animate 将 animate 类应用到边缘 e1

注意： 在 stroke-dasharray 属性中，逗号需要用 \, 转义，因为逗号在 Mermaid 样式定义中用作分隔符。

---

新箭头类型

支持以下新类型的箭头：

• 圆形边缘
• 交叉边缘

圆形边缘示例

```mermaid
flowchart LR
    A --o B
```

交叉边缘示例

```mermaid
flowchart LR
    A --x B
```

---

多方向箭头

```mermaid
flowchart LR
    A o--o B
    B <--> C
    C x--x D
```

链接的最小长度

流程图中每个节点会被分配到渲染图的某个层级（水平或垂直，取决于方向）。默认情况下链接可跨越任意层级；在链接定义中添加额外的连字符可使链接跨越更多层级。

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

```mermaid
flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
```

注意： 渲染引擎可能为满足其他布局需求而使链接比请求的层数更长。

当链接标签写在链接中间时，额外的破折号应加在链接右侧：

```mermaid
flowchart TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]
```

链接长度参考表：

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

---

特殊字符处理

将文本放在引号中可处理会破坏语法的特殊字符：

```mermaid
flowchart LR
    id1["This is the (text) in the box"]
```

实体编码转义字符

```mermaid
flowchart LR
    A["A double quote:#quot;"] --> B["A dec char:#9829;"]
```

数字为十进制，例如 # 可编码为 #35;。也支持 HTML 字符名称。