首页Skills关于
首页 / Skills / 开发提效 / Draw.io 图表与 PNG 导出
开发提效

Draw.io 图表与 PNG 导出

awesome-copilot communityMITSkill 语言: 英文
协议已核对含脚本依赖外部服务中风险
演示真实运行记录 · claude-sonnet-5-5 · 2026年10月
I have a draw.io diagram at .claude/skills/drawio/sample/architecture.drawio. Export it to a PNG next to it (default name) using the skill's script, so I can paste it into a Word document. Dependencies are not installed yet: first run `npm install --prefix .claude/skills/drawio/scripts` (that exact command is allowed), then use the export command with relative paths. Afterwards open the PNG and describe what it shows, and tell me which renderer was used.
Skill: drawio
Read: sample/architecture.drawio.png

I exported the diagram to .claude/skills/drawio/sample/architecture.drawio.png. That is the script's default name, so the file ends in .drawio.png, not .png. It's 13 KB, and the diagram XML is embedded, so you can still edit it in draw.io.

What it shows: a simple left-to-right flow with three elements joined by arrows.

  1. Client is a blue rounded box.
  2. API Gateway is a green rounded box.
  3. 数据库 (Database) is a yellow cylinder, the data-store shape.

Renderer: the draw.io CLI (the desktop app's draw.io command), selected automatically. The headless-browser viewer fallback wasn't needed.

I ran npm install --prefix .claude/skills/drawio/scripts first, as you asked, and it added 80 packages.

You can paste the PNG straight into Word. If you'd rather have the name architecture.png, I can rename or re-export it.

How it was tried: with the draw.io desktop app installed on my machine, I had the model run npm install first, then use the Skill's export script to export a .drawio file I built to PNG and open the PNG to describe it. Bash was allowed only for those two commands. Only the export half was tried; the model was not asked to generate the diagram XML from scratch (the trial environment cannot write files). Separately, I tested the browser fallback renderer, batch directories, invalid files and overwriting by hand.

它做什么

让模型把 draw.io 图表写成 .drawio 文件里的 mxGraphModel XML，并导出成图片，比如用来嵌进 Word 文档。随包的 drawio-to-png.mjs 有两种渲染方式：已安装 draw.io 桌面版时用它的命令行（最快、像素级一致），否则回退到在无头 Chromium 或 Edge 里运行官方 draw.io 查看器。可以导出单个文件或整个目录，PNG、SVG、PDF 导出都会嵌入图表 XML，所以在 draw.io 里仍可编辑。它还列出了主服务、外部系统、成功、警告和错误路径、数据存储和箭头的样式约定。

工作方式

  1. 模型把图表 XML 写进 .drawio 文件。
  2. 你在 scripts 文件夹里一次性执行 npm install。
  3. 执行 node drawio-to-png.mjs input.drawio [output.png]，或 --dir <文件夹>，或 --renderer=cli|viewer|auto。

适合什么场景

最终要变成文档里图片的架构图和流程图。

说明与风险

中风险：导出脚本会运行本地程序，回退时还会运行浏览器。它通过 `DRAWIO_PATH` 变量或 `which drawio` 找到 draw.io 命令行，并以参数列表（不经过 shell）启动它；否则会以关闭沙箱（`--no-sandbox`）的方式无头启动你安装的 Chrome 或 Edge，并从 `viewer.diagrams.net` 加载查看器脚本，所以需要联网。它需要 `npm install`（`puppeteer-core`），并在输出路径写图片文件，同名文件会被替换。已试用：在装有 draw.io 桌面版的本机上，命令行渲染（含中文）和浏览器后备渲染都能正确导出，PNG 内嵌了可再编辑的图表 XML。限制：渲染失败（比如文件不是有效的 draw.io 格式）时只打印错误，仍然显示 Done 且退出码为 0；同名输出文件会被直接替换。

SKILL.md 原文包内共 4 个文件