Mermaid 流程图语法参考一

文档整理自：mermaid.ai/open-source/syntax/flowchart.html（v11.15.0）
下一篇
Mermaid 流程图语法参考二

文章目录

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

流程图基本语法

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

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

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

• 输入 A---oB 会创建圆形边缘
• 输入 A---xB 会创建交叉边缘

节点（默认）

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

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

💡 提示
flowchart 关键字也可以用 graph 代替。

ℹ️ 说明
id 即为方框中显示的内容。

带文本的节点

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

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

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

Unicode 文本

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

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

Markdown 格式

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

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

方向

声明流程图的布局方向：

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

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

可用方向：

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

---

节点形状

圆角矩形

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

体育场形（Stadium）

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

子程序形（Subroutine）

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

圆柱形（数据库）

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

圆形

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

不对称形

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

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

菱形（Decision）

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

六边形

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

平行四边形

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

平行四边形（反向）

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

梯形

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

梯形（反向）

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

双圆

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