装上drawio skill,让AI帮你画各种图(流程图、架构图等),AI画完你还能接着改
来源: 微信公众号「GetLost FindMyself」
作者: 六点下班一定要走
链接: https://mp.weixin.qq.com/s/3eJA0Xc1p5uDRcL7GUnsJQ
日期: 2026-04-21
核心价值
让 AI 通过 draw.io skill 生成流程图、架构图等,AI 生成后用户可以继续在 draw.io 中编辑完善。
优势:
- AI 生成初稿,避免从空白页开始
- 可以让 AI 修改形状/颜色/线条等格式
- 生成的 .drawio 文件可直接打开继续编辑
技术方案
1. 安装 draw.io
- 官网: https://www.drawio.com/
- 开源免费软件
2. 下载 drawio skill
- GitHub: https://github.com/jgraph/drawio-mcp/blob/main/skill-cli/drawio/SKILL.md
- 适用于 Trae 等 AI 编程工具
3. 修改 skill(重要)
官方 skill 存在的问题:
- 命令名错误: Windows 安装后是
draw.io.exe,skill 中写的是drawio(会报错) - XML 参考在线: 每次调用需联网读取,对无法上网的用户不友好
修改方案:
a) 修正命令路径 (SKILL.md):
# Locating the CLI
Windows: C:\Program Files\draw.io\draw.io.exe (改成你的安装路径)
# Export command
draw.io.exe -x -f xml -o output.drawio input.xml
# Opening the result
start output.drawio
b) 本地化 XML 参考:
drawio-cli/
├── SKILL.md
└── reference/
└── xml-reference.md (从在线链接下载到本地)
在 SKILL.md 中将在线链接替换为本地路径:
[XML Reference](reference/xml-reference.md)
4. 导入使用
将修改后的 drawio-cli 文件夹打包成 zip,导入到 AI 工具的 skill 系统。
技术细节
draw.io CLI 工作流:
- AI 生成 XML 格式的图表描述
- 通过
draw.io.exe -x -f xml导出为 .drawio 文件 - 用户在 draw.io 中打开继续编辑
XML 格式: draw.io 使用自定义 XML 格式描述图表元素(节点、连线、样式等)
相关技术
- draw.io (diagrams.net): 开源图表绘制工具
- MCP (Model Context Protocol): AI 工具调用外部程序的协议
- Skill 系统: AI 编程工具的能力扩展机制
适用场景
- 流程图 (Flowchart)
- 架构图 (Architecture Diagram)
- UML 图 (Class Diagram, Sequence Diagram)
- 网络拓扑图
- ER 图 (Entity-Relationship Diagram)
对比其他方案
| 方案 | 优势 | 劣势 |
|---|---|---|
| draw.io skill | 可编辑、开源免费 | 需要本地安装 |
| Mermaid | 纯文本、版本控制友好 | 样式定制受限 |
| PlantUML | 强大的 UML 支持 | 语法复杂 |
| Excalidraw | 手绘风格、美观 | 无 CLI 支持 |
待办
- 测试 draw.io skill 在 OpenClaw 环境下的可用性
- 对比 fireworks-tech-graph skill(已有的图表生成方案)
- 评估是否集成到知识库工作流
技术价值
- AI 辅助可视化设计
- 降低图表绘制门槛
- 保留人工精修能力(AI 生成 + 人工优化)