drawio

Draw.io Diagram Skill

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

1. Generate draw.io XML in mxGraphModel format for the requested diagram
2. Write the XML to a .drawio file using the create/edit file tool
3. 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:

1. draw.io CLI (pixel-perfect, fastest) — used automatically if draw.io desktop is installed
2. 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

Skill Folder Contents

Supported Export Formats

Draw.io XML Style Conventions

Use these styles for consistent, professional diagrams:

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

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