59.3k Stars 的 diagram-design 实战：接入 WorkBuddy，让 AI 按 4px 网格自动出架构图

一、背景：投标方案卡在一张业务架构图上

不是你的方案不够好，是你画的流程图太像草稿。

昨天我熬夜帮学员改投标方案，文字逻辑理顺了，卡在业务架构图上------手动拉框对齐，直接折腾到半夜。后来我把 GitHub 上 59.3k stars 的开源项目 cathrynlavery/diagram-design，装进了腾讯出的 AI 办公工作台 WorkBuddy $2, 3$ ，再配合豆包和腾讯元宝做文本脱敏，一会儿工夫，一张对齐到 4px 网格的专业架构图就出来了 $2, 3$ 。

先交代下背景，我是小虎AI，做过两年 AI 培训，带过几千位学员。说实话，以前每次给客户出方案，我心里都发怵。业务流程在脑子里明明很清楚，可一打开画图软件，光是调框大小、对齐箭头、配颜色，两个小时就没了。好不容易画完发过去，客户一句「再加个节点」，整个版面全乱，当场想摔鼠标。

今天不讲虚的，手把手带你把这套不用手动拉线的流水线跑通，文末附上「3 个即插即用画图提示词模板」，抄走就能用。

二、问题：为什么让 AI 画图总是拿不出手

很多人试过让 AI 写 Mermaid 代码，或者直接生图，结果呢？

要么字糊成一团；
要么配色像上个世纪的网页；
放进投标书里一眼假。

直到我看到了 Cathryn Lavery（LittleMight）开源的 diagram-design 项目，主页在 diagramdesign.dev $1, 2$ 。截至 10 月 26 日，它在 GitHub 上已经拿到 59.3k stars $2$ 。

三、方案：一套直接装在 AI Agent 肚子里的排版设计规范

先说清楚它是什么。这根本不是一个让你注册充值的画图网站，它是一套直接装在 AI Agent 肚子里的「排版设计规范」 $5$ 。

以前我们自己画图，全凭肉眼对齐，阴影乱加，字号随缘。用上 diagram-design 之后，完全是另一回事。它内置了 45 种对齐到 4px 坐标网格的 HTML 加内联 SVG 模板 $2$ ，全部采用 1px 细线和零阴影设计，连配色都过了 WCAG-AA 对比度验证 $2$ 。

在我看来，这就好比你请了个有强迫症的资深视觉设计师坐旁边：你只管报业务逻辑，他负责拿尺子量着像素帮你画框。

3.1 支持的图表类型

说实话我没想到，它能画的远不止普通流程图：

架构图、架构差异图、时序图、状态机、ER 数据模型、时间线全都能出 $1, 6$ ；
泳道图、象限图、雷达图、甘特图、桑基图、鱼骨图也都不在话下 $1, 6$ ；
甚至还有 Wardley 地图、看板、用户旅程图、部署图、UML 类图 $1, 6$ 。

做完直接导出 HTML、SVG 或者 PNG 放进方案。你以前画了一半的 .drawio、Mermaid 和 .excalidraw，还能导进去重新排版 $6$ 。

3.2 运行形态与版本

看到这你可能会问，GitHub 上的东西是不是得敲一堆代码？

我有十年以上代码开发经验，但我教老板和职场人用 AI，原则就一条：能点鼠标解决的绝不让你背命令。

diagram-design 本身是一个 AI Agent 技能，各处标注的版本信息如下 $1, 6$ ：

信息来源	版本
GitHub 仓库 .claude-plugin/plugin.json 正文	2.6.136
同页摘要	2.6.120
SKILL.md 元数据	2.6

它支持放进 OpenCode、Claude Code、Codex、Cursor、GitHub Copilot 里跑 $2$ 。

3.3 推荐搭配：WorkBuddy 工作台

如果你平时不用这些编程工具，我的建议很直接：搭配腾讯出品的全场景 AI 办公工作台 WorkBuddy 一起用，官网在 www.workbuddy.cn 或 www.workbuddy.ai $3, 4$ 。

你想想看，很多国内老板电脑里装的都是日常办公软件。WorkBuddy 的能力清单如下 $3, 4$ ：

能自主规划、调用工具、生成文件；
直接打通了微信、企微、腾讯文档和腾讯会议；
不管你是 Mac、Windows、Linux、鸿蒙电脑，还是手机小程序都能打开。

四、实操：两步装好，直接派活

4.1 安装技能

操作其实就两步，照着敲一行命令，就能把技能挂载好。

打开你本地支持 Skill 的 AI 工作台终端，输入这行安装命令 $2$ ：

text 复制代码

npx skills add cathrynlavery/diagram-design

或者用另一条等效命令 $2$ ：

text 复制代码

epx add cathrynlavery/diagram-design --skill diagram-design

装好之后，这个技能就成了本地 AI 助手的内置本领。你不用去记复杂的排版参数，直接跟 AI 说人话就行。

4.2 怎么派活

给你几个参考场景：

传统企业老板想给客户做系统：直接让 AI 把口头的「采购审批流」画成带部门分区的泳道图；
产品经理赶着周五交差：直接让 AI 把腾讯文档里的功能需求转成状态机和用户旅程图；
业务主管做项目复盘：直接让 AI 把手头的 Mermaid 草稿重排成 4px 网格架构差异图。

以前是人伺候画图软件拉线条，现在是 AI 守着像素网格出方案。

五、安全：喂给 AI 前先守住安全底线

慢着，先别急着把你电脑里的投标书和核心代码拖进去。

每次给企业做陪跑，我都要专门强调一遍安全红线。很多老板为了省事，把带客户真实姓名、报价底线、数据库密码的文档一股脑发给免费 AI，这无异于在公网上裸奔。

客观来说，官方 10 月 1 日更新的隐私说明里写着，diagram-design 只是本地运行的指令、HTML 模板和小脚本 $1, 5$ 。它采用 MIT 许可证，没有独立服务器，没有账户，也不收集遥测数据 $1, 5$ 。说白了，LittleMight 不会拿它收集你的个人数据 $1, 5$ 。

至于 WorkBuddy 这边，传输与存储全程用了 TLS/AES-256 加密，密钥独立托管 $3$ ，它还过了 ISO 27001、SOC 2 与等保三级认证 $3$ 。

但只要工作流里调了云端大模型，我给学员立了三条铁律：

严禁上传真实的服务器 IP、数据库表结构明文、API 密钥和核心算法源码；
严禁上传包含未公开财务数据、真实客户名单、供应商底价的业务流程图；
发给 AI 画图前，先在本地或用豆包、腾讯元宝把敏感词替换成代号。

举个例子，把某银行核心结算系统换成「系统A」，把真实金额换成「X万元」，等拿到导出的 HTML 或 SVG 文件，再在本地编辑器里把真实名字换回来。

另外，如果你拿它画代码仓库的架构图，我提醒你注意看一眼账单。10 月 21 日有篇第三方实测提到，绘制架构图及配套知识库时，直接发完整文件单次消耗 33,807 tokens $2$ ；开启本地骨架压缩后，单次消耗降到 12,956 tokens $2$ 。

先把代码做脱敏和骨架提炼，既防泄密，又帮你省下一半以上的算力成本。

六、提示词：照抄这套模板就能直接出图

工具装好了，安全红线划清了，怎么让 AI 一次就画出能直接放进 PPT 的图？

很多人的做法是扔一句「帮我画个电商退款流程图」，结果 AI 漏掉一半分支，返工三次还不如自己动手。

在我带的 200 多位学员里，凡是能把 AI 用出效率的，都在用我教的「验收前置」方法------动手前，你得先把验收标准拍在它脸上。

我给你整理了「3 个即插即用画图提示词模板」。你可以先用豆包或元宝把零散业务想法套进模板理顺，再交给装了技能的工作台出图。

text 复制代码

请调用 diagram-design 技能，为我生成一张【跨部门业务审批泳道图】。
【参与角色】客户、销售部、财务部、交付团队（已脱敏）。
【核心流转】1. 客户提交需求单；2. 销售部初审报价，若低于阈值A直接进入交付，若高于阈值A转财务部复核；3. 财务部确认款项后通知交付团队建项。
【前置验收标准】
- 必须严格按角色划分泳道，对齐 4px 网格。
- 判断节点的「是/否」分支必须标注清晰，不得出现交叉重叠线。
- 同时输出 HTML 与 SVG 两种格式文件。

text 复制代码

请调用 diagram-design 技能，基于我提供的脱敏模块列表，生成一张【系统升级前后架构差异图（Architecture Diff）】。
【改造前状态】单体应用直连核心数据库A，定时脚本同步报表。
【改造后状态】拆分为订单服务、库存服务，中间引入消息队列B，读写分离。
【前置验收标准】
- 用高对比度颜色明确区分「新增模块」「保留模块」与「废弃链路」，符合 WCAG-AA 对比度。
- 采用 1px 细线与零阴影风格。
- 导出为高清 PNG 及可二次修改的 HTML 文件。

text 复制代码

请调用 diagram-design 技能，将以下 4 周项目里程碑转化为一张【甘特图】，并附带一张当前周的【看板图】。
【阶段排期】第1周需求冻结；第2-3周核心模块开发；第4周联调验收。
【当前看板】待办（接口文档）、进行中（前端页面）、已完成（数据库设计）。
【前置验收标准】
- 关键里程碑节点需高亮标记。
- 文本标签控制在 6 个字以内，排版紧凑不折行。
- 输出 SVG 格式以便直接粘贴进腾讯文档。

6.1 两个短板，你得心里有数

说到这个，我也得把丑话说在前面，这东西不是万能的，它有两个明显的短板：

第一，输出质量很吃底层调用的那个大模型。哪怕提示词一模一样跑两次，排出的版面布局也可能会不一样 $8$ ；
第二，它生成的 HTML 或 SVG 不是原生 draw.io 那种随便拖拽连线的格式。如果在代码仓库 PR 里提交，它也没有现成的图表文本用来对比差异 $8$ 。

提示：如果你的方案需要团队里不懂技术的同事频繁用鼠标拖拽改字，建议先把旧的 .drawio 或 Mermaid 文件排好逻辑再导进去做最终美化，不要指望生成 PNG 后还能直接拿鼠标拽箭头 $6, 8$ 。

七、总结：谁该装，谁别装

所以我的判断很明确。

如果你是每天给客户出方案的传统企业老板或产品经理，想在十分钟内拿出一张干净、对齐的架构图去撑场面，这套组合拳今天就值得你装上试试；
但如果你画的是几十人协同、每天手动微调几百根连线的超大图纸，听我的，老老实实用专业工业级制图软件，别拿 AI 折腾自己。

在我看来，工具不光省下那两个小时拉框时间，它真正帮你把脑子里的业务流程，迅速变成了客户看得懂的资产。

今晚回去，先别管那 45 种模板怎么背，就做一个最小动作：把上面第一个泳道图提示词复制下来，把你公司最头疼的报销或发货流程填进去跑一遍。

你平时画一张流程图要折腾多久？最怕客户提什么改图要求？欢迎在评论区聊聊你画图踩过的坑。

参考资料

$1$ diagram-design/.claude-plugin/plugin.json at main · cathrynlavery/diagram-design · GitHub · github.com/cathrynlave...

$2$ Diagram Design + Regolo: Interactive Codebase Architecture Maps · regolo.ai · regolo.ai/getting-sta...

$3$ WorkBuddy - AI Agent 办公新范式 · workbuddy.cn · www.workbuddy.cn

$4$ WorkBuddy - AI Agent for Everyday Office Work · workbuddy.ai · www.workbuddy.ai

$5$ diagram-design/PRIVACY.md at main · cathrynlavery/diagram-design · GitHub · github.com/cathrynlave...

$6$ diagram-design/skills/diagram-design/SKILL.md at main · cathrynlavery/diagram-design · GitHub · github.com/cathrynlave...

$8$ GitHub - cathrynlavery/diagram-design at blog.twms.in · GitHub · github.com/cathrynlave...