Mermaid 图表制作教程：用文字画出专业图表

原创已于 2025-09-30 00:00:24 修改 · 977 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#Windows用户

于 2025-09-28 23:58:54 首次发布

1. 什么是 Mermaid？ - 了解 Mermaid 的核心价值
2. 流程图制作 - 掌握最常用的图表类型
3. 时序图制作 - 展示系统交互流程
4. 甘特图制作 - 项目进度管理神器
5. 其他图表类型 - 类图、状态图、饼图等
6. 实用技巧 - 提升图表质量
7. 实践练习 - 动手制作图表
8. 总结 - 学习成果回顾

1. 什么是 Mermaid？

简单理解：Mermaid 就像一个"文字画家"，你写文字，它自动画出漂亮的图表！

为什么选择 Mermaid？

想象一下，你需要画一个流程图来说明工作流程：

传统方式（复杂）：

打开绘图软件（如 Visio、Draw.io）
拖拽各种形状
手动调整位置和连线
修改时重新绘制
保存为图片文件

Mermaid 方式（简单）：

写几行文字代码
自动生成图表
修改文字即可更新图表

Mermaid 的优势对比

方面	传统绘图工具	Mermaid
学习难度	需要学习复杂界面操作	5 分钟学会基础语法
修改图表	重新绘制整个图表	修改几个文字即可
版本控制	图片文件无法追踪变更	文字代码完美支持 Git
团队协作	需要专门的绘图软件	任何文本编辑器都能编辑
平台要求	依赖特定软件	浏览器就能渲染
文件大小	图片文件较大	文字代码很小

Mermaid 能画什么图表？

Mermaid 就像一个"万能画笔"，能画出各种专业图表：

什么时候用 Mermaid？

场景	用途	举例
写技术文档	解释系统流程	API 调用流程、数据库设计
项目管理	展示项目进度	开发计划、任务分配
产品设计	描述用户体验	用户注册流程、购物流程
软件开发	设计系统架构	类关系图、状态转换
教学培训	解释复杂概念	知识点结构、学习路径

2. 流程图制作

最实用的技能：流程图是最常用的图表类型，学会它就能画出大部分工作流程图！

什么是流程图？

流程图就是用图形来展示工作步骤的图表，比如：

用户注册流程
购物下单流程
项目开发流程
问题解决流程

流程图的基本语法

最简单的流程图

语法解释：

graph TD：创建一个从上到下的流程图
A[步骤1]：创建一个方框节点，内容是"步骤 1"
-->：箭头，表示流程方向

不同的节点形状

形状	代码写法	样子	什么时候用
方框	`[文字]`	▭	普通步骤
圆角框	`(文字)`	▭	开始/结束
菱形	`{文字}`	◇	需要判断
圆形	`((文字))`	○	重要节点

不同的箭头样式

| 箭头样式 | 代码写法 | 样子 | 什么时候用 |
| -------------- | -------- | ---- | ---------- | ---- | -------- |
| 实线箭头 | --> | → | 正常流程 |
| 虚线箭头 | -.-> | ⇢ | 可选流程 |
| 粗线箭头 | ==> | ➤ | 重要流程 |
| 带标签箭头 | --> | 标签 | | → 是 | 需要说明 |

实际例子：用户登录流程

让我们画一个用户登录的流程图，这是最常见的应用场景：

代码写法：

```mermaid
graph TD
    A[用户访问网站] --> B{是否已登录?}
    B -->|是| C[进入主页]
    B -->|否| D[显示登录页面]
    D --> E[用户输入账号密码]
    E --> F{验证成功?}
    F -->|是| G[登录成功]
    F -->|否| H[显示错误信息]
    H --> D
    G --> C
    C --> I[结束]
```

实际效果：

代码解释：

{是否已登录?}：菱形表示需要判断
-->|是|：箭头上的标签，说明判断结果
流程可以循环（错误后重新输入）

另一个例子：购物流程

再来看一个电商购物的流程图：

这个流程图的亮点：

可以循环浏览商品
可以重复选择支付方式
每个判断都有明确的标签

画流程图的技巧

从简单开始：先画主要流程，再添加细节
逻辑要清晰：确保每个步骤都有明确的目的
合理使用判断：用菱形表示需要做决定的地方
添加说明：在箭头上加标签，说明判断结果
避免太复杂：如果流程太复杂，可以分成多个小流程图

3. 时序图制作

系统交互图：时序图用来展示不同系统之间是如何"对话"的，就像聊天记录一样！

什么是时序图？

时序图就是展示系统之间"对话"的图表，比如：

用户登录时，前端和后端怎么交互
支付时，各个系统如何协作
API 调用时，数据如何传递

时序图的基本语法

最简单的时序图

语法解释：

sequenceDiagram：创建一个时序图
participant A as 用户：定义参与者，A 是代号，用户是显示名称
A->>B: 发送请求：A 向 B 发送消息

参与者的定义方式

写法	说明	例子
`participant A`	简单定义	`participant User`
`participant A as 中文名`	带中文名	`participant U as 用户`
`actor A`	角色定义	`actor Customer`

不同的消息类型

消息类型	代码写法	样子	什么时候用
发送消息	`A->>B: 消息`	→	正常交互
返回消息	`A-->>B: 返回`	⇢	回复结果
自己调用自己	`A->>A: 处理`	↻	内部处理

实际例子：用户登录时序图

让我们看看用户登录时，各个系统是怎么"对话"的：

代码写法：

```mermaid
sequenceDiagram
    participant U as 用户
    participant F as 前端页面
    participant B as 后端服务器
    participant D as 数据库

    U->>F: 输入用户名和密码
    F->>B: 发送登录请求
    B->>D: 查询用户信息
    D-->>B: 返回用户数据
    B->>B: 验证密码是否正确
    B-->>F: 返回登录结果
    F-->>U: 显示登录状态
```

实际效果：

时序图解释：

用户在前端输入账号密码
前端把信息发送给后端
后端去数据库查询用户信息
数据库返回用户数据
后端验证密码是否正确
后端告诉前端登录结果
前端显示给用户看

画时序图的技巧

按时间顺序排列：从上到下表示时间先后
参与者要明确：每个角色都要有清楚的名称
消息要具体：说明具体做了什么
区分请求和响应：用不同的箭头样式
不要太复杂：重点突出主要的交互过程

4. 甘特图制作

项目管理神器：甘特图用来展示项目进度，一目了然地看到什么时间做什么事！

什么是甘特图？

甘特图就是项目进度表，可以清楚看到：

什么时候开始做什么任务
每个任务需要多长时间
哪些任务可以同时进行
项目的整体进度

甘特图的基本语法

最简单的甘特图

语法解释：

gantt：创建一个甘特图
title：图表标题
dateFormat：日期格式
section：任务分组
任务名称 :状态, 任务ID, 开始日期, 结束日期

任务状态说明

状态	代码写法	颜色	什么时候用
已完成	`done`	绿色	任务已经完成
进行中	`active`	蓝色	任务正在进行
计划中	不写状态	灰色	还没开始的任务
重要节点	`milestone`	橙色	关键里程碑

实际例子：网站开发项目

让我们看看一个完整的网站开发项目甘特图：

这个甘特图的特点：

绿色：已经完成的任务
蓝色：正在进行的任务
灰色：还没开始的任务
橙色：重要的里程碑

画甘特图的技巧

合理分组：把相关任务放在同一个 section
设置里程碑：标记重要的时间节点
考虑并行：有些任务可以同时进行
留出缓冲时间：不要安排得太紧
定期更新：根据实际情况调整进度

5. 其他图表类型

更多选择：除了流程图、时序图、甘特图，Mermaid 还有很多其他图表类型！

类图（面向对象设计）

类图用来展示代码中的类和它们的关系：

状态图（状态变化）

状态图展示对象的状态变化过程：

饼图（数据比例）

饼图用来展示数据的比例关系：

6. 实用技巧

提升效率：掌握这些技巧，让你的 Mermaid 图表更专业！

美化图表

深色主题

自定义颜色

Typora 使用技巧

基于 Typora 1.6.7 + Windows 11 的实用技巧：

功能	操作方法	说明
快速插入图表	`Ctrl+Shift+M`	快速创建 Mermaid 代码块
实时预览	自动显示	无需切换模式
导出图表	右键菜单	导出为图片分享
复制代码	`Ctrl+C`	复制图表代码