夜雨聆风一句话总结：这不是又一个 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 内置了一个双轮自检机制：
第一轮：生成
.drawioXML 后，立即导出草稿 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 |
| 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 |
|
为了避免重复下载和方便同步更新，这里采用下载给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-skillln -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 会自动完成以下流程：
依赖检查：确认 draw.io CLI 可用 图表规划：分析组件关系，确定使用架构图预设 生成 XML：按规范生成 .drawio文件导出草稿：生成 PNG 供自检 自检修复：检查连线、对齐、标签等问题 用户确认：展示图片，询问是否满意 迭代优化：根据反馈定向编辑（最多 5 轮） 最终导出：输出 PNG/SVG/PDF，自动打开 draw.io 桌面版供精修
输出示例
生成的架构图不仅逻辑清晰，而且配色专业、布局对称、连线无交叉。API Gateway 作为中心枢纽居中，微服务分层排列，Kafka 消息队列用黄色高亮，数据库用圆柱形图标，Redis 用缓存专属样式——这一切都遵循预设规范，无需人工干预。
星形拓扑（7 个节点）
中央消息代理 + 6 个微服务辐射排列。连线从不同方向进入 Kafka，零交叉。
深度对比：为什么不是 Mermaid / PlantUML / 官方 MCP？
你可能想问：我直接用 Mermaid 语法让 AI 生成不就行了？或者用 draw.io 官方的 MCP 工具？
| drawio-skill | |||
|---|---|---|---|
| 交互方式 | 纯 SKILL.md，零依赖 | ||
| 自检修复 | ✅ 双轮自动修复 | ||
| 迭代编辑 | ✅ 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> 样式" | |
<name> 设为默认" | |
<name>" | |
<a> 重命名为 <b>" |
让 AI 学会你的审美
如果你公司有统一的设计规范，可以创建一个 .drawio 模板文件或参考图片，让 drawio-skill "学习"你的风格——配色、字体、圆角、阴影。命名保存后，后续所有图表都会自动复用这套风格。
自定义输出目录：融入自动化流水线
在提示词中直接指定路径：
画一个部署架构图，输出到 ./docs/images/architecture.pngSkill 会自动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 会帮你把想法变成可以发表、可以编辑、可以迭代的工程资产
