community skill
draw.io Diagram Skill
JGraph drawio-mcp 的图表生成 skill，用于创建原生 .drawio 文件，并可导出带嵌入 XML 的 PNG、SVG、PDF 或生成 app.diagrams.net 浏览器 URL。
communityskill packagediagramdrawioflowchartarchitecturexml
draw.io Diagram Skill
draw.io Diagram Skill 是 JGraph drawio-mcp 仓库中的 Claude Code skill，用于生成原生 .drawio 文件。它引导 agent 直接输出 mxGraphModel XML，并可按用户要求导出为带嵌入 XML 的 PNG、SVG、PDF，或生成可在 app.diagrams.net 打开的浏览器 URL。
来源
- 上游 SKILL.md：https://github.com/jgraph/drawio-mcp/blob/main/plugins/claude-code/skills/drawio/SKILL.md
- 上游 skill 目录：https://github.com/jgraph/drawio-mcp/tree/main/plugins/claude-code/skills/drawio
- 上游仓库：https://github.com/jgraph/drawio-mcp
- XML 参考：https://raw.githubusercontent.com/jgraph/drawio-mcp/main/shared/xml-reference.md
- 许可证：Apache-2.0
适合什么时候用
- 需要创建 draw.io 图表、流程图、架构图、ER 图、时序图、类图、网络图、线框图或 UI 草图。
- 需要生成可本地保存和再次编辑的
.drawio原生文件，而不是只输出图片或 Mermaid。 - 需要把图表导出为 PNG、SVG 或 PDF，并保留嵌入的 draw.io XML 以便继续编辑。
- 需要生成
app.diagrams.netURL，让用户直接在浏览器中打开和编辑图表。
核心输出模式
| 模式 | 输出 | 依赖 | 说明 |
|---|---|---|---|
| 默认 | .drawio | 无额外依赖 | 写入原生 mxGraphModel XML 文件，适合本地继续编辑 |
png / svg / pdf | .drawio.png / .drawio.svg / .drawio.pdf | draw.io Desktop CLI | 使用 --embed-diagram 导出，输出文件仍可在 draw.io 中恢复编辑 |
url | draw.io 浏览器 URL + 本地 .drawio | Node.js 内置 zlib | 压缩 XML 到 #create= 片段并打开 app.diagrams.net |
安装提示
这是社区上游的单文件 skill。本站只收录索引和中文说明，不镜像上游 SKILL.md。站点详情页生成的安装命令会指向上游 skill 目录：
npx skills add https://github.com/jgraph/drawio-mcp/tree/main/plugins/claude-code/skills/drawio
如需 PNG、SVG 或 PDF 导出，需要安装 draw.io Desktop，并确保 CLI 可用。默认生成 .drawio 文件和 url 模式不需要 draw.io Desktop。
使用注意
- 上游 skill 要求直接生成 draw.io
mxGraphModelXML；Mermaid 和 CSV 不能保存为原生.drawio文件。 .drawio文件必须包含根节点mxCell id="0"和默认父层mxCell id="1"。- 导出 PNG、SVG、PDF 时应使用
--embed-diagram，这样导出的文件仍可在 draw.io 里恢复编辑。 - URL 模式会把完整图表 XML 放在 URL hash 片段中；复杂图表可能超过浏览器 URL 长度限制，应退回本地
.drawio文件。 - XML 必须保持 well-formed：不要包含 XML 注释，属性中的
&、<、>、"需要转义。 - 命令参数、平台路径和 XML 细节以上游仓库为准。