PRD 与文档驱动开发
3.8 Mermaid流程图实战
Tip
学会用Mermaid画流程图,用可视化的方式表达复杂逻辑,让AI一眼看懂。
1. 为什么要学这个?
你试图用文字告诉AI一个复杂的业务逻辑:"用户付款后,如果是VIP,就打八折,但如果是在周五,就再减10块,哦对了,如果金额小于50就不发优惠券..."
AI看了大概率会晕,漏掉一两个条件。
想象你在导航。
- 路书(Text):"向前走500米,看到红灯右转,再走200米,不要过桥,左拐..."(一旦走错一步,后面全部作废)
- 地图(Map):一张俯瞰图,一眼看到终点,也可以看到岔路,上帝视角。
Mermaid就是代码界的地图,用最简单的文本语法生成最清晰的图表。
2. 核心概念
2.1 Mermaid - 文本生成图表
技术定义:Mermaid是一种用文本描述图表的语言,可以生成流程图、时序图、甘特图等。
就像用代码画地图。
- 优点:纯文本,AI可复制、可修改、可理解
- 缺点:Visio/截图AI无法精准识别
2.2 基础语法
语法示例(将以下代码放在```mermaid代码块中):
graph TD
A["开始"] --> B["判断条件"]
B -- "是" --> C["执行操作"]
B -- "否" --> D["结束"]
关键点:
graph TD:Top-Down(从上到下)-->:箭头["内容"]:任何中文或含空格的标签,必须用双引号包裹!
3. 实战示例
用户登录流程
把这段代码喂给AI,它瞬间就懂了你的鉴权逻辑。
代码:
graph TD
User["用户点击登录"] --> Check["检查输入格式"]
Check -- "通过" --> API["调用 /api/login"]
Check -- "非法" --> Toast["提示:格式错误"]
API -- "200" --> Token["保存Token"]
Token --> Home["跳转首页"]
API -- "401" --> Error["提示:密码错误"]
渲染效果:
graph TD
User["用户点击登录"] --> Check["检查输入格式"]
Check -- "通过" --> API["调用 /api/login"]
Check -- "非法" --> Toast["提示:格式错误"]
API -- "200" --> Token["保存Token"]
Token --> Home["跳转首页"]
API -- "401" --> Error["提示:密码错误"]
4. 什么时候用Mermaid?
| 🎯 场景 | 是否画图 | 理由 |
|---|---|---|
| "帮我把数组排个序" | ❌ 不必 | 线性简单的逻辑,文字够用 |
| "支付状态流转" | ✅ 必须 | 待支付→支付中→成功/失败/超时,状态太多容易乱 |
| "用户权限判断" | ✅ 必须 | 涉及多层if-else嵌套,画图最清晰 |
5. 避坑指南
| ❌ 不要这样做 | ✅ 应该这样做 | 为什么 |
|---|---|---|
| 用Visio/截图 | 用Mermaid纯文本 | AI无法精准识别图片里的文字逻辑 |
| 节点不加引号 | 强制引号:A["登录 (V1)"] |
A[登录 (V1)]会导致解析器崩溃 |
| 画得太复杂 | 拆分,一个图只讲一个核心流程 | 连线太多,AI也晕 |
6. 真实案例
Story
1931年,伦敦地铁图的抽象革命
1930年代前,伦敦地铁图是画在真实的地理地图上的。因为地铁线在市中心很密集,在郊区很长,这导致地图极其难看——市中心像一团乱麻,郊区像一根面条,没人能看懂怎么换乘。Harry Beck(一名电路绘图员)做了一个大胆的决定:抛弃地理真实性,把地铁线画成了电路图——只有水平线、垂直线和45度斜线,站点之间的距离被人为拉平了。这一设计最初被地铁公司拒绝,但一旦发布,立刻成为经典,让复杂的网络瞬间变得清晰易懂。
Vibe心法:用Mermaid抽象出核心逻辑——节点名称必须加双引号["Name"],一个图只讲一个流程。
7. 本章小结
- 🗺️ 一图胜千言:复杂逻辑用Mermaid画图
- 📝 纯文本:AI可复制、可修改、可理解
- ⚠️ 强制引号:节点名称必须用
["内容"]格式 - 📊 拆分流程:一个图只讲一个核心流程,不要画蜘蛛网
- 🚫 避免截图:Visio/截图AI无法精准识别