Drawio — Agent Skill by GitHub

From the author

Generate draw.io diagrams as .drawio files and export to PNG/SVG/PDF with embedded XML

— the description by parveen-dotnet

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The drawio skill provides a structured approach to programmatically generating diagrams in the mxGraphModel XML format and converting them into visual assets. It includes a Node.js export script that leverages either the draw.io CLI or a headless browser to render diagrams into PNG, SVG, or PDF formats, ensuring that the original XML data remains embedded for future editing.

What it does

Generates draw.io compatible XML for diagrams.
Exports diagrams to PNG, SVG, and PDF formats.
Embeds source XML into exported files for portability and editability.
Provides a Node.js script for automated rendering.
Supports multiple rendering backends including draw.io CLI and headless browsers.
Defines standardized XML style conventions for professional diagram consistency.

When to use it

When you need to generate diagrams programmatically as part of a documentation workflow.
When you require diagrams that are both visually presentable and editable in draw.io.
When automating the conversion of diagram files into image formats for reports or presentations.
When maintaining consistent visual styling across multiple technical diagrams.

Advantages

Ensures diagrams remain editable even after export.
Supports automated batch processing of diagram files.
Offers flexible rendering options to suit different environments.
Promotes visual consistency through predefined style templates.

Usage examples

“Create a system architecture diagram for a web service and export it as a PNG.”: The agent generates the corresponding mxGraphModel XML, saves it as a .drawio file, and runs the export script to produce a PNG image.
“Convert all .drawio files in the current directory to SVG format.”: The agent executes the bundled Node.js script with the directory flag to process all diagrams and output SVG files.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/github/drawio/download
Unzip it into the cross-client skills folder of your project:
```
mkdir -p .agents/skills && unzip drawio.zip -d .agents/skills
```

Documentation by parveen-dotnet

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

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).

Files

ATTRIBUTION.mdAdded by AutoGineer857 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md3.1 KiB
scripts/drawio-to-png.mjsScript11.7 KiB
scripts/package.json170 B

Requirements and compatibility

Written for: GitHub Copilot

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

What our scanner noticed· Low risk

Scripts that your agent may run

This skill includes scripts that your agent may run. Read them before you use it.

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Wizard
Matt Pocock· Community
Generate interactive bash wizards to guide humans through complex manual setup, migration, or configuration tasks.
Automation and integrationsClaude CodeClaude appsOpenAI Codex+14 more
MITLow riskHas scriptsGitHub stars of the source repository317.5k
Emails
Corey Haines· Community
Design and optimize automated email sequences for onboarding, nurturing, and lifecycle management.
Automation and integrationsClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository59k
Conversion Tracking
Corey Haines· Community
A systematic approach to setting up, auditing, and verifying website conversion tracking across major ad platforms and analytics tools.
Automation and integrationsClaude CodeClaude appsOpenAI Codex+14 more
MITLow riskHas scriptsGitHub stars of the source repository59k
Directory Submissions
Corey Haines· Community
A strategic framework for submitting software products to directories to build backlinks, improve domain rating, and drive discovery.
Automation and integrationsClaude CodeClaude appsOpenAI Codex+14 more
MITMedium riskGitHub stars of the source repository59k
Sms
Corey Haines· Community
Plan, build, and optimize compliant SMS, MMS, and WhatsApp marketing programs for high-engagement customer communication.
Automation and integrationsClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository59k
Marketing Loops
Corey Haines· Community
Orchestrate and schedule repeatable, self-running marketing workflows that operate on a defined cadence.
Automation and integrationsClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository59k

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download drawio.zip