写架构图，是每个开发者的痛。
打开 draw.io，拖一个矩形，连线，加文字，再拖一个，再连线……半小时过去了，图还没画完。更别提代码改了，图要重新画，文档永远跟不上代码。
但如果你的 AI 编程工具（Claude Code、Codex、OpenCode）能一句话帮你画出来呢？
不是生成一张静态图片，而是一个可编辑的 .drawio 文件，打开就能继续改。
这个事现在真的能做到了。项目叫 drawio-skill，GitHub 上 9700+ Star，MIT 开源。
它是什么？
一个 Agent Skill，装到 Claude Code、Codex、OpenCode 等 AI 编程工具里，让它具备"画架构图"的能力。
它的核心是一个 SKILL.md 文件——所有 AI 编程工具都支持的 Agent Skill 格式。装好之后，你跟 AI 说：
"画一个微服务电商架构图，API Gateway 路由到认证、用户、订单、支付四个服务，用 Kafka 做消息队列"
AI 就会生成一个标准的 .drawio XML 文件，导出成 PNG 给你预览，不满意可以继续说：
"把订单服务的数据库改成 Redis 缓存加 PostgreSQL"
它会在原图上修改，不会重新画一张。
关键点：生成的不是 PNG，是可编辑的 .drawio 源文件。
三个让我觉得"这才是正路"的设计
1. 生成源文件，不是图片
大多数 AI 画图的方案是：生成一张 PNG 图片。好看是好看，但你想改一个组件的名字、换一种颜色、加一条连线？重画。
drawio-skill 生成的是 draw.io 的 XML 源文件。你可以用 draw.io 桌面版打开它，继续编辑、调整布局、换样式。
这就跟 AI 写代码一个道理——你拿到的不是编译后的二进制，是源代码。
2. 自检查 + 迭代修正
AI 生成的图不完美很正常。drawio-skill 做了一件很聪明的事情：自己检查自己。
生成 .drawio 后，它调用 draw.io 桌面版导出 PNG 预览，然后用视觉模型检查这张 PNG——有没有标签被截断？有没有连线穿过了节点？有没有元素重叠？
发现问题，自动修复，最多 2 轮。修复完再导出最终版本。
如果还是不满意，你可以继续给反馈，最多 5 轮迭代。
这意味着你不需要自己盯着 AI 慢慢调，它会自己发现问题、自己修。
3. 不止自然语言：代码、IaC、SQL 都能画
这是 drawio-skill 最让我兴奋的能力。
你不需要每次都手动画图。它可以从真实代码和基础设施中逆向生成架构图：
|
|
|
|---|---|
| Python/JS/Go/Rust 代码 |
|
| Terraform |
|
| Kubernetes YAML |
|
| docker-compose |
|
| SQL DDL |
|
| OpenAPI/Swagger |
|
| CI/CD 配置 |
|
一行命令，把 Terraform 目录变成一张带官方云图标的架构图：
对于没有文档的遗留系统，这可能是最快的"先画出初始视图"的方式。
安装有多简单？
每个 AI 编程工具的 install 路径不一样，但都只有一行。
Claude Code：
OpenAI Codex：
OpenCode：
装好重启 AI 工具，下次你说"画个图"，它就自动调用 drawio-skill。
唯一的前提： 电脑上装了 draw.io 桌面版（用于导出 PNG）。macOS 用户一行搞定：brew install --cask drawio。
还有什么好玩的功能？
-
地铁图模式：把 CI/CD 流水线或 Agent 链路画成伦敦地铁线路图的风格，做技术分享很有视觉冲击力 -
321 个 AI/LLM 品牌 Logo：OpenAI、Claude、Gemini、DeepSeek、Qwen 都有，画 RAG 架构图不用自己找图标 -
增量同步：代码改了， diagramctl sync只更新变化的部分，你手动调过的布局不会被覆盖 -
架构即测试：在 CI 里跑架构规则检查——"数据库能不能从公网访问""有没有循环依赖"——跟跑代码测试一样 -
故障模拟： whatif --fail kafka直接生成 Kafka 挂掉后的影响范围图
谁该用？
经常画架构图的开发者：装一个，省掉 80% 的手动拖拽时间。
负责写技术文档的团队：代码改了，架构图跟着变，文档不再过时。
做技术分享的工程师：地铁图模式做出来的图，放在 PPT 里直接加分。
运维和架构师：从 Terraform 或 K8s 配置直接生成基础设施图，比手绘准确得多。
写在最后
drawio-skill 做的事情看似简单——让 AI 画图。但它解决的真正问题是：架构图跟代码脱节。
过去，架构图是"画完就忘"的静态文档。现在，代码变了，图可以跟着变。
这才是 AI 编程工具该有的样子——不是帮你画一张好看的图，而是帮你维护一个跟代码同步的架构图。
GitHub 地址：github.com/Agents365-ai/drawio-skill
关键词：#drawio-skill #AI编程 #架构图 #ClaudeCode #Codex #OpenCode #自然语言生成 #开源工具 #AgentSkill #技术文档