skillboardUpdated every 6 hours
skillboardGenerate draw.io diagrams as .drawio files and export to PNG/SVG/PDF with embedded XML
Generate draw.io diagrams as native .drawio files and export them to PNG images that can be embedded in Word documents.
mxGraphModel format for the requested diagram.drawio file using the create/edit file toolThis skill includes drawio-to-png.mjs, a Node.js export script with two rendering backends:
# 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>
| 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) |
| 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 |
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;" />
Try drawio first (works if on PATH), then fall back:
"C:\Program Files\draw.io\draw.io.exe"/Applications/draw.io.app/Contents/MacOS/draw.iodrawio (via snap/apt/flatpak)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).
Copy a source-pinned command for your client. You run it yourself.
Destination: .claude/skills/drawio · pinned to the source commit
# Run from your project root
git clone https://github.com/github/awesome-copilot.git .skillboard-tmp
git -C .skillboard-tmp checkout f11a4e441c5ff061b4f8ae37952be8c602e4034e
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/drawio" ".claude/skills/"
rm -rf .skillboard-tmpReview the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.
sudo apt update && sudo apt install -y gitnpm install -g @anthropic-ai/claude-code# Run from your project root
git clone https://github.com/github/awesome-copilot.git .skillboard-tmp
git -C .skillboard-tmp checkout f11a4e441c5ff061b4f8ae37952be8c602e4034e
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/drawio" ".claude/skills/"
rm -rf .skillboard-tmpDestination: .claude/skills/drawio
Scanner static-checks@0.1.0 · commit f11a4e441c5f. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.
Instructs shell/process/package operations that run commands on the host.
Evidence: npm install· fingerprint 3a2dc0ae21eb56d7