Mermaid 语法速查表
Mermaid 的完整参考文档很庞大，但其中一小部分语法几乎能覆盖大家实际绘制的所有内容。本页就是这部分精华：形状、箭头、分组、颜色，以及每种图表类型的一个可复制粘贴示例。下面每段代码都能直接渲染 —— 粘贴到编辑器中即可查看效果。
最简单能用的图表
一个流程图只需要一行声明和一个箭头。TD 表示从上到下；如果流程较宽，用 LR（从左到右）会更合适。
flowchart TD
A[Start] --> B{Ready?}
B -->|Yes| C[Ship it]
B -->|No| AA、B、C 是节点 id —— 仅作内部标识，不会显示出来。方括号里的文字是标签，而括号的样式决定了节点的形状。
节点形状
形状由标签两侧的定界符决定。以下是值得记住的几种：
| 语法 | 形状 | 常见含义 |
|---|---|---|
A[Text] | 矩形 | 步骤或操作 |
A(Text) | 圆角矩形 | 起点或终点 |
A([Text]) | 胶囊形 | 终止符 |
A[[Text]] | 子程序 | 调用另一个流程 |
A[(Text)] | 圆柱形 | 数据库或存储 |
A((Text)) | 圆形 | 汇合点 |
A{Text} | 菱形 | 决策点 |
A{{Text}} | 六边形 | 准备步骤 |
A[/Text/] | 平行四边形 | 输入或输出 |
A[/Text\] | 梯形 | 手动操作 |
如果标签中包含括号、冒号或引号，请给标签加上引号：A["Load (raw) data"]。不加引号的话，解析器会把这些标点当作语法处理。
箭头
| 语法 | 效果 |
|---|---|
A --> B | 箭头 |
A --- B | 无箭头的直线 |
A -.-> B | 虚线箭头 |
A ==> B | 粗箭头 |
A -->|label| B | 带标签的箭头 |
A --> B --> C | 写在一行的链式箭头 |
A --> B & C | 一个起点，两个终点 |
箭头的长度也有意义：--> 是一级间距，---> 会把目标节点再往下推一级。这是 mermaid 提供的最简单的布局控制方式。
使用子图分组
subgraph 会在节点周围绘制一个带标签的方框。子图可以嵌套，箭头也可以自由跨越子图边界。
flowchart LR
subgraph api["API"]
H[Handler] --> S[(Postgres)]
end
subgraph worker["Worker"]
Q[Queue] --> W[Job]
end
H --> Q颜色与样式
style 用于给单个节点上色。classDef 配合 class 可以给一组节点上色，节点数量超过三四个时应该用这种方式。
flowchart TD
A[OK] --> B[Failed]
style A fill:#16a34a,stroke:#333,color:#fff
classDef bad fill:#dc2626,stroke:#333,color:#fff
class B bad颜色是图表源码的一部分，因此导出后依然保留，并随文件一起传递。这不依赖渲染工具的任何主题设置。
每种图表类型各一个示例
时序图
sequenceDiagram
participant User
participant API
participant DB
User->>API: request
API->>DB: query
DB-->>API: rows
API-->>User: response类图
classDiagram
class Animal {
+String name
+move()
}
class Dog {
+bark()
}
Animal <|-- Dog状态图
stateDiagram-v2
[*] --> Idle
Idle --> Running: start
Running --> Idle: stop
Running --> [*]: finish实体关系图
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
CUSTOMER {
string name
string email
}甘特图
gantt
title Project
dateFormat YYYY-MM-DD
section Phase 1
Task 1 :a1, 2026-01-01, 5d
Task 2 :after a1, 5d哪些平台原生支持 mermaid 渲染
- GitHub — 围栏式 ```mermaid 代码块可以在 issue、pull request、评论和 README 文件中渲染。
- GitLab — 同样的围栏式代码块，可在 issue、merge request 和 wiki 中渲染。
- Notion — 将代码块语言设为 Mermaid，即可在源码旁渲染。
- Obsidian — 围栏式 mermaid 代码块可在预览模式下渲染。
- 文档网站 — Docusaurus、MkDocs Material 和 VitePress 都支持 mermaid 代码块。
这才是把图表保存为 mermaid 而不是图片的真正原因：图表和它所描述的内容存放在同一个文本文件中，代码评审时也能看清图表究竟改了什么。
试试本页任意一段代码
粘贴到代码标签页即可立即渲染 —— 或者在画布上搭建同样的图表，再回头查看生成的语法。
常见问题
如何在节点标签中换行？
在加引号的标签中使用 <br>：A["First line<br>Second line"]。Mermaid 会把标签内容当作 HTML 渲染，所以即使其余语法不是 HTML，这个标签依然有效。
为什么我的标签会破坏整个图表？
几乎总是因为标签中包含未加引号的方括号、圆括号、冒号或引号。把整个标签用双引号包起来，解析器就不会再把这些标点当作语法处理。
可以控制布局吗？
只能间接控制。可以选择方向（TD、LR、BT、RL），用更长的箭头（--->）把节点推得更远，或把相关节点分组到子图中。其余部分由 mermaid 自动计算 —— 没有坐标可供设置。
这个编辑器使用哪个 mermaid 版本？
使用当前主版本 Mermaid 11，因此 v10 和 v11 文档中记录的语法在这里都能渲染。