skilld
All skills
github avatar

/drawio

@90921cc official
by githubgithub/awesome-copilot40k stars
5,040

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

Ask your Agent

Use this Skill: https://skilld.dev/gh/github/awesome-copilot/drawio

This session only. Nothing lands on disk.

SKILL.md

≈24 tokens always: the name and description. ≈776 when used: this file. ≈43 more on demand in 1 file.

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

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

Source: SKILL.md on GitHub

Third-party checks

No alerts16d3 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    This skill provides tools for generating and exporting draw.io diagrams using either a local CLI or a headless browser renderer. It utilizes standard libraries and fetches rendering scripts from the official diagrams.net domain. No malicious behaviors were detected.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

Provenance

Signed by skilld at 90921cc. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 18 hours ago.

Activeupdated 5 months ago

Topics

  • drawio
  • diagram
  • export
  • png
  • svg
  • pdf
  • visualization
  • xml
  • nodejs

README badge

README badge for github/awesome-copilot/drawio

What it does

Generates draw.io diagrams as .drawio files and exports them to PNG, SVG, or PDF with embedded XML. Includes a Node.js export script that uses the draw.io CLI when available or falls back to a headless browser renderer.

Generated from the current SKILL.md.

Frequently asked

Does this skill embed the draw.io XML in exported images?
Yes. PNG, SVG, and PDF exports all include embedded XML, so the diagram remains editable in draw.io after export.
What do I need installed to use the export script?
Node.js and either the draw.io desktop CLI or Chromium/Edge browser. The script auto-detects which is available and falls back to the browser if the CLI is missing.
Can I export multiple diagrams at once?
Yes. Use the `--dir` flag to batch-export all .drawio files in a directory: `node drawio-to-png.mjs --dir <directory>`.
What formats does this skill support?
PNG, SVG, and PDF. All formats support embedded XML for round-trip editing in draw.io.

Generated from the current SKILL.md. These answers refresh after source changes.