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/workshop-create
tools
VerifiedTrustedCommunity
Create a new workshop or use an existing directory as one. Handles two paths: (A) use an existing local directory the operator points at, or (B) create a new private GitHub repo in the signed-in account. Never creates a repo inside another repo.
SKILL.mdUpdated Jul 22, 2026
williamlimasilva/vcpkg
development
VerifiedTrustedCommunity
Guide for setting up vcpkg in C++ projects, managing dependency versions, and cross-compiling. Covers manifest initialization, CMake and Visual Studio integration, classic-to-manifest migration, version pinning, baselines, overrides, triplets, and cross-compilation. Use when a user is working with vcpkg project setup, installation, version management, or cross-platform builds. For specialized tasks, additional references cover custom registries and overlay ports (references/registries.md), CI/CD and binary caching (references/ci.md), and troubleshooting and dependency lifecycle (references/troubleshooting.md).
SKILL.mdUpdated Jul 22, 2026
williamlimasilva/signal-write
testing
VerifiedTrustedCommunity
Emit structured agent signals — hands-up, blocked, done, checkpoint, partnership. Signals are written as JSON to .signals/ for dashboard consumption and noted in the journal for persistence.
SKILL.mdUpdated Jul 22, 2026
williamlimasilva/markstream-install
development
VerifiedTrustedCommunity
Install and configure Markstream streaming Markdown renderers for Vue, React, Svelte, Angular, Nuxt, and Vue 2 applications. Use for package selection, minimal peer dependencies, CSS order, SSR boundaries, streaming mode, and renderer setup.
SKILL.mdUpdated Jul 22, 2026