mcpField
D
drawio

drawio

github.com/ilteooodDesign & UI2530 installsUpdated 3d ago
Repository

About drawio

A skill for creating native draw.io diagram files and exporting them to image formats for use in documents. It includes a Node.js export script that can use the draw.io CLI or a headless-browser fallback.

Key features

  1. 01Generate diagrams as `.drawio` XML
  2. 02Export diagrams to PNG, SVG, and PDF
  3. 03Use draw.io CLI or browser fallback
  4. 04Export one file or a directory

Use cases

  1. 01Create diagrams for Word documents
  2. 02Export editable diagram files to images

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/ilteoood/harness --skill drawio

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

Bundled filesscripts/drawio-to-png.mjsscripts/package.json

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