drawio-skill：把画架构图变成一句话的事

对于开发者来讲，画图是必备技能，drawio是必备工具。但画线对齐、调整样式这些细节最折磨人，熟练的工程师完成这套动作需要半小时，新手可能卡在布局对齐上更久。

今天介绍一个实用的skill，让画图这件事变得简单。

现在，在支持Claude Code或OpenAI Codex的IDE里输入：

"draw a flowchart of the user auth flow"

30秒后，你会得到一个.drawio文件、PNG/SVG/PDF三种格式导出件，以及一份AI自检报告。整个过程不需要离开代码编辑器。

这个skill做了什么

drawio-skill解决了几个关键痛点：

1. 视觉自检系统：导出PNG后，用AI视觉扫描重叠图形、被截断的标签、断裂的连接线，自动修复后再重新导出
2. 预设模板库：内置ER图、UML类图、序列图、系统架构图、机器学习流程图等6种专业模板
3. 网格对齐策略：所有坐标自动吸附到10像素网格，杜绝参差不齐的图形排列

为什么它不一样

市面上大多数"AI画图"工具止步于生成基本图形，而drawio-skill做了三件不同的事：

• 智能触发：当检测到对话涉及3个以上系统组件时，自动建议生成架构图
• 持续迭代：支持5轮针对性修改，比如"把数据库移到右侧，用红色高亮支付服务"
• 专业就绪：直接生成符合学术论文要求的机器学习流程图，带张量维度标注(B,C,H,W)

实际效果对比

有开发者测试发现，用传统方法绘制包含10个节点的分层架构图，平均要调整7次布局才能达到满意效果。而AI生成的版本从一开始就遵循了这些规则：

• 复杂度自适应间距（简单图紧凑，复杂图留白）
• 连接线使用路由走廊技术，避免横穿其他图形
• 中心节点自动置于画布黄金分割点

分层流程图示例

安装和使用

只需要本地安装draw.io桌面版，然后将SKILL.md文件放到对应AI代理的skills目录。支持Windows/macOS/Linux三平台。

# macOS安装示例
brew install --cask drawio
git clone https://github.com/Agents365-ai/drawio-skill.git ~/.claude/skills/drawio-skill

在Linux服务器上需通过xvfb实现无界面导出：

sudo apt install xvfb
xvfb-run -a drawio --version

这个项目最聪明的设计在于：当检测到本地无法运行draw.io时，会自动生成一个diagrams.net的在线编辑链接，确保任何环境下都能继续工作。

小结

它没有试图取代draw.io，而是把自己变成IDE和绘图软件之间的管道。当你在写代码时突然需要画个架构图，不再需要切换应用，一句话就能解决。

这也给开发者来讲也是个思路，很多当前还未被改造的主流工具，都是值得做的方向。

地址：https://github.com/Agents365-ai/drawio-skill