Drawio Skill

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.

Microservices Architecture — generated from a single natural-language prompt

✨ 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%"> Star topology

  <b>Star</b> · 7 nodes

  <sub>Central message broker with 6 microservices radiating outward, no edge crossings on this example.</sub>
</td>
<td align="center" width="33%">
  Layered flow

  <b>Layered</b> · 10 nodes / 4 tiers

  <sub>E-commerce stack with horizontal and diagonal cross-connections routed via corridors.</sub>
</td>
<td align="center" width="33%">
  Ring cycle

  <b>Ring</b> · 8 nodes

  <sub>CI/CD pipeline with a closed loop and 2 spur branches flowing along the perimeter.</sub>
</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

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

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

# 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

Internal workflow

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) | bahayonghang/drawio-skills | GBSOSS/ai-drawio | |---|---|---|---|---| | 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).

🔗 Related Skills

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"> 

  <b>WeChat Pay</b>
</td>
<td align="center">
  ![Alipay](https://raw.githubusercontent.com/Agents365-ai/images_payment/main/qrcode/alipay.png)
  

  <b>Alipay</b>
</td>
<td align="center">
  ![Buy Me a Coffee](https://raw.githubusercontent.com/Agents365-ai/images_payment/main/qrcode/buymeacoffee.png)
  

  <b>Buy Me a Coffee</b>
</td>
<td align="center">
  ![Give a Reward](https://raw.githubusercontent.com/Agents365-ai/images_payment/main/awarding/award.gif)
  

  <b>Give a Reward</b>
</td>

</tr> </table>

👤 Author

Agents365-ai

• GitHub: https://github.com/Agents365-ai
• Bilibili: https://space.bilibili.com/441831884

📄 License

MIT