What export formats are supported?

PNG, SVG, and PDF. Each exported file embeds the diagram XML, so the output stays editable in draw.io.

Does it need draw.io desktop installed?

No. The script uses the draw.io CLI automatically when draw.io desktop is installed, and otherwise falls back to the official draw.io viewer in a headless browser.

What does the headless browser fallback require?

It needs Chromium or Edge available for the official draw.io viewer to render the diagram.

Can I export every diagram in a folder?

Yes. Run the script with --dir followed by the directory path to export all .drawio files in it.

Draw.io Diagram Skill

SkillFiles & storage

The drawio skill lets an AI agent produce draw.io diagrams as native .drawio files and export them to PNG, SVG, or PDF. The agent writes draw.io XML in mxGraphModel format, saves it to a .drawio file, then runs a bundled Node.js script to render the output. Exported files embed the diagram XML, so they remain editable in draw.io.

Connect your AI Use it in a pipeline

Then ask your AI: use the Draw.io Diagram Skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; Ahel provides instructions and does not run this skill.

No other account needed.

Have Node.js available and run npm install once from the skill's scripts folder to install dependencies.

What your AI can do with it

Generate draw.io XML in mxGraphModel format for a requested diagram
Write the XML to a .drawio file using the create/edit file tool
Export a single .drawio file to PNG, SVG, or PDF
Export all .drawio files in a directory at once
Render via the draw.io CLI when draw.io desktop is installed
Fall back to the official draw.io viewer in a headless browser

Getting started

Have Node.js available and run npm install once from the skill's scripts folder to install dependencies.
Ask the agent to generate the diagram XML and write it to a .drawio file.
Run the bundled drawio-to-png.mjs script on the .drawio file, or use --dir to export every .drawio file in a directory.
Optionally pass --renderer=cli, --renderer=viewer, or --renderer=auto to force a specific rendering backend.

What this skill tells your AI

The instructions your AI receives, as published by github/awesome-copilot in skills/drawio/SKILL.md and read by Ahel’s review.

Generate draw.io diagrams as native .drawio files and export them to PNG images that can be embedded in Word documents.

How to Create a Diagram

Generate draw.io XML in mxGraphModel format for the requested diagram
Write the XML to a .drawio file using the create/edit file tool
Export to PNG using the bundled export script

Bundled Export Script

This skill includes drawio-to-png.mjs, a Node.js export script with two rendering backends:

draw.io CLI (pixel-perfect, fastest) — used automatically if draw.io desktop is installed
Official draw.io viewer in headless browser (pixel-perfect, needs Chromium/Edge) — fallback when CLI is unavailable

Usage

# Install dependencies (one-time, from the scripts folder)
cd skills/drawio/scripts && npm install

# Export a single diagram
node skills/drawio/scripts/drawio-to-png.mjs <input.drawio> [output.png]

# Export all .drawio files in a directory
node skills/drawio/scripts/drawio-to-png.mjs --dir <directory>

# Force a specific renderer
node skills/drawio/scripts/drawio-to-png.mjs --renderer=cli|viewer|auto <input.drawio>

Skill Folder Contents

File	Purpose
`SKILL.md`	This instruction file
`scripts/drawio-to-png.mjs`	Node.js export script (CLI + browser fallback)
`scripts/package.json`	Dependencies (`puppeteer-core`)

Supported Export Formats

Format	Embed XML	Notes
`png`	Yes	Viewable everywhere, editable in draw.io
`svg`	Yes	Scalable, editable in draw.io
`pdf`	Yes	Printable, editable in draw.io

Draw.io XML Style Conventions

Use these styles for consistent, professional diagrams:

<!-- Primary service (highlighted) -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=2;arcSize=12;shadow=1;" />

<!-- External system -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" />

<!-- Success/processing stage -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" />

<!-- Warning/quality gate -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" />

<!-- Error/failure path -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" />

<!-- Data store (cylinder) -->
<mxCell style="shape=cylinder3;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" />

<!-- Arrow -->
<mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=1;strokeColor=#6c8ebf;strokeWidth=2;" />

Locating the draw.io CLI

Try drawio first (works if on PATH), then fall back:

Windows: "C:\Program Files\draw.io\draw.io.exe"
macOS: /Applications/draw.io.app/Contents/MacOS/draw.io
Linux: drawio (via snap/apt/flatpak)

CLI Export Command

drawio -x -f png -e -b 10 -o <output.png> <input.drawio>

Flags: -x (export), -f (format), -e (embed diagram XML), -b (border), -o (output path).

Signals

GitHub stars: 40k
Forks: 5k
Last commit: Oct 2026

Ahel review

K1binfo
installs-packages

Automated review, not a security audit. Ruleset v1+k2.

Questions

What export formats are supported?: PNG, SVG, and PDF. Each exported file embeds the diagram XML, so the output stays editable in draw.io.
Does it need draw.io desktop installed?: No. The script uses the draw.io CLI automatically when draw.io desktop is installed, and otherwise falls back to the official draw.io viewer in a headless browser.
What does the headless browser fallback require?: It needs Chromium or Edge available for the official draw.io viewer to render the diagram.
Can I export every diagram in a folder?: Yes. Run the script with --dir followed by the directory path to export all .drawio files in it.

Advanced

Item type: skill
Key: drawio-github
Source: github.com/github/awesome-copilot

github.com/github/awesome-copilot