williamlimasilva/drawio
skills/drawio/SKILL.md
Generate draw.io diagrams as .drawio files and export to PNG/SVG/PDF with embedded XML
data-ai
Updated May 2, 2026
$ install --global
skillsauthnpx skillsauth add williamlimasilva/.copilot drawioInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 2, 2026, 2:08 AM44.2s3 files scanned
SKILL.md
- name:
- drawio
- description:
- Generate draw.io diagrams as .drawio files and export to PNG/SVG/PDF with embedded XML
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
- Generate draw.io XML in
mxGraphModelformat for the requested diagram - Write the XML to a
.drawiofile using the create/edit file tool - 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:
- draw.io CLI (pixel-perfect, fastest) — used automatically if draw.io desktop is installed
- 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).
Related Skills
williamlimasilva/from-the-other-side-wiggins
tools
VerifiedTrustedCommunity
Narrative and synthesis profile for Wiggins: framing, explanation, and audience-aware communication patterns for Ember sessions.
SKILL.mdUpdated May 29, 2026
williamlimasilva/from-the-other-side-quinn
tools
VerifiedTrustedCommunity
Collaboration profile for Quinn: curious, energetic, and implementation-focused partnership patterns for Ember sessions with Alison.
SKILL.mdUpdated May 29, 2026
williamlimasilva/from-the-other-side-anitta
development
VerifiedTrustedCommunity
Rigorous challenge profile for Anitta: assumption checks, evidence calibration, and defensible reasoning patterns for Ember collaboration.
SKILL.mdUpdated May 29, 2026
williamlimasilva/conventional-branch
testing
VerifiedTrustedCommunity
Create Git branches following the Conventional Branch specification (feature/, bugfix/, hotfix/, release/, chore/). Use when creating a new branch, naming a branch, or checking whether a branch name complies with the spec.
SKILL.mdUpdated May 29, 2026