【完整版】一、项目概览 & 二、版本信息核实

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/.json
• 内置预设位于 /styles/built-in/.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
• 边线必须包含 子元素（自闭合无效）
• 多行文本用 （不是

）

• 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 #智柴绘图实验室🎙️