drawio-skill
Use when the user requests diagrams, flowcharts, architecture diagrams, ER diagrams, UML / sequence / class diagrams, SysML / MBSE diagrams (block definition, internal block, requirement, parametric), BPMN business process diagrams, swimlane / cross-functional flowcharts, network topology, cloud architecture from Terraform or Kubernetes manifests, ML/DL model figures (Transformer/CNN/LSTM), mind maps, or any visualization. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Best suited when the diagram n
npx skills add Agents365-ai/drawio-skill --skill drawio-skill --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Draw.io Diagrams ## Overview Generate `.drawio` XML files and export to PNG/SVG/PDF/JPG locally using the native draw.io desktop app CLI. **Supported formats:** PNG, SVG, PDF, JPG — no browser automation needed. PNG, SVG, and PDF exports support `--embed-diagram` (`-e`) — the exported file contains the full diagram XML, so opening it in draw.io recovers the editable diagram. Use double extensions (`name.drawio.png`) to signal embedded XML. ## When to use / when NOT to use **Use this skill for:** polished, precise diagrams (architecture, network, strict UML, ERD), anything needing solid opaque fills, 10,000+ stock/branded shapes, swimlanes, or custom geometry, exported as editable PNG/SVG/PDF. **Do NOT use it — route elsewhere — for:** - A casual hand-drawn / whiteboard look → **excalidraw** or **tldraw**. - Diagrams-as-code that live in git / render in Markdown → **mermaid** (general) or **plantuml** (UML). - Freeform infinite-canvas sketching or freehand strokes → **tldraw**. ## Bundled resources When the workflow references one of these, read it on demand — none of them need to be in context up front. | File | Read it when | | --- | --- | | `references/toolbox.md` | You're **no
- Overview
- When to use / when NOT to use
- Bundled resources
- Common Mistakes
- Diagram Type Presets
macOS (Homebrew — recommended; CLI binary is `drawio`, not `draw.io`) brew install --cask drawio drawio --version macOS (full path if not in PATH) Windows Linux Preview PNG (use this in step 4, before self-check) — NO -e, width-capped to stay under vision's 2576px ceiling drawio -x -f png --width 2000 -o diagram.png input.drawio Final PNG (step 7, after user approval) — WITH -e, double extension drawio -x -f png -e -s 2 -o diagram.drawio.png input.drawio
What does the drawio-skill skill do?
Use when the user requests diagrams, flowcharts, architecture diagrams, ER diagrams, UML / sequence / class diagrams, SysML / MBSE diagrams (block definition, internal block, requirement, parametric), BPMN business process diagrams, swimlane / cross-functional flowcharts, network topology, cloud architecture from Terraform or Kubernetes manifests, ML/DL model figures (Transformer/CNN/LSTM), mind maps, or any visualization. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Best suited when the diagram n
How do I install it?
Run `npx skills add Agents365-ai/drawio-skill --skill drawio-skill --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 Agents365-ai/drawio-skill, a repository with 7,145 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.