AI 时代，画流程图动嘴就够了

你有多久没打开过 Visio 或者 ProcessOn？ 现在，你只需要把脑子里的流程"说"出来，AI + Mermaid 帮你画好。

一、画图这件事，曾经有多痛

每一个做过产品或者技术文档的人，都经历过这些：

拖了半小时组件，发现箭头对不齐；调整了三遍泳道宽度，节点文字还是溢出；PRD 改了一版，图里的流程要重新手动改；团队协作时，一人一个格式，最后没人知道哪个是最新版。

画图工具越来越多，画图这件事却一直很费时间。

直到 Mermaid 遇上了 AI。

二、什么是 Mermaid？一句话说清楚

Mermaid 是一种"用代码文本描述图表"的语法。你写几行类似代码的文字，它就能渲染成流程图、时序图、ER图、甘特图……

flowchart LR    A[用户下单] --> B[支付验证] --> C[库存扣减] --> D[发货]

这段文字，能直接变成一张带箭头的流程图。

它最核心的特点只有一个：AI 极其擅长生成它。

因为 Mermaid 本质上是结构化描述语言，而 AI 最擅长的事情，就是理解结构、生成结构、修改结构。

三、核心工作流：嘴说 → AI 理解 → Mermaid 输出

整个流程极其简单：

你用自然语言描述流程       ↓AI（Claude / ChatGPT）理解语义       ↓输出 Mermaid 代码       ↓粘贴到支持 Mermaid 的工具中渲染       ↓图表生成完毕

全程不需要打开任何画图软件，不需要手动拖拽任何组件。

下面按图表类型，逐一讲实战。

四、实战图表全解析

4.1 流程图（Flowchart）——最常用

适合场景： 产品主流程、用户操作路径、审批流、系统逻辑判断

你怎么"说"：

帮我画一个电商退款流程图。用户提交退款申请后，系统判断是否在退款期内。在退款期内则进入客服审核，审核通过退款到账，审核不通过通知用户。超出退款期则直接拒绝。所有分支最终都归到流程结束节点。用 TD 布局，节点使用中文。

AI 输出的 Mermaid：

flowchart TD    A[用户提交退款申请] --> B{是否在退款期内}    B -- 是 --> C[进入客服审核]    B -- 否 --> D[拒绝申请]    C --> E{审核结果}    E -- 通过 --> F[退款到账]    E -- 不通过 --> G[通知用户]    F --> H[流程结束]    D --> H    G --> H

描述技巧：

• 说清楚"起点"和"终点"

• 明确说出每个判断节点的"是/否"两条路走向哪里

• 补充"异常流程"（如超时、失败）

• 指定布局方向（TD 上下 / LR 左右）

4.2 时序图（Sequence Diagram）——接口调用神器

适合场景： 前后端接口对接、微服务调用链、多系统协同、Agent 工作流

你怎么"说"：

帮我画一个用户登录的时序图。参与方有：用户、前端、后端API、Redis缓存、MySQL数据库。流程是：用户在前端输入账号密码，前端发送登录请求到后端；后端先查 Redis 判断是否有缓存的 session，有则直接返回 token；没有则查询 MySQL，验证成功后写入 Redis 并返回 token 给前端，前端展示登录成功。

AI 输出的 Mermaid：

sequenceDiagram    participant U as 用户    participant FE as 前端    participant API as 后端API    participant Redis    participant MySQL    U->>FE: 输入账号密码    FE->>API: 登录请求    API->>Redis: 查询 session 缓存    alt 缓存命中        Redis-->>API: 返回 session        API-->>FE: 返回 Token    else 缓存未命中        API->>MySQL: 查询用户信息        MySQL-->>API: 返回用户数据        API->>Redis: 写入 session 缓存        API-->>FE: 返回 Token    end    FE-->>U: 登录成功

描述技巧：

• 先列出"参与方"，给每个角色起个简短名字

• 用"先……再……然后……"描述顺序

• 说明有没有"条件分支"（如 if/else、成功/失败）

• 区分"请求"和"响应"——AI 会自动用实线和虚线区分

4.3 泳道图（Swimlane）——跨部门流程必备

Mermaid 本身没有专门的泳道语法，但可以用 subgraph 实现泳道效果。

适合场景： 跨部门业务流程、采购审批、工单流转、SOP 标准作业

你怎么"说"：

帮我画一个采购申请流程的泳道图，用 Mermaid subgraph 来实现泳道。参与方有三个：申请人、部门主管、采购部。流程是：申请人填写采购单提交；部门主管审批，通过则交给采购部，不通过则退回申请人修改；采购部收到后执行采购并通知申请人完成。

AI 输出的 Mermaid：

flowchart TD    subgraph 申请人        A[填写采购申请单] --> B[提交申请]        G[修改申请单]    end    subgraph 部门主管        C{审批决定}    end    subgraph 采购部        E[执行采购]        F[通知申请人完成]    end    B --> C    C -- 通过 --> E    C -- 退回 --> G    G --> B    E --> F

描述技巧：

• 明确说"用 subgraph 实现泳道"

• 列出每个泳道里包含哪些节点

• 描述泳道之间的数据流向（哪个动作触发下一个泳道的哪个步骤）

💡 进阶提示： 如果需要更精准的横向泳道，可以指定 flowchart LR 布局，subgraph 就会从左往右排列，视觉效果更接近传统泳道图。

4.4 ER 图（Entity Relationship）——数据库设计自动化

适合场景： 数据库表设计、系统建模、SaaS 权限模型

你怎么"说"：

帮我用 Mermaid ER 图设计一个 SRM 供应商管理系统的核心数据库结构。包含供应商（Vendor）、联系人（Contact）、采购合同（Contract）、合同条款（ContractItem）四张表。供应商可以有多个联系人，一个供应商可以签多份合同，一份合同可以包含多个条款。每张表给出关键字段。

AI 输出的 Mermaid：

erDiagram    VENDOR ||--o{ CONTACT : "拥有"    VENDOR ||--o{ CONTRACT : "签署"    CONTRACT ||--|{ CONTRACT_ITEM : "包含"    VENDOR {        int id PK        string name        string category        string status        date created_at    }    CONTACT {        int id PK        int vendor_id FK        string name        string phone        string email    }    CONTRACT {        int id PK        int vendor_id FK        string contract_no        date start_date        date end_date        decimal amount    }    CONTRACT_ITEM {        int id PK        int contract_id FK        string item_name        int quantity        decimal unit_price    }

4.5 状态图（State Diagram）——工单/订单状态机

适合场景： 订单状态流转、工单生命周期、智能客服对话状态、Agent 状态机

你怎么"说"：

帮我画一个工单系统的状态图。状态包括：待分配、处理中、待确认、已完成、已关闭、已撤销。新工单进来是待分配；分配给处理人后变成处理中；处理完成后变成待确认；用户确认后变成已完成；用户不确认则退回处理中重新处理；用户可以在任意未完成状态主动撤销工单；已完成的工单可以关闭。

AI 输出的 Mermaid：

stateDiagram-v2    [*] --> 待分配 : 工单创建    待分配 --> 处理中 : 分配处理人    处理中 --> 待确认 : 处理完成    待确认 --> 已完成 : 用户确认    待确认 --> 处理中 : 用户不确认，退回重处理    已完成 --> 已关闭 : 关闭工单    待分配 --> 已撤销 : 用户撤销    处理中 --> 已撤销 : 用户撤销    待确认 --> 已撤销 : 用户撤销    已完成 --> [*]    已关闭 --> [*]    已撤销 --> [*]

4.6 甘特图（Gantt）——项目排期一键生成

适合场景： 产品路线图、开发排期、迭代计划

你怎么"说"：

帮我画一个 SRM 系统 v1.0 上线的甘特图。项目从 6 月 1 日开始，分三个阶段：需求阶段（需求评审 3 天 + PRD 输出 5 天）；开发阶段（后端开发 10 天，前端开发同期进行 8 天，联调测试 4 天，后端比前端晚开始 2 天）；上线阶段（UAT 验收 3 天，正式发布 1 天）。

AI 输出的 Mermaid：

gantt    title SRM 系统 v1.0 上线计划    dateFormat  YYYY-MM-DD    section 需求阶段    需求评审         :done,    req1, 2026-06-01, 3d    PRD 输出         :active,  req2, after req1, 5d    section 开发阶段    后端开发         :         dev1, 2026-06-11, 10d    前端开发         :         dev2, 2026-06-09, 8d    联调测试         :         dev3, after dev1, 4d    section 上线阶段    UAT 验收         :         uat,  after dev3, 3d    正式发布         :         rel,  after uat,  1d

五、超级 Prompt 模板库（直接复制使用）

通用模板

请用 Mermaid 生成[图表类型]。业务描述：[用自然语言描述流程/结构]要求：1. 节点使用中文2. 包含正常流程和异常流程3. 布局方向：[TD/LR]4. 输出完整 Mermaid 代码块

PRD 转图模板

以下是我的 PRD 文档片段：[粘贴 PRD 内容]请自动提取核心业务流程，生成 Mermaid flowchart 图。要求：只保留主要节点，去掉说明性文字，判断节点用菱形。

从现有代码生成图模板

以下是我的[接口文档/代码逻辑]：[粘贴内容]请根据这段内容生成 Mermaid 时序图，参与方：[列出系统角色]

修改迭代模板

这是我已有的 Mermaid 图：[粘贴现有代码]请做以下修改：1. 在 [节点A] 和 [节点B] 之间增加一个 [新节点]2. 把 [节点C] 的文字改为 [新文字]3. 增加一条从 [节点D] 到 [节点E] 的异常路径，标注"超时重试"

六、让 AI 画得更准的五个技巧

1. 先说参与方，再说流程时序图和泳道图尤其重要，先列出所有角色，AI 才不会乱造角色。

2. 用"判断词"触发分支说"如果……则……否则……"，AI 会自动生成菱形判断节点和双分支。

3. 标注箭头上的动词"提交"、"返回"、"触发"、"通知"——这些词 AI 会直接放到箭头标签上。

4. 指明终点告诉 AI"最终所有路径汇聚到[流程结束]节点"，避免生成多个悬空终点。

5. 迭代修改比一次说完更高效先生成主流程，再说"在 XXX 节点后面加一个异常分支"，比一次性描述所有细节更精准。

七、干货资源与工具

在线渲染工具

本地开发工具

可嵌入平台

• GitHub / GitLab：代码仓库的 README 和 Issues 中原生渲染 Mermaid

• Notion：使用 Code Block 选择 Mermaid 语言即可渲染

• Confluence：通过 Mermaid Diagrams for Confluence 插件支持

• 语雀：内置 Mermaid 代码块渲染（国内团队协作首选）

• 飞书文档：支持 Mermaid 代码块渲染

官方学习资源

• Mermaid 官方文档：https://mermaid.js.org/intro/

• Mermaid 语法速查表（社区维护）：https://jojozhuang.github.io/tutorial/mermaid-cheat-sheet/

• GitHub 官方 Mermaid 指南：https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams

AI 工具推荐搭配

八、Mermaid 局限性与适用边界

Mermaid 不是万能的，清楚它的边界才能用好它：

一个原则：用 Mermaid 表达结构，用 Figma 表达视觉。 两者不冲突，各司其职。

九、结语

从"打开 Visio，找半天图形，拖了一小时，终于画完了一张图"，到"嘴上说两句，AI 秒出 Mermaid，粘贴渲染完事"——这不是懒，这是效率本质的提升。

AI 时代，思考的深度才是竞争力，重复的手工操作可以全部交出去。

画图这件事，动嘴就够了。