程序员提效指南：AI + Mermaid 告别“画图”苦难

雮尘
87 阅读5分钟

导读

在编写概要设计（HLD）时，流程图和时序图的绘制往往占据了程序员大量的时间。本文将探讨如何通过 “AI + Diagram as Code（图表即代码）” 的模式，将绘图效率提升 60%~90%。

正文

1. 传统手动绘图的“三座大山”

为什么手动画图（Visio, Draw.io 等）总是让人心累？

  • 认知负荷与逻辑震荡： 绘图是思维的具象化。需求不透彻或异常边界考虑不足时，经常“边画边改”。这种逻辑的不确定性在手动工具中表现为反复的擦除与重构，变成了低效的试错。

  • 工具摩擦：

    • 琐碎的样式调整： 耗费大量精力在对齐线条、统一方框尺寸、切换虚实线及调整箭头上。
    • 时序图的“牵一发而动全身”： 在时序图中插入一个逻辑分支，往往需要手动平移后续所有的生命线。这种缺乏自动布局能力的交互极其消耗精力。

  • 需求变更（沉没成本）： 需求变更是“治好低血压”的特效药。花费数小时打磨出的严丝合缝的精美图表，在小小的改动面前往往面临全盘作废，原本的排版精力化为泡影。

2. 破局之道：Diagram as Code (代码化绘图)

与其手动拖拽，不如通过 Mermaid 或 PlantUML 这种基于文本的工具来编写图表。

2.1 案例展示：Mermaid 流程图

代码

graph TD
    A[Start] --> B{Is it?};
    B -->|Yes| C[OK];
    C --> D[Rethink];
    D --> B;
    B ---->|No| E[End];

显示效果

graph TD
    A[Start] --> B{Is it?};
    B -->|Yes| C[OK];
    C --> D[Rethink];
    D --> B;
    B ---->|No| E[End];

2.2 语法解析

语法元素说明
graph TD这声明了图表的类型和方向。graph表示这是一个流程图，TD代表“Top Down”，意味着图表的主体流程将从上到下布局。
A[Start] --> B{Is it?};A[Start] : 定义一个ID为A的节点，其内部显示的文本为Start。
[]表示这个节点是普通的矩形。
--> : 这是一个实线箭头，用于连接两个节点。
B{Is it?} : 定义一个ID为B的节点，其内部显示的文本为Is it?。
{}表示这个节点是菱形，通常用于表示判断、决策或条件分支。
B -->|Yes| C[OK];从节点B指向节点C的箭头。-->|Yes|表示在箭头上添加一个标签，标签文本为Yes。这说明了当决策B的结果为“是”时，流程的走向。
C[OK]: 定义一个ID为C的矩形节点，显示文本为OK。
C --> D[Rethink];从节点C指向节点D的箭头。
D[Rethink]: 定义一个ID为D的矩形节点，显示文本为Rethink。
D --> B;从节点D指回节点B的箭头。这一步非常关键，它创建了一个循环：在“重新思考”之后，流程会返回到最初的决策点B，从而形成一个闭环，直到有新的条件打破它。
B ---->|No| E[End];从节点B指向节点E的箭头。---->是一个更长的箭头，在渲染效果上可能与-->略有不同，但在此处的作用基本相同。箭头上的标签为No，表示当决策B的结果为“否”时，流程结束。
E[End]: 定义一个ID为E的矩形节点，显示文本为End。

2.3 局限性

尽管“代码化”省去了布局烦恼，但学习成本依然存在。团队切换到这种模式通常需要一定的培训成本和语法记忆负担。

3. 终极方案：AI + Mermaid 极速出图

通过 AI，我们可以跳过学习语法的阶段，直接使用自然语言驱动绘图。

3.1 使用案例

假设现在有一个关于设备激活的需求：

第一步：向 AI 描述需求（Prompt）

“帮我画一张激活流程时序图。角色：中控前端、中控后端、小程序端、云端。

流程：用户在前端点击‘立即激活’ -> 跳转扫码页 -> 用户微信扫码 -> 发送报文给云端 -> 云端下发状态给后端 -> 后端通知前端成功 -> 前端跳转登录页。

请使用 Mermaid 格式输出。”

第二步：AI 生成代码并预览

AI 会自动生成如下代码，你只需将其粘贴至支持 Markdown 的工具（如 Obsidian, VS Code, 语雀）即可即时预览。

程式碼片段

sequenceDiagram
    autonumber
    actor User as 用户
    participant FE as 中控前端
    participant BE as 中控后端
    participant MP as 小程序端 (微信)
    participant Cloud as 云端

    User->>FE: 点击“立即激活”按钮
    FE->>FE: 跳转至微信扫码激活页面
    User->>MP: 使用微信扫码
    MP->>Cloud: 发送激活报文
    Cloud->>BE: 下发激活状态
    BE-->>FE: 通知激活成功
    FE->>FE: 自动跳转到登录页面

4. 为什么这是最优解？

  1. 后期维护极简：

    • 流程修改： 直接把旧 Mermaid 代码丢给 AI，说：“在第三步增加一个权限校验”，AI 自动更新代码。
    • 需求重构： 重新输入提示词，几秒钟获得新图。

  2. 版本控制友好： Mermaid 是纯文本，可以像代码一样提交到 Git，方便查看历史变更（Diff）。

  3. 格式建议： 强烈建议统一使用 Mermaid。它是目前 Web 端渲染支持最广的标准，且与 Markdown 生态完美契合。

互动话题

  • 你现在写概要设计是怎么写的，有更好的方式分享吗？
  • 如果你找到了一个开发提效的大杀器，会和团队分享吗，还是偷偷使用？

欢迎在评论区讨论。

avatar
文章
阅读
粉丝