Mermaid 流程图语法参考三

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

文章目录

[Mermaid 流程图语法参考三](#Mermaid 流程图语法参考三)
- 特殊形状（v11.3.0+）
- - [图标形状（Icon Shape）](#图标形状（Icon Shape）)
  - [图像形状（Image Shape）](#图像形状（Image Shape）)
- 节点间的链接
- - 带箭头的链接
  - 开放链接（无箭头）
  - 链接上的文字
  - 带箭头和文字的链接
  - 虚线链接
  - 带文字的虚线链接
  - 粗线链接
  - 带文字的粗线链接
  - 不可见链接
  - 链式声明
  - [为边缘指定 ID](#为边缘指定 ID)
  - 开启边缘动画
  - 选择动画类型
  - [使用 classDef 定义动画](#使用 classDef 定义动画)
- 新箭头类型
- - 圆形边缘示例
  - 交叉边缘示例
- 多方向箭头
- - 链接的最小长度
- 特殊字符处理
- - 实体编码转义字符

特殊形状（v11.3.0+）

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

图标形状（Icon Shape）

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

markdown 复制代码

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

User Icon
?

参数说明：

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

图像形状（Image Shape）

markdown 复制代码

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

渲染错误: Mermaid 渲染失败: Invalid encoded image data.

参数说明：

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

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

节点间的链接

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

带箭头的链接

markdown 复制代码

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

A
B

开放链接（无箭头）

markdown 复制代码

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

A
B

链接上的文字

markdown 复制代码

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

This is the text!
A
B

或：

markdown 复制代码

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

This is the text
A
B

带箭头和文字的链接

markdown 复制代码

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

text
A
B

或：

markdown 复制代码

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

text
A
B

虚线链接

markdown 复制代码

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

A
B

带文字的虚线链接

markdown 复制代码

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

text
A
B

粗线链接

markdown 复制代码

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

A
B

带文字的粗线链接

markdown 复制代码

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

text
A
B

不可见链接

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

markdown 复制代码

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

A
B

链式声明

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

markdown 复制代码

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

text
text2
A
B
C

也可以声明多节点链接：

markdown 复制代码

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

a
b
c
d

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

markdown 复制代码

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

A
B
C
D

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

markdown 复制代码

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

A
C
D
B

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

为边缘指定 ID

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

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

markdown 复制代码

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

A
B

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

开启边缘动画

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

markdown 复制代码

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

A
B

选择动画类型

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

markdown 复制代码

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

A
B

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

使用 classDef 定义动画

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

markdown 复制代码

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

A
B

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

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

新箭头类型

支持以下新类型的箭头：

圆形边缘
交叉边缘

圆形边缘示例

markdown 复制代码

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

A
B

交叉边缘示例

markdown 复制代码

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

A
B

多方向箭头

markdown 复制代码

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

A
B
C
D

链接的最小长度

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

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

markdown 复制代码

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

Yes
No
Start
Is it?
OK
Rethink
End

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

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

markdown 复制代码

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

Yes
No
Start
Is it?
OK
Rethink
End

链接长度参考表：

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

特殊字符处理

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

markdown 复制代码

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

This is the (text) in the box

实体编码转义字符

markdown 复制代码

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

A double quote:"
A dec char:♥

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