Mermaid 是一种基于文本的图表生成工具，支持多种图表类型，非常适合在文档、教程或代码注释中直接嵌入可视化图表。
Mermaid 支持以下常见图表类型，均可在 Markdown 或文档中直接编写（使用 ```mermaid 代码块让编辑器识别展示）：
编辑器以及Mermaid的版本问题会有部分图不展示，或者需要修正，替换成其他图来展示
Mermaid 图表全集笔记
一、核心图表类型
1. 流程图 (Flowchart)
flowchart TD
A[开始] --> B{条件判断}
B -->|是| C[执行操作1]
B -->|否| D[执行操作2]
C --> E[结束]
D --> E
源码:
flowchart TD
A[开始] --> B{条件判断}
B -->|是| C[执行操作1]
B -->|否| D[执行操作2]
C --> E[结束]
D --> E
2. 时序图 (Sequence Diagram)
sequenceDiagram
participant 用户
participant 系统
用户->>系统: 登录请求
activate 系统
系统-->>用户: 验证请求
deactivate 系统
用户->>+系统: 提交数据
系统-->>-用户: 操作成功
源码:
sequenceDiagram
participant 用户
participant 系统
用户->>系统: 登录请求
activate 系统
系统-->>用户: 验证请求
deactivate 系统
用户->>+系统: 提交数据
系统-->>-用户: 操作成功
3. 类图 (Class Diagram)
classDiagram
class 动物 {
+String 名称
+void 移动()
}
class 鸟类 {
+void 飞行()
}
动物 <|-- 鸟类
源码:
classDiagram
class 动物 {
+String 名称
+void 移动()
}
class 鸟类 {
+void 飞行()
}
动物 <|-- 鸟类
4. 状态图 (State Diagram)
stateDiagram-v2
[*] --> 待机
待机 --> 运行: 启动命令
运行 --> 暂停: 暂停命令
暂停 --> 运行: 恢复命令
运行 --> 停止: 终止命令
停止 --> [*]
源码:
stateDiagram-v2
[*] --> 待机
待机 --> 运行: 启动命令
运行 --> 暂停: 暂停命令
暂停 --> 运行: 恢复命令
运行 --> 停止: 终止命令
停止 --> [*]
5. 饼图 (Pie Chart)
pie
title 编程语言使用率
"JavaScript" : 42
"Python" : 28
"Java" : 15
"C++" : 10
"其它" : 5
源码:
pie
title 编程语言使用率
"JavaScript" : 42
"Python" : 28
"Java" : 15
"C++" : 10
"其它" : 5
6. 甘特图 (Gantt Chart)
gantt
title 在线测试项目计划
dateFormat YYYY-MM-DD
section 开发
需求收集 :active, des1, 2023-01-01, 5d
系统设计 :des2, after des1, 5d
编码实现 :des3, after des2, 15d
section 测试
单元测试 :test1, after des3, 7d
集成测试 :test2, after test1, 5d
源码:
gantt
title 在线测试项目计划
dateFormat YYYY-MM-DD
section 开发
需求收集 :active, des1, 2023-01-01, 5d
系统设计 :des2, after des1, 5d
编码实现 :des3, after des2, 15d
section 测试
单元测试 :test1, after des3, 7d
集成测试 :test2, after test1, 5d
7. 实体关系图 (ER Diagram)
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
PRODUCT }|--|{ LINE-ITEM : includes
源码:
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
PRODUCT }|--|{ LINE-ITEM : includes
8. 用户旅程图 (User Journey)
journey
title 购物流程
浏览商品: 5: 用户
加入购物车: 4: 用户
结算支付: 3: 用户
确认收货: 5: 系统
源码:
journey
title 购物流程
浏览商品: 5: 用户
加入购物车: 4: 用户
结算支付: 3: 用户
确认收货: 5: 系统
9. Git分支图 (Git Graph)
gitGraph
commit
branch dev
checkout dev
commit
commit
checkout main
merge dev
commit
源码:
gitGraph
commit
branch dev
checkout dev
commit
commit
checkout main
merge dev
commit
10. C4架构图 (C4 Diagram)
C4Context
title 系统容器图
System_Ext(电商平台, "电商平台", "在线购物系统")
Person(买家, "买家", "在线购物的用户")
System_Boundary(c1, "系统边界") {
Container(web, "Web应用", "React")
Container(api, "API服务", "Node.js")
ContainerDb(db, "数据库", "MySQL")
}
Rel(买家, web, "使用")
Rel(web, api, "API请求")
Rel(api, db, "读写数据")
源码:
C4Context
title 系统容器图
System_Ext(电商平台, "电商平台", "在线购物系统")
Person(买家, "买家", "在线购物的用户")
System_Boundary(c1, "系统边界") {
Container(web, "Web应用", "React")
Container(api, "API服务", "Node.js")
ContainerDb(db, "数据库", "MySQL")
}
Rel(买家, web, "使用")
Rel(web, api, "API请求")
Rel(api, db, "读写数据")
11. 脑图 (Mindmap)
mindmap
root((编程语言))
前端开发
JavaScript
TypeScript
CSS
后端开发
Java
Python
Node.js
数据库
SQL
NoSQL
源码:
mindmap
root((编程语言))
前端开发
JavaScript
TypeScript
CSS
后端开发
Java
Python
Node.js
数据库
SQL
NoSQL
12. 时间线 (Timeline)
timeline
title 技术发展史
1946 : ENIAC诞生
1969 : ARPANET建立
1989 : WWW发明
2007 : iPhone发布
2020 : 5G商用
源码:
timeline
title 技术发展史
1946 : ENIAC诞生
1969 : ARPANET建立
1989 : WWW发明
2007 : iPhone发布
2020 : 5G商用
二、高级图表类型
1. 需求图 (Requirement Diagram)
classDiagram
class 需求_001 {
id: 001
类型: 测试需求
内容: 用户必须通过双重验证登录
风险: 中
}
class 需求_002 {
id: 002
类型: 功能需求
内容: 页面加载时间需<3秒
}
class 需求_003 {
id: 003
类型: 接口需求
内容: REST API响应时间<500ms
}
需求_001 --> 需求_002 : 推导出
需求_002 --> 需求_003 : 包含
源码:
classDiagram
class 需求_001 {
id: 001
类型: 测试需求
内容: 用户必须通过双重验证登录
风险: 中
}
class 需求_002 {
id: 002
类型: 功能需求
内容: 页面加载时间需<3秒
}
class 需求_003 {
id: 003
类型: 接口需求
内容: REST API响应时间<500ms
}
需求_001 --> 需求_002 : 推导出
需求_002 --> 需求_003 : 包含
2. 部署图 (Deployment Diagram)
deploymentDiagram
title 云端架构部署
internet -- CDN
CDN -- LoadBalancer : "负载均衡"
LoadBalancer -- WebServer1
LoadBalancer -- WebServer2
database 主数据库
database 从数据库1
database 从数据库2
WebServer1 -- Redis : "缓存"
WebServer2 -- Redis : "缓存"
Redis -- 主数据库
主数据库 -- 从数据库1 : "同步"
主数据库 -- 从数据库2 : "同步"
源码:
deployment
title 云端架构部署
Internet -- CDN
CDN --|负载均衡| LB
LB -- WebServer1
LB -- WebServer2
section 数据库集群
WebServer1 -- Redis : 缓存
WebServer2 -- Redis
Redis -- 主数据库
主数据库 -- 从数据库1 : 同步
主数据库 -- 从数据库2
3. XY图 (XY Chart)
xychart-beta
title "用户活跃度 vs 满意度"
x-axis "功能数量" [1, 2, 3, 4, 5]
y-axis "满意度评分" [3, 6, 9]
bar [5, 8]
line [1, 3], [2, 6], [3, 7], [4, 5], [5, 8]
scatter [2.5, 7], [4.2, 6]
源码:
xychart-beta
title "用户活跃度 vs 满意度"
x-axis "功能数量" [1, 2, 3, 4, 5]
y-axis "满意度评分" [3, 6, 9]
bar [5, 8]
line [1, 3], [2, 6], [3, 7], [4, 5], [5, 8]
scatter [2.5, 7], [4.2, 6]
4. 桑基图 (Sankey Diagram)
sankey-beta
title 客户旅程转化
[用户访问] --> [查看产品]: 1000
[查看产品] --> [加入购物车]: 300
[加入购物车] --> [结算]: 150
[结算] --> [完成支付]: 100
[完成支付] --> [复购]: 30
源码:
sankey-beta
title 客户旅程转化
[用户访问] --> [查看产品]: 1000
[查看产品] --> [加入购物车]: 300
[加入购物车] --> [结算]: 150
[结算] --> [完成支付]: 100
[完成支付] --> [复购]: 30
三、进阶技巧与功能
1. 交互式图表（点击事件）
flowchart TD
A[开始] --> B{选择}
B -->|选项1| C[操作1]
B -->|选项2| D[操作2]
click C callback "alert('操作1执行')"
click D call callback("选项2执行")
源码:
flowchart TD
A[开始] --> B{选择}
B -->|选项1| C[操作1]
B -->|选项2| D[操作2]
click C callback "alert('操作1执行')"
click D call callback("选项2执行")
2. 主题定制
%%{init: {'theme': 'dark', 'themeVariables': {
'primaryColor': '#ffcccc',
'edgeLabelBackground': '#333',
'clusterBkg': '#444'
}} }%%
flowchart LR
A --> B
B --> C
subgraph 组 [模块]
C --> D
end
源码:
%%{init: {'theme': 'dark', 'themeVariables': {
'primaryColor': '#ffcccc',
'edgeLabelBackground': '#333',
'clusterBkg': '#444'
}} }%%
flowchart LR
A --> B
B --> C
subgraph 组 [模块]
C --> D
end
3. Markdown支持
graph TD
A[**重要节点**] -->|``<b>粗体</b>文本| B
B -- <mark>高亮</mark> --> C[多行<br>文本]
C --> D[<i>斜体</i> <u>下划线</u>]
源码:
graph TD
A[**重要节点**] -->|``<b>粗体</b>文本| B
B -- <mark>高亮</mark> --> C[多行<br>文本]
C --> D[<i>斜体</i> <u>下划线</u>]
4. 字体图标集成
flowchart LR
D[(" ")]:::db
A[应用]
D --> A
classDef db stroke:#333,stroke-width:2px,fill:#ffcccc
class D cylinder
源码:
flowchart LR
D[(" ")]:::db
A[应用]
D --> A
classDef db stroke:#333,stroke-width:2px,fill:#ffcccc
class D cylinder
四、应用场景指南
| 图表类型 | 最佳应用场景 |
|---|---|
| 流程图 | 算法流程、业务逻辑 |
| 时序图 | 系统间交互、API调用流程 |
| 类图 | 系统架构设计、OOP建模 |
| 状态图 | 生命周期管理、状态转换 |
| 甘特图 | 项目管理、时间规划 |
| 实体关系图 | 数据库设计 |
| 用户旅程图 | UX设计、用户行为分析 |
| C4图 | 系统架构文档 |
| 需求图 | 系统需求分析 |
| 部署图 | 系统基础设施规划 |
| 脑图 | 知识整理、思维导图 |
| 桑基图 | 转化流程、数据流向分析 |
五、最佳实践与资源
优化技巧
- 精简语法：
flowchart LR
A --> B{判断}
B -->|条件1| C
B -->|条件2| D
flowchart LR
A --> B{判断}
B -->|条件1| C
B -->|条件2| D
- 复用样式：
flowchart LR
classDef default fill:#f9f,stroke:#333
classDef important fill:#f00,stroke:#000
A --> B:::important
C:::default
flowchart LR
classDef default fill:#f9f,stroke:#333
classDef important fill:#f00,stroke:#000
A --> B:::important
C:::default
- 版本控制：
%% 指定兼容版本
%%{init: {'mermaid': {'version': '10.0.0'}} }%%
学习资源
提示：Mermaid 持续更新中（当前最新版本 v10.6+），建议定期查看官方文档获取新功能信息！
