一句话总结：这不是又一个 Mermaid 替代品，而是一个能让 AI Agent 像资深架构师一样思考、排版、自检并迭代优化图表的"制图大脑"。

引言：我们为什么还在手动画图？

如果你是一位技术负责人，一定经历过这样的场景：凌晨两点，为了明天早上的技术评审会，你正在 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，执行drawio --version显示版本号

windows用户可以在https://github.com/jgraph/drawio-desktop/releases下载exe或msi文件点击按窗口提示安装，可用类似"C:\Program Files\draw.io\draw.io.exe" --version显示版本，其中‘C:\Program Files\draw.io’根据实际路径修改

在Linux/Ubuntu服务器上需执行sudo apt install xvfb安装xvfb软件包实现无界面导出​，执行xvfb-run -a drawio --version可显示版本号

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

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

平台	安装方式
Claude Code	git clone https://github.com/Agents365-ai/drawio-skill.git ~/.claude/skills/drawio-skill
Opencode	git clone ... ~/.config/opencode/skills/drawio-skill（自动兼容 Claude 路径）
OpenClaw / ClawHub	clawhub install drawio-pro-skill
Hermes Agent	git clone ... ~/.hermes/skills/design/drawio-skill
OpenAI Codex	git clone ... ~/.agents/skills/drawio-skill
SkillsMP	skills install drawio-skill

为了避免重复下载和方便同步更新，这里采用下载给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 工具？

维度	原生 AI / Mermaid	draw.io 官方 MCP	drawio-skill
交互方式	文本 DSL	需要 Node.js 服务	纯 SKILL.md，零依赖
自检修复	❌	❌	✅ 双轮自动修复
迭代编辑	手动改 DSL	一次生成	✅ 5 轮定向优化
布局规范	基础	基础间距	✅ 网格对齐 + 复杂度分级
图表预设	无	无	✅ 6 种专业预设
ML/DL 支持	无	无	✅ 张量标注 + 层配色
动画连线	无	无	✅ flowAnimation=1
浏览器降级	不适用	无	✅ CLI 不可用时生成 URL
自动启动	无	无	✅ 导出后打开桌面版

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

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

样式预设

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

内置预设

名称	说明
default	干净的蓝/绿/黄配色，与内置规范保持一致
corporate	低饱和度专业配色，适合商务演示
handdrawn	手绘描边风格，适合非正式或白板式图表

将预设应用到图表

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

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

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

从文件中学习样式

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

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

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

管理预设

你说的话	发生什么
"列出我的样式"	以表格展示所有用户和内置预设
"显示我的 <name> 样式"	格式化输出预设 JSON
"把 <name> 设为默认"	设为所有图表的默认激活预设
"取消默认"	清除默认（恢复内置规范）
"删除 <name>"	删除用户预设（会请求确认）
"把 <a> 重命名为 <b>"	重命名用户预设

让 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 会帮你把想法变成可以发表、可以编辑、可以迭代的工程资产