AI 辅助生成 Mermaid 流程图

背景

• 在 markdown 文档中虽然可以插入图片，但是也需要管理图片，一旦图片位置变了，文档中的图片就无法显示。
• 图片占用空间较大，对于在线文档，为了加载速度，能不使用图片就不使用。
• Mermaid 流程图是一个非常好的工具，基于文本快速绘制各种图表（如流程图、时序图、甘特图等）。
• 人工手动编写 Mermaid 有点小繁琐，但是借用 AI 之力，绘制流程图效率非常高。

Mermaid

Mermaid 是一种基于文本的图表生成工具，可以通过简单的语法快速绘制各种图表（如流程图、时序图、甘特图等）。它易于编写、可嵌入 Markdown，并支持实时渲染，非常适合文档编写和技术绘图。

Mermaid 流程图核心特点

1. 简单直观
   • 使用纯文本描述，语法类似自然语言。
   • 无需图形界面，直接嵌入代码即可生成图表。
2. 常用图表支持
   • 流程图（Flowchart）：描述步骤和决策逻辑。
   • 时序图（Sequence Diagram）：展示交互时序（如支付流程例子）。
   • 其他：类图、状态图、甘特图等。
3. 跨平台兼容
   • 支持 GitHub、GitLab、VS Code、Obsidian 等平台的 Markdown 渲染。

为什么用 Mermaid？

• 效率高：改代码比拖拽图形更快。
• 版本友好：文本格式便于 Git 管理。
• 轻量化：无需依赖复杂工具（如 Visio）。

使用 AI 编写 Mermaid

很早就了解过 Mermaid，但是由于都需要自己手动编写文本，还是有些繁琐和困难，而且往往自己编写的效果不如自己想象的那么好。

借助 AI，将现有的图片格式的流程图丢给 AI 工具，让它根据图片生成 Mermaid 流程图，或者我描述流程内容，让它生成流程图，大大节省了时间和精力。

目前用来生成 Mermaid 的 AI 工具有：Claude、Gemini、Grok、Deepseek、Chatgpt，为啥要用这么多呢？

同样的一张流程图，丢给不同的 AI 工具，生成的 Mermaid 图，往往不一样，特别是流程稍微复杂一点。

于是我集众多 AI 工具之力，第一版先得到一个预期结构符合的结果，将这个结果，也就是生成的 Mermaid 文本，分别再输入给 AI 工具，不断优化和调整局部。

应用

下面是3张 AI 生成的 Mermaid 流程图（非图片格式）：

下单支付流程

对应的 mermaid 文本：

sequenceDiagramparticipant 用户participant 前端participant 服务端participant 微信后端前端->>服务端: 1.创建订单前端->>服务端: 2.提交订单前端->>服务端: 3.支付下单服务端-->>前端: 4.返回支付二维码地址前端->>服务端: 5.前端轮询查询订单状态前端->>前端: 6.前端将支付二维码地址转为二维码图形用户->>前端: 7.用户扫码用户->>微信后端: 7.用户发起支付微信后端->>服务端: 8.商城回调接口服务端->>服务端: 9.服务器接收并更新订单信息状态Note over 前端: 二维码包含商户信息、订单信息以及商城回调地址

token鉴权

对应的文本：

sequenceDiagramparticipant 用户participant 客户端participant 服务器用户->>客户端: 输入用户名和密码客户端->>服务器: 发送登录请求 (用户名, 密码)服务器-->>客户端: 返回 Token (包含身份信息和有效期)Note right of 服务器: Token 是加密字符串<br>包含用户身份信息<br>服务器不存储状态客户端->>客户端: 存储 Token (如 LocalStorage)用户->>客户端: 发起操作请求客户端->>服务器: 发送请求 (Header: Authorization: Bearer Token)服务器->>服务器: 验证 Token (解密, 检查有效期)Note right of 服务器: 无需查数据库<br>直接验证 Token服务器-->>客户端: 返回操作结果

Cookie+Session鉴权