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）。
节点（默认）
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