Indexed:437 news/102 AI tools/413 open-source projects/75 learning resources
HomeNewsOpen SourceModelsAI ToolsSkillsLearn
Home / Skills / Developer Productivity / Draw.io Diagrams and PNG Export
Developer Productivity

Draw.io Diagrams and PNG Export

awesome-copilot communityMITSkill language: English
License verifiedIncludes scriptsNeeds external serviceMedium risk
DemoReal run · claude-sonnet-5-5 · October 2026
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.

试用方式：我在本机装有 draw.io 桌面版的前提下，让模型先执行 npm install，再用 Skill 的导出脚本把我构造的 .drawio 文件导出为 PNG，并打开 PNG 描述内容；Bash 只放行这两条命令。这次只试了导出这一半，没有让模型从零生成图表 XML（试用环境不能写文件）。我另外手动测了浏览器后备渲染、批量目录、无效文件和覆盖。

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

  1. The model writes the diagram XML to a .drawio file.
  2. You run npm install once in the scripts folder.
  3. 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.

Notes & risks

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.