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.
- Client is a blue rounded box.
- API Gateway is a green rounded box.
- 数据库 (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.
What it does
Has the model write draw.io diagrams as mxGraphModel XML in .drawio files and export them to images, for example to embed in Word documents. The bundled drawio-to-png.mjs has two rendering backends: the draw.io desktop CLI when it is installed (fastest, pixel-perfect), or the official draw.io viewer in a headless Chromium or Edge as a fallback. It can export one file or a whole directory, and PNG, SVG and PDF exports embed the diagram XML so they stay editable in draw.io. The skill also lists style conventions for primary services, external systems, success, warning and error paths, data stores and arrows.
How it works
- The model writes the diagram XML to a
.drawiofile. - You run
npm installonce in the scripts folder. node drawio-to-png.mjs input.drawio [output.png], or--dir <folder>, or--renderer=cli|viewer|auto.
Good for
Architecture and flow diagrams that need to end up as images in documents.
Medium risk: the export script runs a local program and, as a fallback, a browser. It finds the draw.io CLI through the `DRAWIO_PATH` variable or `which drawio` and starts it with an argument list (not through a shell); otherwise it launches your installed Chrome or Edge headless with the sandbox disabled (`--no-sandbox`) and loads the viewer script from `viewer.diagrams.net`, so it needs network access. It needs `npm install` (`puppeteer-core`) and writes image files at the output path, replacing files of the same name. Test-run: on a machine with the draw.io desktop app, both the command-line renderer (including Chinese text) and the browser fallback exported correctly, and the PNG embeds the editable diagram XML. Limits: when rendering fails (for example the file is not valid draw.io), it only prints an error, still says Done and exits with code 0; an output file of the same name is replaced.