在 Markdown 文档里使用 Markdown 语法就能画出简单的流程图、时序图、甘特图，不需要安装任何额外第三方插件，对于一些轻量级的使用场景非常方便。普通的代码块 + 编程语言选择 mermaid。
流程图
记忆点：
- flowchart LR 开始
- 使用 –> 表示流程
- A[名称] 表示节点
- D{条件} 表示分支
- 使用 |text| 表示流程说明
flowchart LR
A[起床⏰] --> |8点起床| B[洗漱🪥]
B --> |每天都要吃| C[吃早饭🍳]
C --> D{周末？📅}
D --> |是| E[上班💼]
D --> |否| F[打羽毛球🏸]
E --> |下午六点| G[回家🏠]
F --> |下午3点| G
源码：
1 | flowchart LR |
时序图
记忆点：
- 使用 sequnceDiagram 开始
- 使用 ->> 表示流程
- 使用冒号表示流程说明
- loop - end 表示循环
sequenceDiagram title 时序图 前端页面 ->> 后端实例: 发送消息 后端实例 ->> 数据库: 消息持久化 数据库 ->> 消息队列: 定时任务扫描并投递 loop 定时任务扫描并投递 数据库 ->> 消息队列: 循环扫描并投递 end 消息队列 ->> 接收方所在后端实例: 接收方所在实例消费消息 接收方所在后端实例 ->> 接收方前端页面: 将消息传输到接收方页面
源码：
1 | sequenceDiagram |
甘特图
记忆点：
- 使用 gantt 开始
gantt title 某产品生产周期 section 工程计划 任务1 : done, des1, 2026-01-01,2026-01-05 任务2 : active, des2, after des1, 2d 任务3 : des3, after des2, 1d 任务4 : des4, after des3, 3d 任务5 : active, 2026-01-02, 2.5d
源码：
1 | gantt |
状态图
记忆点：
- 使用 stateDiagram-v2 开始
- 使用
[*]表示开始结束 - 使用 –> 表示流程
stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
源码：
1 | stateDiagram-v2 |
饼图
记忆点：
- 使用 pie 开始
- 冒号加数字表示某一项的数值
比利是自动计算出来的，只需填原始数据即可。
pie "OpenAI": 240 "Anthropic": 180 "Gemini": 192 "Other": 100
源码：
1 | pie |
git 分支图
gitGraph commit branch dev commit checkout dev branch feat checkout feat commit commit checkout dev merge feat commit commit checkout main merge dev commit
源码
1 | gitGraph |
柱状图
柱状图由甘特图特殊处理而来，具体来说在甘特图的基础上：
- 设置 dateFormat X
- 设置 axisFormat %s
gantt
title 地产销售量
dateFormat X
axisFormat %s
section 小张
100 : 0, 100
section 小王
36 : 0, 36
section 小李
34 : 0, 34
section 麻子
9 : 0, 9
section 六子
5 : 0, 5
源码：
1 | gantt |
参考资料
GitHub仓库 上就有完整的例子。