探索Mermaid图：常见类型与示例（附源代码）
在编写技术文档、设计系统或展示流程时，图表往往比文字更直观。而就是一款强大的图表绘制工具，它允许你使用简单的文本描述来生成图表，无需拖拽绘图，特别适合嵌入 Markdown、Wiki 或代码注释中。本文将介绍 Mermaid 支持的几种常见图表类型，展示示例代码及其渲染效果，并说明每种类型可以绘制哪些具体子类型。为了方便你直接复制使用，每个示例图下方都附带了对应的 Mermaid 源代码。
在编写技术文档、设计系统或展示流程时，图表往往比文字更直观。而 Mermaid 就是一款强大的图表绘制工具，它允许你使用简单的文本描述来生成图表，无需拖拽绘图，特别适合嵌入 Markdown、Wiki 或代码注释中。本文将介绍 Mermaid 支持的几种常见图表类型，展示示例代码及其渲染效果，并说明每种类型可以绘制哪些具体子类型。为了方便你直接复制使用，每个示例图下方都附带了对应的 Mermaid 源代码。
1. 流程图 (Flowchart)
流程图是最常用的图表之一，用于展示算法、工作流程或决策过程。Mermaid 的流程图语法非常灵活，支持节点、边、子图以及多种形状。
可以绘制的具体图类型：
- 基本流程图（顺序、分支、循环）
- 带有泳道的流程图（通过
&连接多个参与者） - 带有链接或点击事件的交互式流程图
- 使用不同节点形状（矩形、菱形、圆形等）
示例： 一个简单的用户登录流程。
源代码：
graph TD
A[开始] --> B{输入用户名和密码}
B -->|验证成功| C[登录成功]
B -->|验证失败| D[显示错误提示]
D --> B
C --> E[结束]
渲染效果：
该图以“开始”节点出发，经过“输入用户名和密码”的判断节点。如果验证成功，流向“登录成功”并结束；如果失败，则流向“显示错误提示”，然后返回重新输入，形成循环。
2. 时序图 (Sequence Diagram)
时序图用于描述对象之间按时间顺序的交互，特别适合展示系统内部的消息传递或业务流程。
可以绘制的具体图类型：
- 基本消息序列
- 激活条（表示对象处于激活状态）
- 循环、条件、并行片段
- 参与者间的创建和销毁
示例： 用户请求重置密码的简单时序。
源代码：
sequenceDiagram
participant User as 用户
participant Web as 前端
participant API as 后端
participant DB as 数据库
User->>Web: 点击“忘记密码”
Web->>API: POST /reset-password
API->>DB: 验证邮箱存在
DB-->>API: 存在
API-->>Web: 发送重置邮件
Web-->>User: 提示“邮件已发送”
渲染效果：
图中展示了用户、前端、后端、数据库四个参与者，从上到下按时间顺序传递消息。实线箭头表示请求，虚线箭头表示响应，清晰呈现了交互步骤。
3. 甘特图 (Gantt Diagram)
甘特图是项目管理中常用的工具，用于展示任务的时间安排、进度和依赖关系。
可以绘制的具体图类型：
- 任务与子任务
- 里程碑
- 任务依赖（通过
after或crit标记） - 不同阶段的分组
示例： 一个简单项目开发计划。
源代码：
gantt
title 项目开发甘特图
dateFormat YYYY-MM-DD
section 需求分析
需求调研 :a1, 2023-10-01, 7d
需求评审 :a2, after a1, 3d
section 开发阶段
数据库设计 :b1, after a2, 5d
后端开发 :b2, after b1, 10d
前端开发 :b3, after b1, 8d
section 测试与发布
集成测试 :c1, after b2, 5d
部署上线 :c2, after c1, 2d
渲染效果：
图中有多个任务条，每个任务有起止日期，可以清楚看到任务之间的前后依赖关系（例如“需求评审”在“需求调研”之后）。不同部分用颜色区分，便于跟踪进度。
4. 类图 (Class Diagram)
类图是面向对象设计中的核心图表，用于展示类、接口以及它们之间的关系（继承、关联、聚合等）。
可以绘制的具体图类型：
- 类与抽象类
- 接口与枚举
- 关系：继承、实现、关联、聚合、组合、依赖
- 多重性标记（如 1, 0…*）
示例： 一个简单的用户与订单模型。
源代码：
classDiagram
class User {
-int id
-string name
+login()
+logout()
}
class Order {
-int orderId
-float amount
+pay()
}
User "1" --> "0..*" Order : 创建
class Payment {
<<interface>>
+process()
}
Order ..|> Payment : 实现
渲染效果：
图中包含三个类，User 和 Order 之间是一对多关联（一个用户可创建多个订单）。Order 实现了 Payment 接口，用虚线箭头表示实现关系。类内部列出了属性和方法，可见性用 -（私有）和 +（公有）表示。
5. 状态图 (State Diagram)
状态图描述一个对象在其生命周期内的状态变化以及触发变化的事件。
可以绘制的具体图类型：
- 简单状态
- 复合状态（嵌套状态）
- 并行状态
- 历史状态
示例： 订单的状态流转。
源代码：
stateDiagram
[*] --> 待支付
待支付 --> 已支付 : 支付成功
待支付 --> 已取消 : 超时未付
已支付 --> 发货中 : 商家发货
发货中 --> 已完成 : 确认收货
已完成 --> [*]
已取消 --> [*]
渲染效果：
图从起点 [*] 进入“待支付”状态。根据事件（支付成功、超时等）转移到不同状态，最终到达终点。箭头上的文字表示触发状态转移的事件。
6. 实体关系图 (Entity Relationship Diagram)
实体关系图（ER图）用于数据库设计，展示实体、属性以及实体间的联系。
可以绘制的具体图类型：
- 实体（矩形）
- 属性（椭圆，但Mermaid中通常直接列在实体中）
- 关系（菱形，Mermaid中用关系标记）
- 基数（1:1, 1:N, N:M）
示例： 学生和课程的选课关系。
源代码：
erDiagram
STUDENT ||--o{ ENROLLMENT : has
COURSE ||--o{ ENROLLMENT : includes
STUDENT {
int studentId PK
string name
string major
}
COURSE {
int courseId PK
string title
int credits
}
ENROLLMENT {
int studentId FK
int courseId FK
date enrollDate
string grade
}
渲染效果：
图中展示了三个实体：STUDENT、COURSE、ENROLLMENT。STUDENT 和 ENROLLMENT 之间是一对多关系（||--o{），表示一个学生可以有多个选课记录。COURSE 和 ENROLLMENT 同样是一对多。每个实体下方列出了属性，并标注了主键（PK）和外键（FK）。
7. 用户旅程图 (User Journey Diagram)
用户旅程图用于描绘用户在使用产品或服务过程中的体验、任务和情绪变化。
可以绘制的具体图类型：
- 按阶段划分任务
- 用户任务与评分
- 情绪曲线（通过数字表示满意度）
示例： 在线购物的用户旅程。
源代码：
journey
title 在线购物体验
section 浏览商品
搜索商品: 3: 用户
查看详情: 4: 用户
section 下单支付
加入购物车: 5: 用户
填写地址: 2: 用户
支付: 4: 用户
section 收货评价
收货: 5: 用户
评价: 3: 用户
渲染效果：
图按任务阶段划分，每个任务后面有用户评分数（1-5），分数越高表示越满意。Mermaid 会根据评分生成不同长度的颜色条，直观展示用户情绪变化。
8. 饼图 (Pie Chart)
饼图用于展示数据的比例分布，简单直观。
可以绘制的具体图类型：
- 基本比例饼图
- 可标注图例和数据
示例： 某网站流量来源分布。
源代码：
pie
title 流量来源占比
"直接访问" : 45
"搜索引擎" : 30
"外部链接" : 15
"社交媒体" : 10
渲染效果：
该饼图将数据分成四块，每块大小对应数值比例，并标注名称和百分比。
9. Git 图 (Git Graph)
Git 图用于展示 Git 分支、提交和合并的历史，适合版本控制可视化。
可以绘制的具体图类型：
- 分支与合并
- 提交节点
- 标签
- 当前分支高亮
示例： 一个简单的 Git 分支合并历史。
源代码：
gitGraph
commit id: "Initial commit"
branch develop
checkout develop
commit id: "Add feature A"
commit id: "Add feature B"
checkout main
merge develop id: "Merge develop"
commit id: "Hotfix"
渲染效果：
图中展示了主分支（main）和开发分支（develop）的演变。从 main 创建 develop，在 develop 上提交两次，然后合并回 main，最后在 main 上又提交一次热修复。节点旁可以显示提交 ID 或信息。
Mermaid 还支持更多图表类型，如需求图、思维导图、时间线图、C4 模型等。掌握这些图表的基本语法，可以让你在文档中快速生成专业、清晰的图示，极大地提高沟通效率。赶快在你的下一个项目或笔记中试试吧！
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
10
0- 0
已为社区贡献3条内容
所有评论(0)