Mermaid 流程图语法速查表

面向 flowchart 的常用语法：节点形状、连线、方向、子图与样式一页讲清，每个示例都可直接复制到本站流程图编辑器或任何支持 Mermaid 的平台使用。

1. 基本结构

一段 Mermaid 流程图由三部分组成：方向声明、节点定义、节点连线。第一行固定为 flowchart 方向。

flowchart TD
    A[开始] --> B[结束]

2. 方向

两个字母控制走向：T/B 表示上下，L/R 表示左右，前者为起点。

TB从上到下（默认）

BT从下到上

LR从左到右

RL从右到左

3. 节点形状

括号决定形状，A 是节点 id，括号内是显示文字。前 5 种是本站编辑器原生支持的形状。

形状	语法	用途
矩形 · 步骤	`A[步骤]`	最常用的普通处理步骤
圆角矩形 · 处理	`A(处理)`	圆角，语义同矩形
胶囊 · 开始/结束	`A([开始])`	起止节点，流程入口与出口
菱形 · 判断	`A{判断?}`	条件分支，通常引出两条线
圆形 · 连接点	`A((连接))`	连接符 / 汇总点
圆柱 · 数据库	`A[(数据库)]`	表示数据存储
双侧竖线 · 子程序	`A[[子流程]]`	预定义子流程
平行四边形 · 输入输出	`A[/输入/]`	表示输入 / 输出

4. 连线

类型	语法	说明
实线箭头	`A --> B`	最常见，单向流转
实线无箭头	`A --- B`	无方向连接
虚线箭头	`A -.-> B`	可选 / 条件流转
虚线无箭头	`A -.- B`	虚线无方向连接
粗线箭头	`A ==> B`	强调主流程
带标签箭头	`A -->\|是\| B`	线上文字，说明分支条件
文字前置	`A -- 说明 --> B`	等价写法

5. 子图与样式

subgraph 订单["订单模块"]
    A[下单] --> B[支付]
end

classDef green fill:#bbf7d0,stroke:#15803d,color:#14532d
class A,B green
linkStyle 0 stroke:#6366f1

subgraph 用于分组；classDef 定义样式类、class 应用到节点；linkStyle 按序号给边着色。单行注释用 %%。

6. 完整示例：登录校验

flowchart TD
    A([开始]) --> B[输入账号密码]
    B --> C{校验是否通过}
    C -->|是| D[进入主页]
    C -->|否| E[提示错误]
    E --> B
    D --> F([结束])

渲染中…

上面这段代码用到了胶囊、矩形、菱形三种节点和带标签的连线，直接复制到流程图编辑器即可看到效果并继续拖拽编辑。

常见问题

flowchart 和 graph 语法有什么区别？

graph 是 Mermaid 早期的写法，flowchart 是新版推荐写法，两者基本等价、都能正常渲染。新代码建议统一用 flowchart，避免旧语法在后续版本中被逐步弃用。

节点里的文字包含特殊字符怎么办？

文字建议用双引号包裹，如 A["你好，世界"]。引号内可包含大部分标点；井号 # 需写成 #35;，双引号写成 #quot;，竖线 | 会干扰边标签语法，建议避免或替换。

Mermaid 支持子图（分组）吗？

支持。用 subgraph 标题 ... end 包裹即可，如 subgraph 订单["订单模块"] ... end。子图会渲染成一个带标题的容器，把内部节点聚合在一起。

如何给节点和连线设置颜色？

用 classDef 定义样式类、class 应用：classDef green fill:#bbf7d0,stroke:#15803d,color:#14532d，再 class A,B green。连线颜色用 linkStyle 0 stroke:#6366f1（数字是边的序号，从 0 开始）。

在哪里可以边写边看效果？

本站流程图编辑器支持拖拽画布与 Mermaid 代码双向同步，可直接粘贴上面的代码并实时渲染；也支持 GitHub、Typora、语雀等所有支持 Mermaid 的平台。