drawio-skill:说句话就能生成专业图表
@mnmn94253156337 实测:自然语言 → draw.io 图表,6 种图型,自动检查修复,几秒出图。
开篇:这课解决什么问题
画架构图、流程图、UML 是每个技术人的噩梦:框要对齐、线不能交叉、改一个需求重排半小时。AI 生图倒是快,但画出来的架构图经常逻辑是错的——框和线的关系不对,图再好看也是废纸。
drawio-skill 走另一条路:不让 AI"画"图,让 AI 写 draw.io 的图表代码,再由 draw.io 渲染成图。逻辑对不对,AI 自己检查、自己修。
能画什么:6 种图型
以下来自 @mnmn94253156337 的实测。装上技能后,说一句话就能生成:
- 架构图:系统模块、服务关系。
- 流程图:业务流程、审批流。
- ER 图:数据库表关系。
- UML:类图、时序图里的 UML 部分。
- ML 模型图:神经网络结构。
- 时序图:服务间调用顺序。
导出格式全:PNG / SVG / PDF 自动导出,draw.io 本身免费。
工作流:说 → 生成 → 自查 → 迭代
它的工作流有四步,关键在后两步:
- 说:自然语言描述要画什么,如"画一个交易系统的架构图"。
- 生成:AI 写出 draw.io 图表代码并渲染。
- 自动检查:AI 自己审查逻辑——线连得对不对、有没有悬空的框。
- 修复 + 多轮迭代:有问题自己改,不满意继续聊,直到你点头。
这正是它和"AI 直接生图"的本质区别:生图是一锤子买卖,错了重抽;这里是代码可改、逻辑可验。
AI 直接生图就像让画家凭印象画电路图,好看但可能短路;drawio-skill 像让工程师画 CAD 图,线怎么连都有规范,还能自动查错。
实测:交易系统架构图几秒出图
作者实测:让 AI 画了个交易系统架构图,几秒出图,"质量能直接用"。他的体感是:以后跟人解释复杂系统,一句话出图,省了 90% 的画图时间。
评论区有人追问:"试过生成复杂 UML 吗?会不会丢细节?"作者诚实回答:"还没有试过"——简单场景已验证,复杂 UML 仍是未知数。
边界:它搞不定的事
诚实地说清边界,比吹牛重要:
- 复杂 UML 未验证:作者自己都没试过,别指望一次画出几十个类的大型类图。
- 逻辑仍需人把关:自动检查能抓"线连错"这类低级错误,但业务逻辑对不对,只有你知道。
- 审美靠 draw.io:它是"逻辑正确 + 排版规整",不是"设计惊艳"。要惊艳的图,去《第 19 课》看配图技能。
架构图最怕的不是丑,是错。一张逻辑错误的漂亮架构图,比不画更有害。AI 出图后,花 30 秒自己过一遍连线。
同类:Skill 画图三兄弟
本专题有三门"Skill 画图"课,按画的东西分工:
- 本课(第 2 课):技术图表——架构图、流程图、ER、UML。
- 第 18 课:科研三图——综述信息图、期刊封面、论文机制图。
- 第 19 课:文章配图——公众号配图、31 个现成 IP 角色。
三者都是"把画图封装成 Skill"的思路,只是画的东西不同。GitHub:github.com/Agents365-ai/drawio-skill。
三个技能像三把刀:本课是"直尺+圆规"(画准),第 18 课是"显微镜绘图"(画科研),第 19 课是"插画笔"(画好看)。别拿插画笔去画电路图。
术语翻卡:点卡片看解释
自测一下:点问题展开参考答案
前者让 AI 写 draw.io 图表代码再渲染,逻辑可检查、可修改、可迭代;后者一锤子买卖,逻辑错了只能重抽。
架构图、流程图、ER 图、UML、ML 模型图、时序图;导出 PNG / SVG / PDF。
几秒出图,质量能直接用,省 90% 画图时间。但复杂 UML 是否丢细节作者"还没有试过",属未知。
因为架构图是指导实施的依据,错的图会把整个团队带偏;AI 出图后必须人工过一遍连线。