AutoGineer
Generated banner for Drawio
Generated logo for Drawio

Drawio

GitHubOfficialFirst committed by parveen-dotnetDistributed by GitHub

  • Skill
  • Tool integration
  • Automation and integrations
  • MIT
  • Low risk
  • Has scripts
Download ZIP

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

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/github/drawio/download

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

  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 <directory>

# Force a specific renderer
node skills/drawio/scripts/drawio-to-png.mjs --renderer=cli|viewer|auto <input.drawio>
Skill Folder Contents
FilePurpose
SKILL.mdThis instruction file
scripts/drawio-to-png.mjsNode.js export script (CLI + browser fallback)
scripts/package.jsonDependencies (puppeteer-core)

Supported Export Formats

FormatEmbed XMLNotes
pngYesViewable everywhere, editable in draw.io
svgYesScalable, editable in draw.io
pdfYesPrintable, 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

LICENSE

MIT License

Copyright GitHub, Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

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.

Attribution and licence

First committed by
GitHub avatar of parveen-dotnetparveen-dotnet
Publisher
GitHub (Official)
Distributed by
GitHub
Source
github/awesome-copilot · skills/drawio · commit 797337f
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced
Contributors
parveen-dotnet

AutoGineer is not affiliated with or endorsed by parveen-dotnet or GitHub.

Download ZIP

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