Agents365-ai/drawio-skill

Name: drawio-skill
Author: Agents365-ai

Generate draw.io diagrams from natural language with 6 presets and a 2-round self-check loop. Exports to PNG/SVG/PDF/JPG.

★ 2.0K langPython licenseMIT updated2026-05-19

view on github → homepage

overview

This project is a diagramming skill that converts natural-language descriptions into professional .drawio XML files and high-resolution image exports. It utilizes the native draw.io desktop CLI to render diagrams and features a self-correction mechanism that analyzes its own output to fix layout issues like overlapping labels or stacked edges. The tool supports six specialized presets including UML, ERD, and machine learning architectures while allowing users to capture and reuse custom visual styles from existing files. It integrates with various AI agents such as Claude Code, Cursor, and Hermes through the Agent Skills format.

Generates .drawio XML and exports to PNG, SVG, PDF, or JPG
Self-checks and auto-fixes layout issues using visual feedback loops
Six diagram presets including Architecture, UML, and Deep Learning

full readme from github

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.

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:

Star · 7 nodes
_{Central message broker with 6 microservices radiating outward, no edge crossings on this example.}

Layered · 10 nodes / 4 tiers
_{E-commerce stack with horizontal and diagonal cross-connections routed via corridors.}

Ring · 8 nodes
_{CI/CD pipeline with a closed loop and 2 spur branches flowing along the perimeter.}

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