一、背景：投标方案卡在一张业务架构图上
不是你的方案不够好，是你画的流程图太像草稿。
昨天我熬夜帮学员改投标方案，文字逻辑理顺了，卡在业务架构图上——手动拉框对齐，直接折腾到半夜。后来我把 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]：
它支持放进 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]：
npx skills add cathrynlavery/diagram-design
或者用另一条等效命令 [2]：
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 个即插即用画图提示词模板」。你可以先用豆包或元宝把零散业务想法套进模板理顺，再交给装了技能的工作台出图。
请调用 diagram-design 技能，为我生成一张【跨部门业务审批泳道图】。
【参与角色】客户、销售部、财务部、交付团队（已脱敏）。
【核心流转】1. 客户提交需求单；2. 销售部初审报价，若低于阈值A直接进入交付，若高于阈值A转财务部复核；3. 财务部确认款项后通知交付团队建项。
【前置验收标准】
- 必须严格按角色划分泳道，对齐 4px 网格。
- 判断节点的「是/否」分支必须标注清晰，不得出现交叉重叠线。
- 同时输出 HTML 与 SVG 两种格式文件。
请调用 diagram-design 技能，基于我提供的脱敏模块列表，生成一张【系统升级前后架构差异图（Architecture Diff）】。
【改造前状态】单体应用直连核心数据库A，定时脚本同步报表。
【改造后状态】拆分为订单服务、库存服务，中间引入消息队列B，读写分离。
【前置验收标准】
- 用高对比度颜色明确区分「新增模块」「保留模块」与「废弃链路」，符合 WCAG-AA 对比度。
- 采用 1px 细线与零阴影风格。
- 导出为高清 PNG 及可二次修改的 HTML 文件。
请调用 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…
本文由 AI图鉴自动抓取并翻译，版权归原作者所有；如需查看原文请点下方链接。
I. Background: Biding programme on a business chart
It's not your plan that's not good enough. It's your flowchart that's too draft.
I stayed up late yesterday to help the participants re-tender the tender programme, and the text was logical, and it was stuck on the business chart — hand-stamping and alignment — and went straight to midnight. Later, I loaded the open source project on GitHub, 59.3k Stars, cathrynlavery/diagram-design, into the AI workstation from Tencent, WorkBudy [2, 3], and worked with Doubao and Tencent for text de-sensitization, and a professional framework for alignment to the 4px grid came out [2, 3].
I'm Tiger AI, two years of AI training, with thousands of trainees. To tell you the truth, every time I give a client a program, I get carried away. The business process is clear in the brain, and as soon as the drawing software is turned on, it is only box size, alignment of arrows, colour matching, and no more than two hours. It's hard to get through, and the client says, "Against a node," and the whole page is all messed up and he wants to drop the mouse on the spot.
Without saying anything today, step by step takes you to run the current line without hand-pulling, with the "3 Plug-in and prompt Template" attached to the text, which can be copied.
Question: Why does it keep the AI drawings out of hand?
A lot of people tried to get AI to write Mermaid codes, or to make a direct map, and what happened?
- Or it's a piece of paper;
- Or coloured pages of the previous century;
- Put a fake in the tender.
Until I saw the diagram-design project of Catharyn Lavery (LittleMight) open source, home page at diagramdesign.dev [1, 2]. As of 26 October, it had received 59.3k stars [2] on GitHub.
III. Programme: a set of layout specifications to be installed directly in the stomach of AI Agent
Let's start with what it is. This is not a drawing site for you to register with top up, it's a set of "format design codes" in the stomach of AI Agent.[5]
We used to draw our own drawings, all with the naked eye, all the shadows, all the symbols. After using diagram-design, it's completely different. It contains 45 HTMLs aligned to the 4px grid with an inline SVG template [2], all designed with 1px line and zero shadows, all coloured past WCAG-AA contrast validation [2].
In my opinion, it's more like having a senior visual designer with a compulsive condition sitting next to you: you're just reporting business logic, he's taking a ruler and measuring pixels to draw your frame.
3.1 Type of chart supported
To tell you the truth, I didn't think it could draw much more than a normal flow chart:
- Structure maps, structure differences, time series, status machines, ER data models, time lines are all available [1];
- Swimming track maps, pictograms, radar charts, Gantt charts, Sankitograms, fish bone charts are also not in the narrative [1];
- Even Wardley maps, panels, user trip maps, deployment maps, UML-type maps [1].
Finish directly exporting HTML, SVG or PNG into the program. You used to draw half of.drawio, Mermaid and.excalidraw, and you could get in and re-formulate.
3.2 Operating form and version
Seeing this, you might ask, does GitHub have to knock on a bunch of codes?
I've had code development experience for more than 10 years, but I teach the boss and the workplace to use AI, and the principle is that you don't take orders from people who can use the mouse.
Diagram-design is itself an AIAgent skill with the following versions marked from each location:
It supports running in OpenCode, Claude Code, Codex, Cursor, GitHub Copilot [2].
3.3 Recommended mix: WorkBudy Station
If you don't normally use these programming tools, my advice is straightforward: the full-scale AI office desk with Tencent products is used together with WorkBuddy, which is available online at www.workbuddy.cn or www.workbuddy.ai [3,4].
Think about it. There's a lot of day-to-day office software on the computer. The list of workbook capabilities is as follows [3, 4]:
- The ability to plan, access tools and generate documents;
- Direct access to WeChat, micro, Tencent documents and Tencent meetings;
- Whether you're Mac, Windows, Linux, Hongmong, or a cell phone app.
IV. ENHANCY: Two steps to get dressed and work directly
4.1 Installation skills
It's a two-step operation, with a knock-on line of command, that can carry the skills.
Open the AI working desk terminal where you support Skill locally and enter the installation command for this line [2]:
npx skills add cathrynlavery/diagram-design
Or with another equivalent order [2]:
epx add cathrynlavery/diagram-design --skill diagram-design
When it's installed, it becomes a local AI assistant's built-in. You don't have to remember complex layout parameters, just talk to AI.
4.2 How?
I'll give you some references:
- Traditional business owners want to make a system for their clients: direct AI to make the oral "procurement approval flow" a swimming track map of the sector;
- Product manager on Friday: direct AI to convert functional requirements from Tencent documents into a status machine and user travel map;
- Operations manager to reset the project: to reorder the Mermaid draft of AI's handler into a 4px grid gap map.
Used to be a human-serving drawing software pull line, it's now AI with a pixel network out of the scheme.
V. SECURITY: ENOUGH TO AI. Line
Wait, wait, wait. Don't rush into your computer's tenders and core code.
Every time I run around with the company, I have to focus on the red line. Many employers, in an effort to save themselves, send a brain to AI with a customer's real name, a quote line, a database password, which is tantamount to running naked on the public web.
Objectively, the official updated privacy note on October 1st states that diagram-design is only a locally run command, HTML template and small script [1, 5]. It uses MIT licences, has no independent server, no accounts and does not collect telemetry data [1]. Frankly, LittleMight will not take it to collect your personal data.
On the part of WorkBuddy, TLS/AES-256 was used for the entire transmission and storage process, the key was independently hosted [3], and it passed ISO 27001, SOC 2 and the equivalent level 3 authentication [3].
But as long as workflow has the cloud LLM, I have three irons for the students:
- Prohibiting the use of faxed servers IP, database table structure, API keys and core algorithms;
- To ban the uploading of business process maps containing unpublished financial data, true customer lists and vendor floors;
- Replace sensitive words with code names, either locally or with Doubao, Tencent bells, before sending AI drawings.
For example, replace a bank's core settlement system with "system A" and the real amount with "X-million dollars" until you get the exported HTML or SVG files and you change the real name back in the local editor.
Also, if you draw a blueprint for the code warehouse, I'll remind you to take a look at the bill. On 21 October, a third-party fact-finding report mentioned that, in drawing the architecture and supporting knowledge base, the direct release of the complete file was a single consumption of 33,807 tokens [2]; when the local skeleton was compressed, the single consumption was reduced to 12,956 tokens [2].
First, the code is dissensitized and skeletal, which prevents leaks and saves you more than half of your calculus costs.
Six, prompt: A copy of this template is a direct result.
How do you get AI to draw a picture that can be put directly into the PPT?
A lot of people threw a "help me draw a copy of the electrician's refund flow" and as a result, AI missed half of the branch and went back to work three times instead.
Of the more than 200 students I've brought, anyone who can use AI efficiently is using my method of "acceptance check foreplay" -- you have to film acceptance criteria on his face before you do it.
I've got you a three-shot prompt template. You can use Doubao or a beauties to put a piecemeal business idea in the template and then hand it over to the skill table.
Call diagram-design for me to produce a map of the swimming lanes.
[Participants] Clients, Sales, Finance, Delivery Team (dissensitized).
[core flow] 1. Clients submit demand orders; 2. Marketing Department first-instance quotations, if below threshold A enter delivery directly, and above threshold A for Treasury review; 3. Treasury notifys the delivery of the team building project upon confirmation of funds.
acceptance criteria
- There must be a strict definition of swimming lanes by role and alignment of the 4px grid.
- The " yes/no " branch of the judgement node must be clearly marked and no overlapping lines should occur.
- Output both HTML and SVG formats.
Call diagram-design skills and generate a [Architecure Diff before and after system upgrades] based on the list of desensitization modules I have provided.
[Prerere-reform state] Single-body application of direct-connected core database A, time script synchronization report.
split provides order services, inventory services, with message queue B in the middle and reading and writing separation.
acceptance criteria
- Distinguishing the "Retention Module" from the "Retention Link" with a high contrast colour, which corresponds to the WCAG-AA comparison.
- Adopt a 1px line with zero shadow style.
- Export to a high-resolution PNG and a second-modifiable HTML file.
Call the diagram-design skill to convert the following four-week project milestones into a [Gantt chart] with a copy of the current week.
[Step schedule] 1st week demand freeze; 2rd-3th week core module development; 4th week contact acceptance check.
[Current panel] to-do (interface document), ongoing (front-end page), completed (database design).
acceptance criteria
- High-profile marking of key milestones.
- Text labels are contained in six words, and the layout is tight.
- Output SVG format to paste Tencent documents directly.
6.1 Two shortboards, you have to know.
Speaking of which, I have to put it in front of me. It's not all-powerful. It's got two obvious shorts:
- First, the quality of the output eats the bottom call LLM. Even if prompt runs twice, the layout may be different [8];
- Second, it generates HTML or SVG, which is not the original drag.io format. If submitted in code repository PR, it does not have available chart text to compare differences [8].
Tip: If you need a program where technical colleagues who don't know how to use the mouse to change the word, it is recommended that the old.drawio or Mermaid files be logically sorted out and eventually embellished, and not expect to generate PNG with a mouse-thrower.
VII. CONCLUSION: WHO'S SUPPLEMENTING, DON'T.
So my judgment is clear.
- If you are the traditional business owner or product manager who gives the client a daily programme, and you want to produce a clean and aligned chart in 10 minutes to support the scene, this combination is worth trying today;
- But if you're drawing dozens of people working together, manually fine-tuning hundreds of super-sized drawings a day, listen to me, be honest and apply specialized industrial mapping software, and don't take AI to yourself.
In my view, the tool does not just save those two hours of time, it really helps you turn the business processes in your head into assets that clients can understand.
Go back tonight, forget about the 45 templates, and do the smallest thing: copy the first bathing chart on it, prompt, fill in your company's most painful claims or shipping process.
How long does it take you to draw a flow chart? What's the least he can do about it? You're welcome to talk about the pits you've painted.
References
[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 New Model for Offices — 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…
Auto-fetched and translated by AI Atlas. All rights belong to the original author.