drawio-skill — From Text to Professional Diagrams

English · 中文 · 📖 Online Docs

A skill that turns natural-language descriptions into .drawio XML and exports them to PNG / SVG / PDF / JPG via the native draw.io desktop CLI. Works with Claude Code, Cursor, Copilot, OpenClaw, Codex, Hermes, and any agent compatible with the Agent Skills format.

✨ Highlights

6 diagram type presets — ERD, UML Class, Sequence, Architecture, ML/Deep Learning, Flowchart
Self-check + auto-fix — reads its own PNG output and auto-fixes overlaps, clipped labels, stacked edges, and more (up to 2 rounds)
Iterative feedback loop — up to 5 rounds of targeted refinement
Style presets — capture your visual style from a .drawio file or image, reuse on demand
Clean layout — grid-aligned, spacing scales with diagram size, connectors routed clear of nodes
Multi-agent, zero-config — runs from a single SKILL.md; no MCP server, no background daemon (the optional npx installer needs Node, the skill itself does not)

🖼️ Examples

[!TIP]
The hero image above was generated from this single prompt:

Create a microservices e-commerce architecture with Mobile/Web/Admin clients,
API Gateway (auth + rate limiting + routing), Auth/User/Order/Product/Payment
services, Kafka message queue, Notification service, and User DB / Order DB /
Product DB / Redis Cache / Stripe API

The skill is designed to route edges cleanly across different topologies, avoiding lines that cross through shapes:

<table> <tr> <td align="center" width="33%"> <img src="assets/demo-star.png" alt="Star topology" width="100%"> Star · 7 nodes Central message broker with 6 microservices radiating outward, no edge crossings on this example. </td> <td align="center" width="33%"> <img src="assets/demo-layered.png" alt="Layered flow" width="100%"> Layered · 10 nodes / 4 tiers E-commerce stack with horizontal and diagonal cross-connections routed via corridors. </td> <td align="center" width="33%"> <img src="assets/demo-ring.png" alt="Ring cycle" width="100%"> Ring · 8 nodes CI/CD pipeline with a closed loop and 2 spur branches flowing along the perimeter. </td> </tr> </table>

Full walkthrough in docs/USAGE.md.

🚀 Installation

1. Install the draw.io desktop CLI

Platform	Command
macOS	`brew install --cask drawio`
Windows	Download installer
Linux	`.deb`/`.rpm` from releases; `sudo apt install xvfb` for headless

Verify with drawio --version. Full recipes in docs/INSTALL_CLI.md.

2. Install the skill

bash
# Any agent (Claude Code, Cursor, Copilot, ...)
npx skills add Agents365-ai/365-skills -g

text
# Claude Code plugin marketplace
> /plugin marketplace add Agents365-ai/365-skills
> /plugin install drawio

bash
# Manual install
git clone https://github.com/Agents365-ai/drawio-skill.git \
  ~/.claude/skills/drawio-skill

Also indexed on SkillsMP and ClawHub.

Updating: /plugin update drawio (Claude Code), skills update drawio-skill (SkillsMP), clawhub update drawio-pro-skill (OpenClaw), or git pull for manual installs — see docs/INSTALL_SKILL.md#updates.

⚡ Quick Start

After installation, just describe what you want. For example, an ML model:

Draw a Transformer encoder-decoder for machine translation: 6-layer encoder
with self-attention, 6-layer decoder with cross-attention, input embeddings
(batch × 512 × 768), positional encoding, and a final output projection.
Annotate tensor shapes between layers and color-code by layer type.

The skill plans the layout, generates the .drawio XML, exports to your chosen format, self-checks the result, and lets you iterate.

🧩 Supported Diagram Types

Category	Examples	Notable features
Architecture	microservices, cloud (AWS/GCP/Azure), network topology, deployment	Tier-based swimlanes, hub-center strategy
ML / Deep Learning	Transformer, CNN, LSTM, GRU	Tensor shape annotations, layer-type color coding
Flowcharts	business processes, workflows, decision trees, state machines	Semantic shapes (parallelogram I/O, diamond decisions)
UML	class diagrams, sequence diagrams	Inheritance / composition / aggregation arrows; lifelines + activation boxes
Data	ER diagrams, data flow diagrams (DFD)	Table containers, PK/FK notation
Other	org charts, mind maps, wireframes	—

🎨 Style Presets

Capture a visual style once, reuse it everywhere. Three presets are built in — default, corporate, handdrawn — and you can teach the skill your own style from a .drawio file or a flat image:

Draw a microservices architecture using my "corporate" style

Learn my style from ~/diagrams/brand.drawio as "mybrand"

The skill extracts colors, shapes, fonts, and edge style, renders a preview, and only saves the preset after you approve. Full preset-management commands in docs/STYLE_PRESETS.md.

🔄 How it works

Behind the scenes: check dependencies → plan layout → generate .drawio XML → export draft PNG → self-check + auto-fix (up to 2 rounds) → show to user → 5-round feedback loop until approved → final export.

🆚 Comparison

vs Native Agent (no skill)

Feature	Native agent	drawio-skill
Self-check after export	❌	✅ reads PNG, auto-fixes 6 issue types
Iterative review loop	❌ manual re-prompt	✅ targeted edits, 5-round safety valve
Diagram type presets	❌	✅ 6 presets (ERD, UML, Seq, Arch, ML, Flow)
Grid-aligned layout	❌	✅ 10px snap, routing corridors
Color palette	random / inconsistent	✅ 7-color semantic system
Style presets	❌	✅ learn from `.drawio` file or image

vs Other draw.io Skills & Tools

Feature	drawio-skill	jgraph/drawio-mcp (official)<br>	bahayonghang/drawio-skills<br>	GBSOSS/ai-drawio<br>
Approach	Pure SKILL.md	SKILL.md / MCP / Project	YAML DSL + CLI (MCP optional)	Claude Code plugin
Dependencies	draw.io desktop only	draw.io desktop	draw.io desktop (MCP optional)	draw.io plugin + browser
Multi-agent	✅ 6 platforms	❌ Claude apps only	✅ Claude / Gemini / Codex	❌ Claude Code only
Self-check + auto-fix	✅ 2-round (reads PNG)	❌	✅ validation + strict mode	❌ screenshot only
Iterative review	✅ 5-round loop	❌ generate once	✅ 3 workflows	❌
Diagram presets	✅ 6 types	❌	✅ paper-mode classifier	❌
ML/DL diagrams	✅ tensor shapes, layer colors	❌	❌	❌
Color system	✅ 7-color semantic	❌	✅ 6 themes	❌
Browser fallback	✅ diagrams.net URL	❌ inline preview only	✅ via optional MCP	✅ diagrams.net viewer (primary)
Zero-config	✅ copy `skills/drawio-skill/`	✅	✅ desktop-only mode	❌ needs plugin install

Full comparison + key-advantages summary in docs/COMPARISON.md (with audit timestamp).

Part of the Agents365-ai diagram-skill family — pick the right tool for the job:

Skill	Style	Best for
excalidraw-skill	Hand-drawn / sketchy	Whiteboard mockups, informal diagrams
mermaid-skill	Text-based, auto-layout	README-embeddable, version-control friendly
plantuml-skill	UML-focused	Class / sequence diagrams in CI pipelines
tldraw-skill	Whiteboard collaboration	Casual sketches, FigJam-style boards

💬 Community

Discord: https://discord.gg/79JF5Atuk
WeChat: scan the QR code below

❤️ Support

If this skill helps you, consider supporting the author:

<table> <tr> <td align="center"> <img src="https://raw.githubusercontent.com/Agents365-ai/images_payment/main/qrcode/wechat-pay.png" width="180" alt="WeChat Pay"> WeChat Pay </td> <td align="center"> <img src="https://raw.githubusercontent.com/Agents365-ai/images_payment/main/qrcode/alipay.png" width="180" alt="Alipay"> Alipay </td> <td align="center"> <img src="https://raw.githubusercontent.com/Agents365-ai/images_payment/main/qrcode/buymeacoffee.png" width="180" alt="Buy Me a Coffee"> Buy Me a Coffee </td> <td align="center"> <img src="https://raw.githubusercontent.com/Agents365-ai/images_payment/main/awarding/award.gif" width="180" alt="Give a Reward"> Give a Reward </td> </tr> </table>