Mermaid 流程图语法参考一

文档整理自：mermaid.ai/open-source/syntax/flowchart.html（v11.15.0）

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

### 文章目录

[Mermaid 流程图语法参考一](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[@ $toc$ ](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[流程图基本语法](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[节点（默认）](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[带文本的节点](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[Unicode 文本](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[Markdown 格式](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[方向](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[节点形状](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[圆角矩形](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[体育场形（Stadium）](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[子程序形（Subroutine）](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[圆柱形（数据库）](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[圆形](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[不对称形](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[菱形（Decision）](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[六边形](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[平行四边形](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[平行四边形（反向）](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[梯形](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[梯形（反向）](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)
[双圆](#文章目录 Mermaid 流程图语法参考一 @[toc] 流程图基本语法节点（默认）带文本的节点 Unicode 文本 Markdown 格式方向节点形状圆角矩形体育场形（Stadium）子程序形（Subroutine）圆柱形（数据库）圆形不对称形菱形（Decision）六边形平行四边形平行四边形（反向）梯形梯形（反向）双圆)

流程图基本语法

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

⚠️ 警告

节点文本中若包含单词 end，请将整个单词或其中某个字母大写（如 End 或 END），或参考此解决方案。全小写的 end 会导致流程图解析失败。
⚠️ 警告

若连接节点的首字母为 o 或 x，请在字母前加一个空格，或将其大写（如 dev---ops 改为 dev--- ops 或 dev---Ops）。

输入 A---oB 会创建圆形边缘

输入 A---xB 会创建交叉边缘

节点（默认）

markdown 复制代码

```mermaid
---
title: Node
---
flowchart LR
    id
```

markdown 复制代码

```mermaid
---
title: Node
---
flowchart LR
    id
```

id
Node

💡 提示
flowchart 关键字也可以用 graph 代替。
ℹ️ 说明
id 即为方框中显示的内容。

带文本的节点

可以为节点设置与 id 不同的显示文本。若同一节点多次设置文本，以最后一次为准。若后续定义了边缘，可省略文本定义，渲染时使用之前定义的文本。

markdown 复制代码

```mermaid
---
title: Node with text
---
flowchart LR
    id1[This is the text in the box]
```

markdown 复制代码

```mermaid
---
title: Node with text
---
flowchart LR
    id1[This is the text in the box]
```

This is the text in the box
Node with text

Unicode 文本

使用双引号 " 包裹含有 Unicode 字符的文本。

markdown 复制代码

```mermaid
flowchart LR
    id["This ❤ Unicode"]
```

This ❤ Unicode

Markdown 格式

使用双引号加反引号 "` text `" 包裹 Markdown 文本。

markdown 复制代码

```mermaid
%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines
```

This is Markdown
Line1

Line 2

Line 3

方向

声明流程图的布局方向：

markdown 复制代码

```mermaid
flowchart TD
    Start --> Stop
```

Start
Stop

markdown 复制代码

```mermaid
flowchart LR
    Start --> Stop
```

Start
Stop

可用方向：

TB / TD --- 从上到下
BT --- 从下到上
LR --- 从左到右
RL --- 从右到左

节点形状

圆角矩形

markdown 复制代码

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

This is the text in the box

体育场形（Stadium）

markdown 复制代码

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

This is the text in the box

子程序形（Subroutine）

markdown 复制代码

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

This is the text in the box

圆柱形（数据库）

markdown 复制代码

```mermaid
flowchart LR
    id1[(Database)]
```

Database

圆形

markdown 复制代码

```mermaid
flowchart LR
    id1((This is the text in the circle))
```

This is the text in the circle

不对称形

markdown 复制代码

```mermaid
flowchart LR
    id1>This is the text in the box]
```

This is the text in the box

目前仅支持此方向，镜像形状可能在未来版本中添加。

菱形（Decision）

markdown 复制代码

```mermaid
flowchart LR
    id1{This is the text in the box}
```

This is the text in the box

六边形

markdown 复制代码

```mermaid
flowchart LR
    id1{{This is the text in the box}}
```

This is the text in the box

平行四边形

markdown 复制代码

```mermaid
flowchart TD
    id1[/This is the text in the box/]
```

This is the text in the box

平行四边形（反向）

markdown 复制代码

```mermaid
flowchart TD
    id1[\This is the text in the box\]
```

This is the text in the box

梯形

markdown 复制代码

```mermaid
flowchart TD
    A[/Christmas\]
```

Christmas

梯形（反向）

markdown 复制代码

```mermaid
flowchart TD
    B[\Go shopping/]
```

Go shopping

双圆

markdown 复制代码

```mermaid
flowchart TD
    id1(((This is the text in the circle)))
```

This is the text in the circle