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.
Qué hace
Pide al modelo que cree diagramas draw.io como XML mxGraphModel en archivos .drawio y los exporte como imágenes, por ejemplo para insertarlas en Word. El script drawio-to-png.mjs admite dos motores: la CLI de draw.io de escritorio, si está instalada (más rápida y con fidelidad de píxel), o el visor oficial de draw.io en Chromium o Edge sin interfaz como alternativa. Puede exportar un archivo o una carpeta completa. Las exportaciones a PNG, SVG y PDF incorporan el XML del diagrama para que siga siendo editable en draw.io. También define convenciones visuales para servicios principales, sistemas externos, rutas de éxito, advertencia y error, almacenes de datos y flechas.
Cómo funciona
- El modelo escribe el XML en un archivo
.drawio. - Ejecutas
npm installuna sola vez en la carpeta de scripts. - Usas
node drawio-to-png.mjs input.drawio [output.png],--dir <folder>o--renderer=cli|viewer|auto.
Ideal para
Diagramas de arquitectura y de flujo que deban insertarse como imágenes en documentos.
Riesgo medio: ejecuta un programa local o, como alternativa, un navegador. Busca la CLI de draw.io mediante `DRAWIO_PATH` o `which drawio` y la inicia con una lista de argumentos, sin shell. Si no la encuentra, abre Chrome o Edge sin interfaz, desactiva el aislamiento (`--no-sandbox`) y carga el visor de `viewer.diagrams.net`; necesita red. Requiere `npm install` (`puppeteer-core`) y escribe imágenes en la ruta indicada, reemplazando archivos del mismo nombre. En la prueba, con draw.io de escritorio instalado, tanto la CLI —incluido texto chino— como el visor exportaron correctamente; el PNG conservó el XML editable. Limitación: si falla el renderizado, por ejemplo por un archivo draw.io no válido, solo muestra un error, sigue indicando Done y termina con código 0. Sobrescribe la salida si ya existe.