Mermaid语法速查
Mermaid 是一种基于文本的图表绘制工具，可以在 Markdown 中轻松生成各种图表。以下内容覆盖了 Mermaid 支持的主要语法，每个示例都带有说明，帮助快速上手。
流程图
流程图常用于描述流程、条件分支和逻辑关系。
flowchart TD
A[开始] --> B{条件?}
B -- 是 --> C[处理1]
B -- 否 --> D[处理2]
C --> E((结束))
D --> E说明：
- TD 表示从上到下布局 (Top → Down)。
- 节点形状由 [ ]、( )、{ } 等决定。
- 箭头可加文字标签。
时序图
时序图用于展示对象或系统间的交互顺序。
sequenceDiagram
autonumber
participant 用户
participant 系统
用户->>系统: 请求
系统-->>用户: 响应
loop 重试
用户->>系统: 再次请求
系统-->>用户: 返回
end说明：
- participant 定义参与者。
- 箭头 ->> 表示消息传递。
- loop、alt、opt 可实现条件与循环。
类图
类图展示类、属性、方法及它们的关系。
classDiagram
class User {
+String name
+login(): bool
}
class Order {
+String id
+create(): void
}
User "1" --> "many" Order : 下单说明：
- 表示公共成员，- 表示私有。
- 关系支持继承 <|--、接口 <|..、关联 --> 等。
状态图
状态图用于展示系统的不同状态和转移条件。
stateDiagram-v2
[*] --> Idle
Idle --> Loading : start
Loading --> Success : ok
Loading --> Error : fail
Error --> Idle : reset说明：
- [ * ] 表示开始或结束。
- 箭头上可写触发事件或条件。
- 支持嵌套状态。
实体关系图
ER 图用于描述数据库实体及其关系。
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses说明：
- || 表示“一”，o{ 表示“多”。
- 常见关系包括一对一、一对多、多对多。
用户旅程图
用户旅程图用于描述用户在不同阶段的体验。
journey
title 购物流程
section 浏览
搜索 : 4: 用户
商品详情 : 5: 用户
section 下单
加入购物车 : 3: 用户
支付 : 2: 用户
section 收货
确认收货 : 5: 用户说明：
- section 定义阶段。
- 每行格式 动作 : 分数 : 参与者。
架构图
架构图用于显示云或 CI/CD 部署中常见的服务和资源之间的关系。在架构图中，服务（节点）通过边连接。相关服务可以放在组中，以更好地说明它们的组织方式。
architecture-beta
group api(cloud)[API]
service db(database)[Database] in api
service disk1(disk)[Storage] in api
service disk2(disk)[Storage] in api
service server(server)[Server] in api
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db
雷达图
雷达图是一种以圆形格式绘制低维数据的简单方法。
radar-beta
axis m["Math"], s["Science"], e["English"]
axis h["History"], g["Geography"], a["Art"]
curve a["Alice"]{85, 90, 80, 70, 75, 90}
curve b["Bob"]{70, 75, 85, 80, 90, 85}
max 100
min 0树形图
树状图将层次结构数据显示为一组嵌套的矩形。树的每个分支都用一个矩形表示，然后用代表子分支的小矩形平铺。
treemap-beta
"Section 1"
"Leaf 1.1": 12
"Section 1.2"
"Leaf 1.2.1": 12
"Section 2"
"Leaf 2.1": 20
"Leaf 2.2": 25数据包图
数据包图是用于说明网络数据包的结构和内容的可视化表示。网络数据包是通过网络传输的数据的基本单位。
packet
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-255: "Data (variable length)"甘特图
甘特图展示项目任务的时间安排。
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2014-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
说明：
- done、active 表示任务状态。
- after 表示依赖前一个任务。
饼图
饼图用于展示占比关系。
pie showData
title 语言占比
"TypeScript" : 40
"Python" : 30
"Go" : 20
"其他" : 10需求图
需求图展示需求、测试及其依赖关系。
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
Git 图
Git 图模拟分支、提交和合并过程。
gitGraph
commit id: "init"
branch feature
commit
checkout main
merge feature tag: "v1.0"思维导图
思维导图以树状结构表达概念。
mindmap
root((产品))
开发
前端
后端
部署
CI/CD
云服务时间线
时间线用于展示事件的顺序。
timeline
title 发布历程
2025-07 : 规划
2025-08 : 内测
2025-09 : 公测
2025-10 : 正式版象限图
象限图用于二维坐标的分析。
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
桑基图
桑基图展示流量、能量或数据的流动。
sankey
Thermal Power of Fuel, Heat, 700
Thermal Power of Fuel, Friction and Mechanical Losses, 100
Thermal Power of Fuel, Valid Output, 550
Valid Output, Transmission Losses, 10
Valid Output, On-Wheel Power, 540
Heat, Exhaust, 300
Heat, Direct Radiation, 20
Heat, Cooling System, 380XY 图
看板图允许你创建在工作流程的不同阶段移动的任务的可视化表示。
xychart
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]看板图
看板图允许你创建在工作流程的不同阶段移动的任务的可视化表示。
kanban
Todo
[Create Documentation]
docs[Create Blog about the new diagram]
[In progress]
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
id9[Ready for deploy]
id8[Design grammar]@{ assigned: 'knsv' }
id10[Ready for test]
id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
id11[Done]
id5[define getData]
id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
id12[Can't reproduce]
id3[Weird flickering in Firefox]总结
Mermaid 的优势在于 用文字定义图形，它支持的图表种类从流程图到复杂的桑基图，涵盖了系统设计、项目管理和数据分析等常见场景。
在 Markdown 文档、Wiki 或开发文档中，Mermaid 能显著提升可读性与可视化效果。