Mermaid使用
Mermaid 使用手册
Mermaid 是一种基于文本的图表语言，可以在 Markdown 中直接渲染成流程图、时序图等各种图表。
📝 基本语法
在 Markdown 中使用三个反引号 + mermaid 来声明：
```mermaid
graph TD
A[开始] --> B[处理]
B --> C[结束]
```
🎯 常用图表类型
1. 流程图 (Flowchart)
基本方向
TD/TB- 从上到下 (Top Down / Top Bottom)LR- 从左到右 (Left to Right)RL- 从右到左 (Right to Left)BT- 从下到上 (Bottom to Top)
节点形状
graph LR
A[方形节点]
B(圆角矩形)
C([体育场形])
D[[子程序]]
E[(数据库)]
F((圆形))
G>标签形]
H{菱形决策}
I{{六角形}}
J[/平行四边形/]
K[\反向平行四边形\]
L[/梯形\]
M[\反向梯形/]
代码示例：
graph LR
A[方形节点]
B(圆角矩形)
C([体育场形])
D[[子程序]]
E[(数据库)]
F((圆形))
G>标签形]
H{菱形决策}
I{{六角形}}
J[/平行四边形/]
K[\反向平行四边形\]
L[/梯形\]
M[\反向梯形/]
连接线样式
graph TD
A --> B
C --- D
E -.-> F
G ==> H
I -- 文字 --> J
K -->|带标签| L
代码示例：
graph TD
A -->|实线箭头| B
C ---|实线无箭头| D
E -.->|虚线箭头| F
G ==>|粗线箭头| H
I -- 文字 --> J
K -->|带标签| L
实际案例：数据验证流程
graph TD
Start[开始] --> Input[输入数据]
Input --> Process{数据有效?}
Process -->|是| Save[保存到数据库]
Process -->|否| Error[显示错误]
Save --> End[结束]
Error --> End
代码示例：
graph TD
Start[开始] --> Input[输入数据]
Input --> Process{数据有效?}
Process -->|是| Save[保存到数据库]
Process -->|否| Error[显示错误]
Save --> End[结束]
Error --> End
2. 时序图 (Sequence Diagram)
基础时序图
sequenceDiagram
participant 用户
participant 前端
participant 后端
participant 数据库
用户->>前端: 发起请求
前端->>后端: API调用
后端->>数据库: 查询数据
数据库-->>后端: 返回结果
后端-->>前端: JSON响应
前端-->>用户: 显示页面
代码示例：
sequenceDiagram
participant 用户
participant 前端
participant 后端
participant 数据库
用户->>前端: 发起请求
前端->>后端: API调用
后端->>数据库: 查询数据
数据库-->>后端: 返回结果
后端-->>前端: JSON响应
前端-->>用户: 显示页面
高级特性：条件分支、循环、注释
sequenceDiagram
autonumber
actor 用户
用户->>+系统: 登录请求
系统->>+数据库: 验证凭证
alt 验证成功
数据库-->>-系统: 返回用户信息
系统-->>用户: 登录成功
else 验证失败
数据库-->>系统: 返回错误
系统-->>用户: 显示错误信息
end
系统->>-用户: 关闭连接
Note over 用户,系统: 这是一个注释
代码示例：
sequenceDiagram
autonumber
actor 用户
用户->>+系统: 登录请求
系统->>+数据库: 验证凭证
alt 验证成功
数据库-->>-系统: 返回用户信息
系统-->>用户: 登录成功
else 验证失败
数据库-->>系统: 返回错误
系统-->>用户: 显示错误信息
end
系统->>-用户: 关闭连接
Note over 用户,系统: 这是一个注释
箭头类型说明：
->实线无箭头->>实线箭头-->虚线无箭头-->>虚线箭头-x实线 X 结尾（异步）--x虚线 X 结尾-)+激活生命线-)结束生命线
3. 类图 (Class Diagram)
classDiagram
class Animal {
+String name
+int age
+eat()
+sleep()
}
class Dog {
+String breed
+bark()
}
class Cat {
+meow()
}
Animal <|-- Dog
Animal <|-- Cat
代码示例：
classDiagram
class Animal {
+String name
+int age
+eat()
+sleep()
}
class Dog {
+String breed
+bark()
}
class Cat {
+meow()
}
Animal <|-- Dog
Animal <|-- Cat
关系类型
| 符号 | 关系类型 | 说明 |
|---|---|---|
<|-- |
继承 | Inheritance |
*-- |
组合 | Composition |
o-- |
聚合 | Aggregation |
--> |
关联 | Association |
..> |
依赖 | Dependency |
..|> |
实现 | Realization |
访问修饰符
+Public-Private#Protected~Package/Internal
4. 状态图 (State Diagram)
stateDiagram-v2
[*] --> 待支付
待支付 --> 已支付: 支付成功
待支付 --> 已取消: 超时/用户取消
已支付 --> 配送中: 商家发货
配送中 --> 已完成: 确认收货
已完成 --> [*]
已取消 --> [*]
代码示例：
stateDiagram-v2
[*] --> 待支付
待支付 --> 已支付: 支付成功
待支付 --> 已取消: 超时/用户取消
已支付 --> 配送中: 商家发货
配送中 --> 已完成: 确认收货
已完成 --> [*]
已取消 --> [*]
5. 甘特图 (Gantt Chart)
gantt
title 项目开发计划
dateFormat YYYY-MM-DD
section 需求阶段
需求分析 :a1, 2024-01-01, 7d
需求评审 :after a1, 2d
section 开发阶段
前端开发 :2024-01-10, 14d
后端开发 :2024-01-10, 14d
section 测试阶段
功能测试 :2024-01-24, 5d
上线部署 :2024-01-29, 2d
代码示例：
gantt
title 项目开发计划
dateFormat YYYY-MM-DD
section 需求阶段
需求分析 :a1, 2024-01-01, 7d
需求评审 :after a1, 2d
section 开发阶段
前端开发 :2024-01-10, 14d
后端开发 :2024-01-10, 14d
section 测试阶段
功能测试 :2024-01-24, 5d
上线部署 :2024-01-29, 2d
6. 饼图 (Pie Chart)
pie title 技术栈使用占比
"JavaScript" : 35
"Python" : 25
"Go" : 20
"Java" : 15
"其他" : 5
代码示例：
pie title 技术栈使用占比
"JavaScript" : 35
"Python" : 25
"Go" : 20
"Java" : 15
"其他" : 5
7. ER 图 (Entity Relationship Diagram)
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
PRODUCT ||--o{ ORDER_ITEM : "ordered in"
USER {
int id PK
string name
string email
}
ORDER {
int id PK
int user_id FK
datetime created_at
}
PRODUCT {
int id PK
string name
decimal price
}
代码示例：
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
PRODUCT ||--o{ ORDER_ITEM : "ordered in"
USER {
int id PK
string name
string email
}
ORDER {
int id PK
int user_id FK
datetime created_at
}
PRODUCT {
int id PK
string name
decimal price
}
关系符号说明
| 符号 | 含义 |
|---|---|
|o |
Zero or one |
|| |
Exactly one |
}o |
Zero or more |
}| |
One or more |
8. Git 分支图 (Git Graph)
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
branch feature
checkout feature
commit
checkout main
merge feature
代码示例：
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
branch feature
checkout feature
commit
checkout main
merge feature
🎨 样式自定义
可以通过 classDef 定义样式类，然后用 ::: 应用到节点上：
graph LR
A[节点A]:::classA --> B[节点B]:::classB
classDef classA fill:#f9f,stroke:#333,stroke-width:4px
classDef classB fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff
代码示例：
graph LR
A[节点A]:::classA --> B[节点B]:::classB
classDef classA fill:#f9f,stroke:#333,stroke-width:4px
classDef classB fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff
💼 实际应用场景
Kubernetes 部署流程
graph TD
A[编写YAML] --> B[kubectl apply]
B --> C{资源创建成功?}
C -->|是| D[Pod调度]
C -->|否| E[检查配置]
D --> F{健康检查}
F -->|通过| G[服务就绪]
F -->|失败| H[查看日志]
E --> A
H --> I[修复问题]
I --> B
代码示例：
graph TD
A[编写YAML] --> B[kubectl apply]
B --> C{资源创建成功?}
C -->|是| D[Pod调度]
C -->|否| E[检查配置]
D --> F{健康检查}
F -->|通过| G[服务就绪]
F -->|失败| H[查看日志]
E --> A
H --> I[修复问题]
I --> B
Disaster Recovery 恢复流程
sequenceDiagram
participant 监控系统
participant DR控制器
participant 主集群
participant 备份集群
监控系统->>主集群: 健康检查
主集群--xDR控制器: 主集群故障
activate DR控制器
DR控制器->>备份集群: 触发故障转移
备份集群->>备份集群: 恢复数据
备份集群->>DR控制器: 切换完成
deactivate DR控制器
DR控制器->>监控系统: 更新服务地址
Note over 备份集群: RTO: 5分钟<br/>RPO: 15分钟
代码示例：
sequenceDiagram
participant 监控系统
participant DR控制器
participant 主集群
participant 备份集群
监控系统->>主集群: 健康检查
主集群--xDR控制器: 主集群故障
activate DR控制器
DR控制器->>备份集群: 触发故障转移
备份集群->>备份集群: 恢复数据
备份集群->>DR控制器: 切换完成
deactivate DR控制器
DR控制器->>监控系统: 更新服务地址
Note over 备份集群: RTO: 5分钟<br/>RPO: 15分钟
微服务架构图
graph TB
Client[客户端]
Gateway[API网关]
Auth[认证服务]
UserService[用户服务]
OrderService[订单服务]
PaymentService[支付服务]
DB1[(用户数据库)]
DB2[(订单数据库)]
Cache[(Redis缓存)]
MQ[消息队列]
Client --> Gateway
Gateway --> Auth
Gateway --> UserService
Gateway --> OrderService
UserService --> DB1
UserService --> Cache
OrderService --> DB2
OrderService --> MQ
PaymentService --> MQ
PaymentService -.->|异步通知| OrderService
代码示例：
graph TB
Client[客户端]
Gateway[API网关]
Auth[认证服务]
UserService[用户服务]
OrderService[订单服务]
PaymentService[支付服务]
DB1[(用户数据库)]
DB2[(订单数据库)]
Cache[(Redis缓存)]
MQ[消息队列]
Client --> Gateway
Gateway --> Auth
Gateway --> UserService
Gateway --> OrderService
UserService --> DB1
UserService --> Cache
OrderService --> DB2
OrderService --> MQ
PaymentService --> MQ
PaymentService -.->|异步通知| OrderService
🔧 支持 Mermaid 的工具
原生支持
- ✅ Obsidian - 开箱即用
- ✅ GitHub - 代码块中直接渲染
- ✅ GitLab - 同上
- ✅ Typora - 实时预览
- ✅ HackMD - 协作笔记
- ✅ Notion - 部分支持（需要代码块）
需要插件/扩展
- 🔌 VS Code - 安装
Markdown Preview Mermaid Support - 🔌 Confluence - 安装 Mermaid 插件
- 🔌 WordPress - 安装相关插件
在线工具
- 🌐 Mermaid Live Editor - https://mermaid.live/
- 🌐 Mermaid Chart - https://www.mermaidchart.com/
⚡ 使用技巧
1. 调试复杂图表
使用 mermaid.live 在线编辑器进行实时预览和调试。
2. 性能优化
- 避免单个图表节点过多（建议 < 50 个节点）
- 复杂系统可以拆分成多个子图
- 使用子图（subgraph）组织结构
3. 版本控制友好
- Mermaid 是纯文本，非常适合 Git 管理
- 修改历史清晰可追溯
- 易于 Code Review
4. 导出图片
大部分支持 Mermaid 的工具都可以导出为：
- SVG（矢量图，推荐）
- PNG（位图）
5. AI 辅助生成
可以让 Claude 或其他 AI 助手帮你：
- 根据描述生成 Mermaid 代码
- 优化现有图表结构
- 转换其他格式到 Mermaid
📚 进阶资源
- 官方文档: https://mermaid.js.org/
- 语法速查: https://mermaid.js.org/intro/syntax-reference.html
- 示例库: https://mermaid.js.org/ecosystem/integrations.html
- GitHub: https://github.com/mermaid-js/mermaid
🎓 学习路径建议
- 入门: 掌握流程图和时序图（覆盖 80%的日常需求）
- 进阶: 学习状态图、类图（适合技术文档）
- 高级: 尝试 ER 图、甘特图（项目管理场景）
- 实践: 在日常笔记中使用，形成习惯
💡 常见问题
Q: Mermaid 图表不显示？
- 检查代码块是否正确标记为
mermaid - 确认编辑器/平台支持 Mermaid
- 检查语法错误（使用 mermaid.live 验证）
Q: 中文显示异常？
- 大部分现代工具已支持中文
- 如遇问题，尝试使用英文或拼音
Q: 图表太大超出页面？
- 调整节点数量，拆分成多个子图
- 修改方向（如 LR 改为 TD）
- 使用子图（subgraph）组织
Q: 如何设置图表主题？
在文档开头添加配置（支持的工具）：
%%{init: {'theme':'dark'}}%%
主题选项：default, dark, forest, neutral
最后更新: 2026-04-14
适用版本: Mermaid 10.x+
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 木素音的小站！