Source profileQuality 73/100Review permissions

github/awesome-copilot/skills/drawio/SKILL.md

drawio

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

Source repository stars
37,126
Declared platforms
0
Static risk flags
2
Last source update
2026-07-28
Source checked
2026-07-28
DecisionCompatibilityInstallWorkflowPermissionsEvidenceSource

Decision brief

What it does—and where it fits

Generate draw.io diagrams as native .drawio files and export them to PNG images that can be embedded in Word documents.

Best for

    Not for

    • Tasks that require unconfirmed production actions or broad system permissions.
    • Environments where the pinned source and install steps cannot be inspected.

    Compatibility matrix

    Platform support, with evidence labels

    PlatformStatusEvidenceWhat to check
    CodexNot declaredNo explicit evidencePortability before use
    Claude CodeNot declaredNo explicit evidencePortability before use
    CursorNot declaredNo explicit evidencePortability before use
    Gemini CLINot declaredNo explicit evidencePortability before use
    Open the compatibility checker

    Installation

    Inspect first. Install second.

    The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

    Source-detected install commandSource
    npx skills add https://github.com/github/awesome-copilot --skill "skills/drawio"
    Safe inspection promptEditorial

    Inspect the Agent Skill "drawio" from https://github.com/github/awesome-copilot/blob/9933dcad5be5caeb288cebcd370eeeb2fc2f1685/skills/drawio/SKILL.md at commit 9933dcad5be5caeb288cebcd370eeeb2fc2f1685. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

    Workflow

    What the source asks the agent to do

    1. 01

      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

      Generate draw.io XML in mxGraphModel format for the requested diagramWrite the XML to a .drawio file using the create/edit file toolExport to PNG using the bundled export script
    2. 02

      Usage

      Review the “Usage” section in the pinned source before continuing.

      Review and apply the “Usage” source section.
    3. 03

      Bundled Export Script

      This skill includes drawio-to-png.mjs, a Node.js export script with two rendering backends:

      draw.io CLI (pixel-perfect, fastest) — used automatically if draw.io desktop is installedOfficial draw.io viewer in headless browser (pixel-perfect, needs Chromium/Edge) — fallback when CLI is unavailableThis skill includes drawio-to-png.mjs, a Node.js export script with two rendering backends:
    4. 04

      Install dependencies (one-time, from the scripts folder)

      cd skills/drawio/scripts && npm install

      cd skills/drawio/scripts && npm install

    Permission review

    Static risk signals and limitations

    Writes files

    medium · line 8

    The documentation asks the agent to create, modify, or delete local files.

    **Write the XML** to a `.drawio` file using the create/edit file tool

    Runs scripts

    medium · line 25

    The documentation asks the agent to run terminal commands or scripts.

    node skills/drawio/scripts/drawio-to-png.mjs <input.drawio> [output.png]

    Runs scripts

    medium · line 28

    The documentation asks the agent to run terminal commands or scripts.

    node skills/drawio/scripts/drawio-to-png.mjs --dir <directory>

    Evidence record

    Why each signal appears

    EvidenceSourceComputedTestedEditorial
    SignalValueEvidence typeMeaning
    Quality score73/100ComputedDocumentation, specificity, maintenance, and trust rules
    Repository stars37,126SourceRepository attention, not individual Skill quality
    Compatibility0 platformsSourceDeclared in the catalog source record
    Usage guideautomated source guideEditorialGenerated or reviewed according to the visible evidence level

    Pinned source

    Provenance and original SKILL.md

    Repository
    github/awesome-copilot
    Skill path
    skills/drawio/SKILL.md
    Commit
    9933dcad5be5caeb288cebcd370eeeb2fc2f1685
    License
    MIT
    Collected
    2026-07-28
    Default branch
    main
    View the original SKILL.md

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