Mermaid 其他图表合集
# Mermaid 其他图表合集
# 一、图表总览
前六篇覆盖了流程图、时序图、类图、ER图、状态图、Git图、甘特图、饼图。本篇补全剩余类型：
| 图表 | 用途 | 常用度 |
|---|---|---|
| Mindmap | 脑图/思维导图 | ⭐⭐⭐ |
| Timeline | 时间线/里程碑 | ⭐⭐ |
| User Journey | 用户体验地图 | ⭐⭐ |
| C4 Diagram | 软件架构图 | ⭐⭐⭐ |
| Sankey | 流量/能量流转 | ⭐ |
| XY Chart | 柱状图/折线图 | ⭐ |
| Quadrant Chart | 四象限图 | ⭐ |
| Requirement | 需求关系图 | ⭐ |
# 二、脑图（Mindmap）
# 2.1 基础语法
mindmap
root((我的博客))
技术文章
Git从入门精通
基础概念
分支管理
远程协作
开源协议
MIT
GPL
Apache
Markdown指南
基础语法
高级语法
生活随笔
读书笔记
旅行记录
关于我
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
用缩进表示层级关系，支持最多六层嵌套。
# 2.2 带形状标记
mindmap
root((技术成长路线))
::icon(fa fa-rocket)
前端
HTML/CSS
JavaScript
React
Vue
TypeScript
)后端(
Node.js
Go
Python
))基础((
数据结构
算法
网络
{{数据库}}
MySQL
Redis
MongoDB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| 语法 | 效果 |
|---|---|
root((文字)) | 圆形中心 |
)文字( | 圆角矩形 |
))文字(( | 云形 |
| 六边形 |
[文字] | 矩形（默认） |
# 三、时间线（Timeline）
timeline
title 我的技术成长时间线
2021 : 入行前端
: 学习 HTML/CSS/JavaScript
2022 : 转全栈
: 学习 Node.js + Go
: 搭建第一个个人项目
2019 : 系统化输入
: 阅读 30+ 技术书籍
: 开始写技术博客
2020 : 体系化输出
: 自建博客站点
: 完成 Git 系列教程
2021 : 持续精进
: 开源协议系列
: Markdown 完全指南
: 目标：年输出 50 篇文章
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 四、用户旅程图（User Journey）
journey
title 用户首次下单旅程
section 浏览阶段
打开App : 5: 用户
浏览商品 : 4: 用户
搜索功能 : 3: 用户
section 决策阶段
查看详情 : 4: 用户
对比商品 : 3: 用户
加入购物车 : 5: 用户
section 下单阶段
填写地址 : 2: 用户, 系统
选择支付 : 3: 用户
确认下单 : 5: 用户, 系统
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
: 满意度分数 : 参与者1, 参与者2
1
分数范围 1~5，参与者逗号分隔。
# 五、C4 架构图
C4 模型（Context-Container-Component-Code）是业界标准的软件架构可视化方法。
# 5.1 系统上下文图（Level 1）
C4Context
title 电商平台系统上下文图
Person(用户, "终端消费者", "通过浏览器或App访问")
System(电商平台, "在线购物平台", "提供商品浏览、下单、支付")
System_Ext(支付宝, "第三方支付平台")
System_Ext(物流系统, "快递配送系统")
System_Ext(短信平台, "发送通知短信")
Rel(用户, 电商平台, "浏览、下单", "HTTPS")
Rel(电商平台, 支付宝, "发起支付", "API")
Rel(电商平台, 物流系统, "创建运单", "API")
Rel(电商平台, 短信平台, "发送通知", "API")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 5.2 容器图（Level 2）
C4Container
title 电商平台容器图
Person(用户, "消费者")
System_Boundary(平台, "电商平台") {
Container(Web, "Web前端", "Vue.js", "提供用户界面")
Container(API, "API网关", "Go", "请求路由和鉴权")
Container(订单服务, "订单服务", "Java/Spring", "订单处理")
Container(商品服务, "商品服务", "Go", "商品管理")
Container(用户服务, "用户服务", "Go", "用户账户管理")
ContainerDb(数据库, "MySQL", "关系型数据库", "存储核心数据")
ContainerDb(缓存, "Redis", "内存缓存", "热点数据缓存")
}
System_Ext(支付宝, "支付平台")
Rel(用户, Web, "访问", "HTTPS")
Rel(Web, API, "API请求", "JSON/REST")
Rel(API, 订单服务, "转发", "gRPC")
Rel(API, 商品服务, "转发", "gRPC")
Rel(订单服务, 数据库, "读写", "JDBC")
Rel(商品服务, 缓存, "查询", "Redis协议")
Rel(订单服务, 支付宝, "支付", "API")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 5.3 组件图（Level 3）
C4Component
title 订单服务组件图
Container_Boundary(订单服务, "订单服务") {
Component(控制器, "OrderController", "REST API", "接收HTTP请求")
Component(服务层, "OrderService", "业务逻辑", "处理订单流程")
Component(仓库层, "OrderRepository", "数据访问", "MySQL操作")
Component(支付集成, "PaymentGateway", "支付适配", "对接支付宝/微信")
Rel(控制器, 服务层, "调用", "方法调用")
Rel(服务层, 仓库层, "持久化", "JPA")
Rel(服务层, 支付集成, "发起支付", "接口调用")
}
ContainerDb(数据库, "MySQL", "订单数据存储")
Rel(仓库层, 数据库, "SQL", "JDBC")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 六、桑基图（Sankey）
展示流量、能量或资金的流动路径：
---
config:
sankey:
showValues: true
---
sankey-beta
用户访问,首页, 10000
首页,商品列表, 8000
首页,搜索结果, 2000
商品列表,商品详情, 5000
搜索结果,商品详情, 1500
商品详情,加入购物车, 3000
商品详情,直接购买, 1500
商品列表,离开, 3000
搜索结果,离开, 500
商品详情,离开, 2000
加入购物车,下单成功, 2000
直接购买,下单成功, 1200
加入购物车,放弃, 1000
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
⚠️ Sankey 目前为 beta 版本，部分平台可能不支持。
# 七、需求图（Requirement Diagram）
requirementDiagram
requirement 用户登录 {
id: FR-001
text: 支持手机号和邮箱两种方式
}
requirement 密码安全 {
id: FR-002
text: 密码长度>=8位，含大小写数字
}
requirement 登录速率限制 {
id: NFR-001
text: 同IP每分钟最多尝试5次
}
element 登录页面
登录页面 - satisfies -> 用户登录
用户登录 - contains -> 密码安全
用户登录 - traces -> 登录速率限制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 八、象限图（Quadrant Chart）
常用于优先级评估（如重要-紧急矩阵）：
quadrantChart
title 功能优先级矩阵
x-axis 低优先级 --> 高优先级
y-axis 容易实现 --> 难以实现
quadrant-1 速赢
quadrant-2 重点投入
quadrant-3 低优先级
quadrant-4 谨慎规划
商品搜索优化: [0.8, 0.3]
用户登录重构: [0.7, 0.6]
订单系统重构: [0.9, 0.8]
SEO优化: [0.5, 0.2]
国际化: [0.3, 0.6]
深色模式: [0.2, 0.2]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 九、图表选择指南
你需要展示什么？
│
├── 流程/步骤
│ ├── 线性步骤 → 流程图
│ ├── 带分支判断 → 流程图（菱形判断）
│ └── 参与者按时间交互 → 时序图
│
├── 结构/关系
│ ├── 代码类结构 → 类图
│ ├── 数据库表关系 → ER图
│ └── 系统架构层次 → C4图
│
├── 状态/生命周期
│ ├── 对象状态变化 → 状态图
│ └── 分支提交历史 → Git图
│
├── 时间/排期
│ ├── 项目计划 → 甘特图
│ └── 时间线回顾 → 时间线
│
├── 数据占比
│ ├── 百分比分布 → 饼图
│ └── 流量流转 → 桑基图
│
├── 思维/创意
│ ├── 知识整理 → 脑图
│ └── 优先级排序 → 象限图
│
└── 需求/旅程
├── 需求追踪 → 需求图
└── 用户情绪 → 用户旅程图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
🏃 下一篇：综合实战——用 5 种图表讲一个完整的系统架构故事。
上次更新: 2026/06/07, 09:20:35
