drawiolisted

# 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 | |------|---------| | `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 | |--------|-----------|--