drawio-skill AI 架构图：告别手动拖拽绘制

凌晨两点还在为明天的技术评审会手动绘制架构图？draw.io里反复拖拽矩形、对齐网格、调整连线，心累到怀疑人生。更崩溃的是需求方一句“把Kafka换成RabbitMQ”“再加个风控服务”——又得重新打开文件，手动布局，祈祷连线别交叉成一团乱麻。

AI能写代码、写文档、甚至写PPT了，可在“画图”这件事上，大多数人还跟活在石器时代似的。

drawio-skill的诞生，瞄准的就是这个被长期忽视的痛点：AI不仅能生产文本，还能生成专业级、可迭代、可编辑的工程图表——特别是流程图。而且门槛低到离谱：不用装什么MCP服务，不用写YAML DSL，不用打开浏览器插件。只需要一个draw.io桌面版软件、一个支持Skills的Agent工具、一个SKILL.md文件，再加一句自然语言描述，齐活。

核心洞察：这不叫“生成图片”，这叫“设计系统”

市面上很多AI画图工具，本质是“生成一张PNG”就完事儿了。但drawio-skill的底层逻辑完全不同——它把图表视为一个可以版本控制、可以迭代优化、可以嵌入工作流的完整设计系统。

1. 自检与迭代：AI也会“回头看”

这是drawio-skill最惊艳的一点。大多数AI生成工具是“一锤子买卖”：生成、导出、结束。但drawio-skill内置了一套双轮自检机制：

• 第一轮：生成 .drawio XML后，立即导出草稿PNG。AI会读取这张图片，自己检查是否存在六大类常见问题——比如连线交叉、元素重叠、标签截断。
• 第二轮：根据自检结果自动修复XML，重新导出，直到通过质量阈值。

还不满意？直接跟它说“把Kafka移到右边”“给Payment Service加个红色边框”。AI会进入最多5轮的定向编辑循环，而不是从头重新生成。这意味着什么？意味着你相当于拥有了一个24小时在线、永不疲倦、还从不抱怨“又要改图”的架构师助理。

提示：建议配合多模态模型使用，比如qwen3.6-plus、kimi-k2.6等效果更佳。

2. 专业级布局规范：从“能看”到“能发表”

用过AI生成图表的人都知道，默认输出往往是“能用但难看”——元素大小不一，连线歪歪扭扭，配色随机得像个彩虹糖。drawio-skill内置了一套工程级的排版规范：

• 网格对齐：所有坐标严格对齐到10px倍数，强迫症患者的福音。
• 复杂度分级：简单图表紧凑排列，复杂系统自动扩展间距并留出“路由走廊”。
• Hub居中策略：消息队列、网关这类中心节点自动居中，辐射状布局，连线零交叉。
• 7色语义系统：蓝色=服务、绿色=数据库、紫色=安全、黄色=消息队列……不用看图例也能一眼读懂。

对于机器学习从业者，它甚至支持张量形状标注（比如 (B, C, H, W)）和层类型配色，直接生成可以放进NeurIPS/ICML论文的模型架构图。

3. 主动触发：AI比你更清楚什么时候该画图

真正体现“Agent智能”的地方来了。drawio-skill不会傻等着你说“画个图”，而是在检测到3个以上组件的复杂系统描述时，主动建议：“这个架构比较复杂，要不要我生成一张架构图辅助理解？”

这种上下文感知的主动性，让AI从“工具”升级成了“协作者”。

安装drawio（支持mac/win/Linux系统）

所有图表导出都依赖draw.io桌面版的原生CLI。安装非常简单。

mac用户如果装了Homebrew，直接在终端执行：brew install --cask drawio。运行 drawio --version 查看版本号。

Windows用户可以去这里下载exe或msi文件，按窗口提示安装。然后用类似 "C:Program Filesdraw.iodraw.io.exe" --version 的命令来查看版本（路径根据实际安装位置调整）。

在Linux/Ubuntu服务器上，需要先执行 sudo apt install xvfb 安装xvfb软件包，这样才能实现无界面导出。然后运行 xvfb-run -a drawio --version 查看版本号。

安装drawio-skill（支持多个Agent工具）

drawio-skill采用纯 SKILL.md 格式，不依赖任何MCP服务、Node.js运行时或浏览器插件，支持多个Agent平台：

为了避免重复下载和方便同步更新，这里推荐先下载给opencode，然后通过软链接映射给其他Agent平台使用。

先执行 git clone https://github.com/Agents365-ai/drawio-skill.git ~/.agents/skills/drawio-skill 安装到通用目录。

然后软链接映射给openclaw和codex：

ln -sf ~/.agents/skills/drawio-skill ~/.openclaw/skills/drawio-skill
ln -sf ~/.agents/skills/drawio-skill ~/.codex/skills/drawio-skill

drawio-skill效果：从一句话到生产级架构图

安装完成后的使用方式，简单到令人发指。不用学任何DSL，直接描述你的系统：

画一个微服务电商架构图，包含 Mobile/Web/Admin 客户端，API Gateway（含认证+限流+路由），Auth/User/Order/Product/Payment 微服务，Kafka 消息队列，Notification 服务，以及各自独立的数据库和 Redis 缓存

AI会自动完成以下流程：

1. 依赖检查：确认draw.io CLI是否可用
2. 图表规划：分析组件关系，确定使用架构图预设
3. 生成XML：按规范生成 .drawio 文件
4. 导出草稿：生成PNG用于自检
5. 自检修复：检查连线、对齐、标签等问题
6. 用户确认：展示图片，询问是否满意
7. 迭代优化：根据反馈定向编辑（最多5轮）
8. 最终导出：输出PNG/SVG/PDF，自动打开draw.io桌面版供精修

输出示例

生成的架构图不仅逻辑清晰，而且配色专业、布局对称、连线无交叉。API Gateway作为中心枢纽居中，微服务分层排列，Kafka消息队列用黄色高亮，数据库用圆柱形图标，Redis用缓存专属样式——这一切都遵循预设规范，无需人工干预。

星形拓扑（7个节点）

中央消息袋里+6个微服务辐射排列。连线从不同方向进入Kafka，零交叉。

深度对比：为什么不是Mermaid / PlantUML / 官方MCP？

你可能会问：我直接用Mermaid语法让AI生成不行吗？或者用draw.io官方的MCP工具？来看看这个对比：

核心差异在于：Mermaid是“文本转图表”，官方MCP是“API封装”，而drawio-skill是“AI架构师”——它懂设计规范、会自我审查、能持续迭代。

进阶玩法：样式预设与CI/CD集成

样式预设

样式预设让你捕获并复用视觉风格，跨多张图表保持一致。激活预设后，它会替代内置的配色、形状词汇、字体和连线默认值。

内置预设

将预设应用到图表

画一个微服务架构图，使用我的 "corporate" 样式

或者设置默认样式，让后续所有图表自动使用：

把 "corporate" 设为我的默认样式

从文件中学习样式

指向任意.drawio文件或图片：

从 ~/diagrams/brand.drawio 学习我的样式，保存为 "mybrand"
从 ~/diagrams/screenshot.png 学习我的样式，保存为 "mybrand"

Skill会自动提取配色、形状、字体和连线风格，渲染样例图供预览，确认后才保存至 ~/.drawio-skill/styles/mybrand.json。

管理预设

让AI学会你的审美

如果公司有统一的设计规范，可以创建一个.drawio模板文件或参考图片，让drawio-skill“学习”你的风格——配色、字体、圆角、阴影。命名保存后，后续所有图表都会自动复用这套风格。

自定义输出目录：融入自动化流水线

在提示词中直接指定路径：

画一个部署架构图，输出到 ./docs/images/architecture.png

Skill会自动mkdir -p并导出到指定位置，完美适配文档自动化和CI/CD流程。

使用演示（以opencode为例）

让AI阅读项目，按corporate样式画出结构图

AI先阅读项目结构，然后使用drawio-skill画架构图

AI查看draw.io工具的位置，创建XML文件

创建完XML文件，转换为PNG图片格式。查看图片时失败了——因为此时用的模型不是多模态模型，需要切换具备视觉理解能力的VLM模型，比如Kimi K2.5、Kimi K2.6、GPT-5.5和Qwen3.6-plus等。

打开图片发现线条有点错乱。通过/models切换模型后，让AI继续执行。

AI查看图片并修改

修改效果有进步，但仍有不足——箭头的位置和大小仍可调整。可能是项目确实过于复杂了，确实不容易把控布局：毕竟涉及多个硬件、多个VLA模型、模仿学习、强化学习和仿真。

结语：AI Agent时代的“制图民主化”

drawio-skill代表了一种清晰的趋势：AI正在逐步接管那些“有明确规范但重复耗时”的专业工作。画图曾经是一项需要专门技能的领域——你要懂布局、懂配色、懂工具操作。而现在，你只需要描述清楚你的系统，AI就能把你的想法变成可以发表、可以编辑、可以迭代的工程资产。

来源：互联网