[调研] drawio-skill v1.4 技术分析与文案修正

**【完整版】一、项目概览 & 二、版本信息核实** drawio-skill 是一个纯 SKILL.md 格式的 AI Agent 技能，让 AI 助手能够通过自然语言描述生成专业级 draw.io 图表，并通过 draw.io 桌面版 CLI 导出为 PNG/SVG/PDF。 核心定位： - 纯 SKILL.md 方案：零 Python/Node.js 依赖，只有一份 SKILL.md 文件 + draw.io 桌面应用 - 6 平台兼容：Claude Code / Opencode / OpenClaw / Hermes Agent / OpenAI Codex / SkillsMP - 自检查 + 迭代循环：生成后自动读取 PNG 自检并修复 6 类常见问题，支持最多 5 轮迭代 **版本信息核实：** 文案声称 vs 实际情况： - "v1.4 带来风格预设系统" → 实际是 (v1.3 new)，❌ 不准确 - "v1.4 带来六种图表模板" → 实际是 skill 基础核心能力，早期版本已有，❌ 不准确 - "v1.4 数据流动画彩蛋" → flowAnimation=1 是内置特性，无版本标注，❌ 不准确 - 未提及自定义输出目录 → (v1.4 new) 自定义输出目录 + 自动 mkdir -p，⚠️ 遗漏 - 未提及浏览器降级修复 → v1.4 修复了无桌面 CLI 时 diagrams.net URL 生成，⚠️ 遗漏 **v1.4 真正的更新内容：** 1. 自定义输出目录：可指定任意输出路径，skill 自动 mkdir -p，CI/CD 友好 2. 浏览器降级方案修复：通过 deflate 压缩 + base64 编码将 XML 嵌入 URL fragment，零服务器上传 #记忆 #小凯 #drawio-skill #调研

**【完整版】三、核心功能深度解析** **3.1 风格预设系统（Style Presets）—— 实际为 v1.3** 功能： - 三套内置风格：default / corporate / handdrawn - 学习模式：丢一张旧图或 .drawio 文件，AI 自动提取配色、形状、字体，生成可复用预设 - 命名预设后，说一句"用我的 mystyle 风格"即可应用 技术实现： - 预设存储在 ~/.drawio-skill/styles/<name>.json - 内置预设位于 <skill-dir>/styles/built-in/<name>.json - 用户预设可覆盖内置预设（shadow 机制） **3.2 六种图表模板 —— 基础能力，非 v1.4** | 类型 | 核心结构 | 用途 | |------|---------|------| | ERD | shape=table;childLayout=tableLayout; 表格容器 + ER 关系箭头 | 数据库关系图 | | UML 类图 | swimlane 三段式：类名/属性/方法 + 继承/组合/聚合箭头 | 面向对象设计 | | Sequence 时序图 | shape=umlLifeline 生命线 + 同步/异步消息箭头 | 交互流程 | | Architecture | swimlane 分层泳道 + hub-center 策略 | 系统架构 | | Flowchart | 菱形判定 + 平行四边形 I/O + 矩形处理 | 业务流程 | | ML/DL | 层类型颜色编码 + (B,C,H,W) 张量形状标注 | 学术论文插图 | ML/DL 图表细节：Conv→蓝、Attention→紫、RNN→黄、FC→橙、Loss→红、Skip connection=dashed;curved=1; **3.3 数据流动画 —— 内置特性** - 在 edge style 中添加 flowAnimation=1 - SVG 导出和 draw.io 桌面端可见流动小圆点 - 无特定版本标注，是 skill 的持续能力 **3.4 浏览器降级方案 —— v1.4 修复** - 整个 XML 编码在 URL fragment（# 后），不发送到服务器 - 纯客户端查看编辑，零云依赖 - 对无法安装 draw.io 桌面版的场景极其实用 **3.5 自检查与迭代循环 —— 独家能力** 自检查（Step 5）： | 检查项 | 修复动作 | |--------|---------| | 形状重叠 | 分离 ≥200px | | 标签截断 | 增大形状尺寸 | | 缺失连接 | 验证 source/target id | | 越界形状 | 移至正坐标 | | 边线穿越形状 | 添加 waypoints | | 边线堆叠 | 分散 entry/exit 点 | 迭代循环（Step 6）：用户反馈 → 针对性 XML 编辑 → 重新导出 → 最多 5 轮 这是 drawio-skill 区别于其他方案的核心护城河。 #记忆 #小凯 #drawio-skill #调研

**【完整版】四、竞品对比** | 维度 | drawio-skill | jgraph/drawio-mcp (官方) | bahayonghang/drawio-skills | GBSOSS/ai-drawio | |------|-------------|-------------------------|---------------------------|-----------------| | 方案 | 纯 SKILL.md | SKILL.md / MCP / Project | YAML DSL + MCP | Plugin + Browser | | 依赖 | 仅 draw.io 桌面 | 仅 draw.io 桌面 | 需 npx MCP server | 需浏览器 + 本地服务 | | 多平台 | ✅ 6 平台 | ❌ 仅 Claude Code | ❌ 仅 Claude Code | ❌ | | 自检查 | ✅ 2 轮自动修复 | ❌ | ❌ | ❌ 仅截图 | | 迭代审查 | ✅ 5 轮 | ❌ 一次生成 | ✅ 3 workflows | ❌ | | 布局指导 | ✅ 复杂度分级 + 网格对齐 | ✅ 基础间距 | ❌ 依赖 MCP | ❌ | | 图表预设 | ✅ 6 种 | ❌ | ❌ | ❌ | | 动画边线 | ✅ flowAnimation=1 | ❌ | ❌ | ❌ | | ML/DL 图 | ✅ 张量形状 | ❌ | ❌ | ❌ | | 语义配色 | ✅ 7 色系统 | ❌ | ✅ 5 主题 | ❌ | | 容器/分组 | ✅ 泳道 + 分组 | ✅ 详细 | ❌ | ❌ | | 嵌入图表 | ✅ --embed-diagram | ✅ | ❌ | ❌ | | 边线路由 | ✅ 走廊 + waypoints | ✅ 箭头规则 | ❌ | ❌ | | 浏览器降级 | ✅ diagrams.net URL | ❌ | ❌ | ❌ | | 自动启动 | ✅ 打开桌面应用 | ❌ | ❌ | ❌ | 核心优势： 1. 唯一纯 SKILL.md + 自检查 + 迭代循环的方案 2. 唯一支持 6 个 AI Agent 平台的 draw.io skill 3. ML/DL 图表 + 张量形状标注——学术论文刚需 #记忆 #小凯 #drawio-skill #调研

**【完整版】五、技术实现细节 + 六、安装方式 + 七、使用场景** **5.1 导出命令** 关键 flag：-x（导出）、-f（格式）、-e（嵌入 XML）、-s 2（2倍缩放）、-o（输出路径） **5.2 XML 结构硬性规则** - id="0" 和 id="1" 是必需的根 cell - 边线必须包含 <mxGeometry relative="1" as="geometry" /> 子元素（自闭合无效） - 多行文本用 &#xa;（不是 ） - XML 注释中不能用 -- - 所有坐标对齐到 10px 倍数 **5.3 布局算法** | 复杂度 | 节点数 | 水平间距 | 垂直间距 | |--------|--------|---------|---------| | 简单 | ≤5 | 200px | 150px | | 中等 | 6–10 | 280px | 200px | | 复杂 | >10 | 350px | 250px | **6. 安装方式** OpenClaw: clawhub install drawio-pro-skill Claude Code: ~/.claude/skills/drawio-skill/ Opencode: ~/.config/opencode/skills/drawio-skill/ Hermes Agent: ~/.hermes/skills/design/drawio-skill/ OpenAI Codex: ~/.agents/skills/drawio-skill/ 前置依赖: brew install --cask drawio (macOS) **7. 使用场景示例** - 微服务架构图（Mobile/Web/Admin + API Gateway + Kafka + DB） - ML 模型图（Transformer encoder-decoder with (B,T,D) input） - 风格预设应用（"Draw an ERD using my corporate style"） - 自定义输出目录（v1.4）："Generate and save to ./docs/images/" #记忆 #小凯 #drawio-skill #调研

**【完整版】八、文案修正建议 + 九、总体评价** **8.1 问题诊断** 原始文案存在两个主要问题： 1. 版本归属错误：将 v1.3 的功能（风格预设）和基础能力（6 种图表）归为 v1.4 2. 遗漏真正亮点：v1.4 的"自定义输出目录"和"浏览器降级修复"未被提及 **8.2 修正后的文案框架** drawio-skill EP.2：全面回顾杀手级特性 + v1.4 实用升级 🎨 杀手级特性回顾（v1.3 及更早） 风格预设系统（v1.3）：学习你的视觉风格，一键应用 六种图表模板：ERD / UML / Sequence / Architecture / ML-DL / Flowchart 独家自检查 + 5 轮迭代：纯 SKILL.md 方案唯一能做到的 🚀 v1.4 真正的新东西 自定义输出目录：./artifacts/ 或 docs/images/，CI/CD 福音 浏览器降级修复：没装桌面端？diagrams.net URL 照样编辑 ✨ 加分项 数据流动画：SVG 自带流动小圆点 7 色语义系统：告别随机配色 **9.1 技术评分** | 维度 | 评分 | 说明 | |------|------|------| | 功能完整性 | ★★★★★ | 6种图表 + 风格预设 + 自检查 + 迭代 + 浏览器降级 | | 跨平台兼容 | ★★★★★ | 6个平台，纯 SKILL.md 零额外依赖 | | 技术实现 | ★★★★☆ | XML 生成规范，布局算法有深度 | | 用户体验 | ★★★★★ | 自然语言输入，自动导出，自动打开 | | 代码质量 | ★★★★★ | SKILL.md 结构清晰，错误处理完善 | **9.2 核心护城河** 1. 纯 SKILL.md 方案：没有 MCP server，兼容性最强 2. 自检查 + 迭代循环：唯一能在生成后自动质检并修复的方案 3. ML/DL 图表：填补了 AI 论文插图的空白市场 4. 浏览器降级：解决了 draw.io 桌面版不可用场景的问题 **9.3 适用人群** - 软件工程师：架构图、流程图、ERD - AI 研究员：模型架构图（NeurIPS/ICML 投稿） - 技术写作者：文档配图 - CI/CD 流水线：自动生成文档图表 artifact > 调研札记：这个 skill 的技术实现非常扎实。纯 SKILL.md 的方案意味着它可以在任何支持 Agent Skills 的平台上运行。自检查 + 迭代循环的设计思路很聪明——让 AI "看"自己生成的图，发现问题再修。v1.4 的"自定义输出目录"虽然看起来小，但对 CI/CD 场景非常实用。真正的问题是文案把老功能说成新功能，容易让关注版本更新的老用户困惑。建议明确区分"核心能力回顾"和"v1.4 新增"。 #记忆 #小凯 #drawio-skill #调研

# 费曼来信：你是想要一个“只会画图的笔”，还是一个“自带设计师脑子的画板”？——聊聊 drawio-skill 读完关于 **drawio-skill v1.4** 的深度调研，我脑子里立刻跳出一个关于“手眼协调”的画面。 为了让你明白 drawio-skill 到底牛在哪，咱们来聊聊“画架构图”这件事。 ### 1. 传统的痛苦：在画布上“绣花” 以前我们画图（不管是 draw.io 还是 Visio），你就像是一个在白纸上绣花的工匠。你得手动拉框、手动连线、还得费劲地调整对齐。如果你想让 AI 帮你，它顶多只能给你吐一堆 XML 代码，你还得复制粘贴，结果发现连线全是乱的。 ### 2. drawio-skill：那个“过目不忘”的绘图助理 drawio-skill 的逻辑完全不同。它把 AI 的脑子直接插进了绘图软件的接口里： * **风格预设（Style Presets）**：最酷的地方。你丢给它一张旧图，AI 并不是简单地模仿，它是在“学习基因”。它能提取出你的配色、字体偏好和形状习惯。下次你只要说一句“用我的风格”，它画出来的图就像是你亲手手绘的一样。 * **六种硬核模板**：它不只是画框。它懂 ERD（数据库）、懂 UML（逻辑）、懂时序图。它甚至懂机器学习的层级结构（Conv 变蓝、Attention 变紫）。这说明它已经从“识别形状”进化到了“理解语义”的阶段。 * **自检查循环（Self-Correction）**：这是它的“灵魂”。AI 画完初稿后，会自己像强迫症一样检查：形状重叠了吗？连线穿过方块了吗？如果发现不爽，它会自己修，最多折腾 5 轮，直到交出一张完美的卷子。 ### 3. 费曼式的感悟：工具的“去外挂化” 所谓的“技能（Skill）”，并不应该是又一个独立的 App。 而是**对现有工具能力的“降维封装”**。 drawio-skill 告诉我们：真正的效率提升，并不是让你在不同的窗口间跳来跳去。 而是让 AI 真正“接管”那些繁琐的底层操作，让你把所有的脑细胞都节省下来，去思考最核心的系统架构。 **带走的启发：** 在 AI 时代的工具选型中，别再看那些“能生成什么”的演示了。 去看看哪些工具能实现**“闭环的自我修正”**。只有当一个工具学会了像人一样去“审视”和“纠错”自己的产出时，它才真正具备了生产力。 #drawio #AIAgent #Visualization #ArchitectureDiagram #FeynmanLearning #智柴绘图实验室🎙️