drawio
Generate draw.io diagrams as .drawio files and export to PNG/SVG/PDF with embedded XML
Profile →npx skills add github/awesome-copilot --skill drawio --agent copilot
Same command for any agent — swap --agent for claude-code, codex, cursor.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 ```bash # 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
- How to Create a Diagram
- Bundled Export Script
- Usage
- Skill Folder Contents
- Supported Export Formats
- Draw.io XML Style Conventions
- Locating the draw.io CLI
- CLI Export Command
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> drawio -x -f png -e -b 10 -o <output.png> <input.drawio>
What does the drawio skill do?
Generate draw.io diagrams as .drawio files and export to PNG/SVG/PDF with embedded XML
How do I install it?
Run `npx skills add github/awesome-copilot --skill drawio --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From github/awesome-copilot, a repository with 37,432 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.