Mermaid 入门教程
Mermaid 是一种用纯文本描述图表的语言（Diagram as Code）。你只需编写简单的语法，即可生成流程图、时序图、甘特图等，并导出 SVG / PNG。本教程覆盖最常用的语法与示例，可直接复制到左侧编辑器中试用。
1. 流程图（Flowchart）
用 graph 或 flowchart 声明方向：TD（上下）、LR（左右）。节点用方括号 []，判断用花括号 {}。
graph TD
A[开始] --> B{是否通过?}
B -->|是| C[执行]
B -->|否| D[结束]
C --> D
预览
2. 时序图（Sequence Diagram）
描述对象之间的交互顺序，participant 定义参与者，箭头表示消息。
sequenceDiagram
participant 用户
participant 系统
用户->>系统: 登录请求
系统-->>用户: 返回 Token
预览
3. 甘特图（Gantt）
用于项目排期，dateFormat 指定日期格式，section 分组任务。
gantt
title 项目计划
dateFormat YYYY-MM-DD
section 开发
需求分析 :a1, 2025-01-01, 7d
编码实现 :a2, after a1, 10d
预览
4. 类图（Class Diagram）
用 classDiagram 描述类、属性、方法及继承关系。
classDiagram
class Animal {
+String name
+makeSound()
}
class Dog {
+bark()
}
Animal <|-- Dog
预览
5. 状态图（State Diagram）
用 stateDiagram-v2 描述状态迁移，[*] 表示起始与终止。
stateDiagram-v2
[*] --> 待处理
待处理 --> 进行中: 开始
进行中 --> 已完成: 完成
已完成 --> [*]
预览
6. ER 图（Entity Relationship）
用 erDiagram 描述实体及关系，||--o{ 等符号表示基数。
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
CUSTOMER {
string id
string name
}
预览
7. 饼图（Pie Chart）
饼图适合展示占比，每项格式为 "标签" : 数值。
pie title 市场份额
"产品 A" : 42
"产品 B" : 28
"其他" : 30
预览
8. 思维导图（Mindmap）
用 mindmap 表达层级结构，缩进表示子节点。
mindmap
root((产品规划))
功能
用户管理
技术
前端
后端
预览
9. 时间线（Timeline）
timeline 按时间顺序列出事件，适合里程碑展示。
timeline
title 项目里程碑
2025-01 : 立项
2025-02 : 设计评审
2025-03 : 开发完成
2025-04 : 上线发布
预览
10. 用户旅程图（User Journey）
journey 描述用户体验步骤，数字表示满意度（1–5）。
journey
title 用户购票旅程
section 浏览
打开网站: 5: 用户
搜索车次: 3: 用户
section 下单
选择座位: 4: 用户
支付订单: 2: 用户, 系统
预览
11. Git 分支图（Git Graph）
gitGraph 可视化分支、提交与合并历史。
gitGraph
commit id: "init"
branch develop
checkout develop
commit id: "feat-A"
checkout main
merge develop id: "release-1.0"
预览
12. 象限图（Quadrant Chart）
quadrantChart 将事项映射到四象限，坐标 [x, y] 范围 0–1。
quadrantChart
title 需求优先级矩阵
x-axis 低影响 --> 高影响
y-axis 低紧急 --> 高紧急
quadrant-1 立即处理
quadrant-2 计划安排
quadrant-3 可延后
quadrant-4 观察评估
缺陷修复: [0.8, 0.9]
新功能: [0.7, 0.5]
预览
13. 块图（Block Diagram）
block-beta 用块与箭头描述系统模块或数据流。
block-beta
columns 3
A["输入"] B["处理"] C["输出"]
A --> B
B --> C
预览
14. 桑基图（Sankey）
桑基图展示流量分配。以 sankey 开头，下一行起每行写：来源,目标,数值（CSV，行首勿缩进）。节点名建议使用英文或拼音；当前 Mermaid 版本对中文节点名支持不完善。
sankey
Visit,Signup,5
Visit,Leave,20
Signup,Trial,4
Trial,Pay,3
预览
15. 需求图（Requirement Diagram）
requirementDiagram 描述需求、系统元素及满足关系。
requirementDiagram
requirement user_login {
id: 1
text: "支持账号密码登录"
risk: medium
verifymethod: test
}
element auth_module {
type: system
}
auth_module - satisfies -> user_login
预览
16. 实用技巧
在本站编辑器中可切换主题、开启手绘风格、滚轮缩放预览，并导出 SVG / PNG。建议先用模板下拉快速加载示例，再逐步修改。