前言¶
流程图、架构图、时序图往往要先在脑子里理清结构,再对着 draw.io 拖节点、连箭头。如果材料已经写在需求说明或设计文档里,还要手工「翻译」成图,重复劳动多,改一版文档就要重画一版。
下面介绍 SkillHub 上的 Draw.io自动生成器(@user_509b3ac1/drawio-generator-pro)。它让 Agent 根据你的文字描述或上传的文档,直接产出 draw.io 能打开的 XML 图表文件,你再在官方编辑器里查看和微调,而不是从零搭画布。
这是什么¶
Draw.io自动生成器 是一条面向内容创作的 Agent Skill(分类 content-creation,社区来源,当前版本 1.0.0)。发布坐标为 @user_509b3ac1/drawio-generator-pro,维护方为 SkillHub 用户 user_509b3ac1。
一句话定位:把自然语言流程描述或文档内容,转换成 draw.io 可编辑的 .drawio 文件(底层为 draw.io 使用的 XML 格式)。Skill 标注 requires_api_key=false,不依赖额外 API Key。
核心功能¶
依据 SkillHub 官方简介,已核实的能力包括:
- 自然语言 → 图表:用户用文字描述业务流程时,生成流程图类
.drawio文件。 - 文档 → 图表:用户上传文档时,从文中提取流程或结构,再生成对应图表。
- 多类图示:在用户明确要求时,可面向架构图、时序图、网络拓扑图等常见 draw.io 图示类型生成文件。
生成完成后,Skill 要求 Agent 必须告知用户:用 draw.io 网页版 app.diagrams.net 或桌面客户端打开 .drawio 文件,进行查看和手动微调。Agent 侧负责产出文件,最终排版与细节仍以 draw.io 为准。
安装与启用¶
安装流程以 SkillHub 通用说明为准:skillhub.cn/install/skillhub.md。也可把下面提示词发给支持 Skill 的 AI,由它按文档完成安装:
请根据 https://skillhub.cn/install/skillhub.md,安装 `@user_509b3ac1/drawio-generator-pro`。
若本机已有 SkillHub CLI,可先检查版本,再安装到当前 Agent 能识别的 skills 目录(安装时必须带 --dir,否则默认落在 ./skills/ 可能不会被加载):
command -v skillhub && skillhub --version
未安装 CLI 时,可用官方脚本完整安装(含 CLI 与默认 Skill):
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
仅安装 CLI:
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
安装本 Skill 示例(将 <skills 目录> 换成你当前环境的路径):
skillhub install user_509b3ac1/drawio-generator-pro --dir <skills 目录>
常见客户端的 skills 目录(来自 SkillHub 安装文档):
| 环境 | 路径 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下的 .agents/skills/ |
安装后按你所用客户端的要求重启或刷新 Agent,使 Skill 生效。SkillHub 页面统计(截至页面展示):下载约 6499 次,安装约 215 次;评分字段在商店中为 100000 量级展示,具体算法以 SkillHub 为准。
典型用法¶
官方未提供固定 CLI 子命令;用法是在已启用该 Skill 的对话里,用自然语言说明要画的图或提供文档。下面三类场景与 SkillHub 简介一致,可直接复现思路:
1. 业务流程 → 流程图
向 Agent 描述步骤、分支与起止,并说明需要 .drawio 输出,例如:
根据下面流程生成 draw.io 流程图,保存为 .drawio 文件:
用户提交订单 → 校验库存 → 库存不足则通知用户,充足则创建支付单 → 支付成功则发货,失败则取消订单。
2. 上传文档 → 提取并成图
将含有流程或架构说明的文档交给 Agent,要求提取结构并生成图表文件(具体上传方式取决于当前 Agent 是否支持附件)。
3. 指定图示类型
在需求中写明图示类型,便于 Skill 对齐输出形态,例如:
根据这段服务调用说明画时序图,输出 .drawio,我稍后在 app.diagrams.net 里改样式。
收到文件后,用 draw.io 打开核对节点与连线,再按需改颜色、布局和图例。
适用场景与注意¶
适合谁
- 需要快速把文字需求或现有文档变成可编辑图示的开发者、产品、技术写作者。
- 已习惯 draw.io 生态、希望保留「生成 + 手工精修」工作流的人。
限制与注意
- 输出是
.drawio(XML),不是 PNG/SVG 截图;分享静态图仍需在 draw.io 中导出。 - 复杂图的一次生成结果可能需要较多手工调整;Skill 本身也强调在 draw.io 中微调。
- 图示准确度依赖你对流程、角色、边界的描述是否清楚;文档结构混乱时,提取效果可能变差。
- 无需 API Key,但仍依赖你所用 Agent 对 Skill 与文件写入的支持。
结尾¶
Draw.io自动生成器 把「写清楚流程」和「在 draw.io 里可编辑成图」连在一起,减少从文档到画布的重抄成本。若要在本地 Agent 中安装,以 SkillHub 安装文档和坐标 @user_509b3ac1/drawio-generator-pro 为准。