drawio

github/awesome-copilot · Agent Skill

Draw.io diyagramlarını (.drawio) oluşturur ve yerleşik XML'i koruyarak PNG, SVG veya PDF olarak dışa aktarır.

Kuruluma geç ↓

Kurulum seçenekleri

Varsayılan olarak incele-önce promptu seçilir. Doğrudan komuta geçebilirsiniz.

Claude veya Codex ile kur

Promptu kopyalayın ve Claude, Codex veya başka bir asistana yapıştırın — sayfayı inceleyip skill'i kuracak.

I'd like to install this Claude Code skill:
https://github.com/github/awesome-copilot/tree/main/skills/drawio

Please review the SKILL.md file, verify the skill is legitimate, then copy the skill folder into .claude/skills/ of my project.

Kaynak dosyaları

1 dosya ZIP indir

Kurulumdan önce SKILL.md ve eşlik eden dosyaları inceleyin. Önizleme için dosyaya tıklayın.

SKILL.md içeriği

Yazarın orijinal metni · salt okunur

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