← 返回学习中心 · 图文、视频与演示OiOi Academy
AI绘画视频3D · 02

drawio-skill:说句话就能生成专业图表

@mnmn94253156337 实测:自然语言 → draw.io 图表,6 种图型,自动检查修复,几秒出图。

原作者 @mnmn94253156337 来源 X 发布 2026-05-02
🧭

开篇:这课解决什么问题

画架构图、流程图、UML 是每个技术人的噩梦:框要对齐、线不能交叉、改一个需求重排半小时。AI 生图倒是快,但画出来的架构图经常逻辑是错的——框和线的关系不对,图再好看也是废纸。

drawio-skill 走另一条路:不让 AI"画"图,让 AI 写 draw.io 的图表代码,再由 draw.io 渲染成图。逻辑对不对,AI 自己检查、自己修。

记住:一句话结论:自然语言 → draw.io 图表代码 → 渲染成图;AI 负责逻辑,draw.io 负责好看,还能自动检查修复。
🗺️

能画什么:6 种图型

以下来自 @mnmn94253156337 的实测。装上技能后,说一句话就能生成:

  • 架构图:系统模块、服务关系。
  • 流程图:业务流程、审批流。
  • ER 图:数据库表关系。
  • UML:类图、时序图里的 UML 部分。
  • ML 模型图:神经网络结构。
  • 时序图:服务间调用顺序。

导出格式全:PNG / SVG / PDF 自动导出,draw.io 本身免费。

原文配图:作者让 drawio-skill
原文配图:作者让 drawio-skill"生成一张宣传自己的图",一句话出图的效果
⚙️

工作流:说 → 生成 → 自查 → 迭代

它的工作流有四步,关键在后两步:

  • 说:自然语言描述要画什么,如"画一个交易系统的架构图"。
  • 生成:AI 写出 draw.io 图表代码并渲染。
  • 自动检查:AI 自己审查逻辑——线连得对不对、有没有悬空的框。
  • 修复 + 多轮迭代:有问题自己改,不满意继续聊,直到你点头。

这正是它和"AI 直接生图"的本质区别:生图是一锤子买卖,错了重抽;这里是代码可改、逻辑可验。

高中生类比
AI 直接生图就像让画家凭印象画电路图,好看但可能短路;drawio-skill 像让工程师画 CAD 图,线怎么连都有规范,还能自动查错。
🧪

实测:交易系统架构图几秒出图

作者实测:让 AI 画了个交易系统架构图,几秒出图,"质量能直接用"。他的体感是:以后跟人解释复杂系统,一句话出图,省了 90% 的画图时间。

评论区有人追问:"试过生成复杂 UML 吗?会不会丢细节?"作者诚实回答:"还没有试过"——简单场景已验证,复杂 UML 仍是未知数。

借用配图(出自第 15 课原文 @howie_serious):gpt-image-2 与 nano banana pro 的信息图对比。注意:这是
借用配图(出自第 15 课原文 @howie_serious):gpt-image-2 与 nano banana pro 的信息图对比。注意:这是"AI 直接生图"路线的效果,可与本课"代码生成图表"路线对照看
记住:记住:简单架构图、流程图已可"直接用";复杂 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 课是"插画笔"(画好看)。别拿插画笔去画电路图。
词

术语翻卡:点卡片看解释

draw.io
draw.io
免费开源的在线图表工具,能画流程图、架构图,可导出多种格式。
ER 图
Entity-Relationship Diagram
实体关系图,画数据库里"表与表怎么关联"的图。
UML
Unified Modeling Language
统一建模语言,软件工程画类图、时序图等的标准符号体系。
时序图
Sequence Diagram
按时间顺序画"谁先调用谁"的图,常用于接口设计。
Skill
Skill
装进 AI Agent 的能力包,让 AI 知道何时、如何调用某套做法。
测

自测一下:点问题展开参考答案

前者让 AI 写 draw.io 图表代码再渲染,逻辑可检查、可修改、可迭代;后者一锤子买卖,逻辑错了只能重抽。

架构图、流程图、ER 图、UML、ML 模型图、时序图;导出 PNG / SVG / PDF。

几秒出图,质量能直接用,省 90% 画图时间。但复杂 UML 是否丢细节作者"还没有试过",属未知。

因为架构图是指导实施的依据,错的图会把整个团队带偏;AI 出图后必须人工过一遍连线。