AI 辅助生成 Mermaid 流程图

文章目录

- 背景
- Mermaid
- [使用 AI 编写 Mermaid](#使用 AI 编写 Mermaid)
- 应用

背景

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

Mermaid

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

Mermaid 流程图核心特点

简单直观
- 使用纯文本描述，语法类似自然语言。
- 无需图形界面，直接嵌入代码即可生成图表。
常用图表支持
- 流程图（Flowchart）：描述步骤和决策逻辑。
- 时序图（Sequence Diagram）：展示交互时序（如支付流程例子）。
- 其他：类图、状态图、甘特图等。
跨平台兼容
- 支持 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 流程图（非图片格式）：

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

对应的 mermaid 文本：

复制代码

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

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

对应的文本：

复制代码

sequenceDiagram
    participant 用户
    participant 客户端
    participant 服务器

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

Cookie+Session鉴权
用户客户端服务器输入用户名和密码发送登录请求 (用户名, 密码) 生成 Session ID, 存储 Session 数据 Session 数据存储在服务器如内存或数据库返回 Cookie (包含 Session ID) 浏览器自动存储 Cookie 发起操作请求发送请求 (自动携带 Cookie: Session ID) 根据 Session ID 查询 Session 数据需查数据库或内存验证 Session 有效性返回操作结果用户客户端服务器