mcpField
D
drawio

drawio

github.com/githubDocuments40.6k320 installsUpdated 1d ago
Repository

About drawio

drawio is a skill for creating native .drawio diagrams and exporting them as images or documents. It suits users preparing editable diagrams or visuals for Word documents, with an included script that can render through the draw.io CLI or a headless browser.

Key features

  1. 01Generate mxGraphModel XML diagrams
  2. 02Create native .drawio files
  3. 03Export diagrams to PNG, SVG, or PDF
  4. 04Use CLI or browser rendering backends

Use cases

  1. 01Create an editable diagram for a document
  2. 02Export a diagram as PNG for Word
  3. 03Batch-export diagrams in a directory

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/github/awesome-copilot --skill drawio

After installing, type/drawioin Claude Code to confirm it loaded.

Bundled filesscripts/package.jsonscripts/drawio-to-png.mjs

Details

From the project README

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

Comments

Markdown supported