Mermaid语法
6/24/26About 6 min
Mermaid 语法
Mermaid 是一个基于文本的图表绘制工具，使用简单的 Markdown 风格语法即可生成流程图、时序图、类图等多种图表。
在 Markdown 中使用 Mermaid：
```mermaid
图表代码
```一、流程图（Flowchart）
方向与基本节点
代码：
flowchart TD
A[开始] --> B{判断}
B -- 是 --> C[处理]
B -- 否 --> D[结束]效果：
节点形状
代码：
flowchart LR
A[矩形] --> B(圆角矩形)
B --> C([体育场形])
C --> D[[子程序形]]
D --> E[(圆柱/数据库)]
E --> F{菱形}
F --> G>不对称]
G --> H[/平行四边形/]
H --> I[\反斜平行四边形\]
I --> J[/梯形\]
J --> K[\倒梯形/]
K --> L(((圆形)))效果：
连接线类型
代码：
flowchart LR
A1 --- B1
A2 --> B2
A3 === B3
A4 ==> B4
A5 -.- B5
A6 -.-> B6
A7 -- 文本 --- B7
A8 -- 文本 --> B8
A9 -. 文本 .-> B9
A10 == 文本 ==> B10效果：
子图
代码：
flowchart TB
subgraph 子图A
a1 --> a2
end
subgraph 子图B
b1 --> b2
end
a2 --> b1效果：
节点样式
代码：
flowchart LR
A[红色] --> B[绿色] --> C[蓝色]
style A fill:#f9f,stroke:#333,stroke-width:2px
style B fill:#9f9,stroke:#333,color:#fff
style C fill:#99f,stroke:#333效果：
二、时序图（Sequence Diagram）
代码：
sequenceDiagram
participant A as 用户
participant B as 系统
A->>B: 发送请求
B-->>A: 返回响应
Note right of B: 处理中...
A->>B: 确认
B-->>A: 完成效果：
激活框
代码：
sequenceDiagram
A->>B: 请求
activate B
B-->>A: 响应
deactivate B效果：
片段（循环/条件）
代码：
sequenceDiagram
A->>B: 请求
loop 重试3次
B-->>A: 响应
end
alt 成功
A->>B: 继续
else 失败
B-->>A: 错误
end
opt 可选步骤
A->>B: 额外操作
end效果：
三、类图（Class Diagram）
代码：
classDiagram
class Animal {
+String name
+int age
+makeSound() void
}
class Dog {
+breed String
+bark() void
}
Animal <|-- Dog
Animal <|-- Cat效果：
关系符号
代码：
classDiagram
classA <|-- classB : 继承
classC *-- classD : 组合
classE o-- classF : 聚合
classG --> classH : 关联
classI ..> classJ : 依赖
classK ..|> classL : 实现效果：
四、状态图（State Diagram）
代码：
stateDiagram-v2
[*] --> 待支付
待支付 --> 已支付: 支付成功
待支付 --> 已取消: 超时取消
已支付 --> 已发货: 发货
已发货 --> 已完成: 确认收货
已完成 --> [*]
已取消 --> [*]效果：
复合状态
代码：
stateDiagram-v2
[*] --> 活跃
state 活跃 {
[*] --> 在线
在线 --> 离开: 闲置
离开 --> 在线: 操作
在线 --> 离线: 断开
离线 --> 在线: 重连
}
活跃 --> [*]: 退出效果：
五、实体关系图（ER Diagram）
代码：
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
PRODUCT ||--o{ ORDER_ITEM : includes
CUSTOMER {
int id PK
string name
string email
}
ORDER {
int id PK
int customer_id FK
date order_date
}
PRODUCT {
int id PK
string name
decimal price
}效果：
六、甘特图（Gantt Chart）
代码：
gantt
title 项目进度
dateFormat YYYY-MM-DD
axisFormat %m-%d
section 需求阶段
需求分析 :a1, 2026-06-01, 5d
需求评审 :a2, after a1, 2d
section 开发阶段
编码实现 :a3, after a2, 10d
单元测试 :a4, after a3, 3d
section 测试阶段
集成测试 :a5, after a4, 5d
部署上线 :milestone, m1, after a5, 0d效果：
七、饼图（Pie Chart）
代码：
pie title 浏览器市场份额
"Chrome" : 64
"Edge" : 13
"Firefox" : 12
"Safari" : 8
"其他" : 3效果：
八、Git 分支图（Gitgraph）
代码：
gitGraph
commit id: "初始化"
commit id: "基础功能"
branch feature
checkout feature
commit id: "功能开发1"
commit id: "功能开发2"
checkout main
merge feature
commit id: "发布v1.0"效果：
九、思维导图（Mindmap）
代码：
mindmap
root((Mermaid))
流程图
节点形状
连接线
时序图
参与者
片段
类图
关系
状态图
状态转换
其他图表
甘特图
饼图效果：
十、时间线（Timeline）
代码：
timeline
title 项目里程碑
2026年1月 : 项目启动
: 需求调研
2026年3月 : 原型设计
: UI设计
2026年5月 : 开发完成
: 内部测试
2026年6月 : 正式上线效果：
十一、用户旅程图（User Journey）
代码：
journey
title 用户购物流程
section 浏览商品
搜索商品: 5: 用户
查看详情: 4: 用户
浏览评价: 3: 用户
section 下单支付
加入购物车: 5: 用户
填写地址: 3: 用户
支付订单: 4: 用户, 系统效果：
十二、高级技巧
样式类
代码：
flowchart LR
A:::red --> B:::green
classDef red fill:#f9f,stroke:#333
classDef green fill:#9f9,stroke:#333效果：
点击交互
代码：
flowchart LR
A[点击跳转] --> B[百度]
click A "https://example.com" _blank
click B "https://baidu.com" _blank效果：
注释与转义
%% 这是单行注释
A["括号[]和()需用引号包裹"]
B["显示#时使用#35;"]参考
- 官方文档：https://mermaid.js.org/
- 在线编辑器：https://mermaid.live/