drawio-skill
From text to professional diagrams. Generate draw.io files from natural language β or turn an existing codebase into a structure diagram β with self-check, iterative refinement, 10,000+ official shapes, and AI/LLM brand logos.
/plugin marketplace add Agents365-ai/365-skills
Generated from one natural-language prompt β full prompt in the README.
Why This Skill
The only pure-SKILL.md solution that reads its own output and auto-fixes before showing you.
Visualize a Codebase
Turn a Python / JS-TS / Go / Rust project (import graphs) or a Python class hierarchy into an auto-laid-out diagram β Graphviz placement, transitive reduction, colour-by-module containers.
10,000+ Official Shapes
Search the real draw.io shape library (AWS, Azure, GCP, Cisco, Kubernetes, UML, BPMN, P&IDβ¦) for the exact style instead of guessing β no blank-box typos.
AI / LLM Brand Logos
321 logos (OpenAI, Claude, Gemini, Mistral, Llama, Ollama, LangChainβ¦) that draw.io has none of β for LLM-app architecture diagrams.
6 Diagram Presets
ERD, UML Class, Sequence, Architecture, ML/Deep Learning, Flowchart β each with preset shapes, styles, and layout conventions.
ML / Deep Learning
Transformer, CNN, LSTM architectures with tensor shape annotations (B, C, H, W). Built for NeurIPS, ICML, ICLR papers.
Self-Check Loop
Reads the exported PNG, detects 6 issue types (overlaps, clipped labels, stacked edges), and auto-fixes before showing you.
Animated Connectors
Add flowAnimation=1 for moving dot animations along arrows. Ideal for data-flow and pipeline diagrams in SVG.
Style Presets
Teach the skill your visual style from a .drawio file or image. Save by name and apply to future diagrams. 3 built-ins included: default, corporate, handdrawn.
6 Platforms, Zero Config
Claude Code, Opencode, OpenClaw, Hermes, Codex, SkillsMP β just one SKILL.md file + draw.io desktop. No MCP server, no background daemon.
Browser Fallback
No desktop CLI? Generates a diagrams.net URL that opens your diagram in the browser for viewing and editing.
Demo Gallery
Clean edge routing across different topologies β no lines crossing through shapes.
Star Topology
7 nodes β central broker, 6 services radiating outward
Layered Flow
10 nodes, 4 tiers β with cross-connections routed cleanly
Ring / Cycle
8 nodes β CI/CD pipeline with closed loop and spur branches
Visualize a Codebase
Python logging class hierarchy β 38 classes auto-laid-out, coloured by module
Official Shape Search
Serverless AWS architecture β every icon resolved by shapesearch.py
AI / LLM Brand Logos
Multi-provider LLM app β OpenAI, Claude, Geminiβ¦ via aiicons.py
vs Native Agent
What you get with the skill vs prompting an LLM directly.
| Feature | Native Agent | This Skill |
|---|---|---|
| Self-check after export | β | β 2-round auto-fix |
| Iterative review loop | β | β 5-round with targeted edits |
| Diagram type presets | β | β 6 presets (ERD, UML, Seq, Arch, ML, Flow) |
| ML model diagrams | β | β Tensor shapes, layer colors |
| Animated connectors | β | β flowAnimation=1 |
| Grid-aligned layout | β | β 10px snap |
| Complexity-scaled spacing | β | β 200β350px by node count |
| Color palette | Random | β 7-color semantic system |
| Edge routing rules | Basic | β Corridors + waypoints + distribution |
| Container/group nesting | β | β Swimlane + group + custom |
| Visualize a codebase | β | β import graphs (Py/JS/Go/Rust) + class diagrams |
| Auto-layout for large graphs | β | β Graphviz placement, ortho routing, nested containers |
| Structural validation | β | β deterministic .drawio linter |
| Official shape search | β | β 10,000+ AWS/Azure/GCP/UML styles |
| AI/LLM brand logos | β | β 321 logos (OpenAI/Claude/Geminiβ¦) |
| Embed diagram in export | β | β --embed-diagram |
| Browser fallback | β | β diagrams.net URL |
| Auto-launch desktop app | β | β Opens .drawio for fine-tuning |
| Style presets | β | β Learn, save & apply named styles |
| Plugin marketplace install | β | β via Agents365-ai/365-skills |
Install
Pick your platform. Takes 10 seconds.
# Plugin marketplace (recommended) /plugin marketplace add Agents365-ai/365-skills /plugin install drawio # Manual global install git clone https://github.com/Agents365-ai/drawio-skill.git ~/.claude/skills/drawio-skill # Manual project-level install git clone https://github.com/Agents365-ai/drawio-skill.git .claude/skills/drawio-skill
# Global install (Opencode-native path) git clone https://github.com/Agents365-ai/drawio-skill.git ~/.config/opencode/skills/drawio-skill # Project-level install git clone https://github.com/Agents365-ai/drawio-skill.git .opencode/skills/drawio-skill # Also auto-detected from existing Claude Code install # (~/.claude/skills/ and .claude/skills/ are read automatically)
# Via ClawHub registry clawhub install drawio-pro-skill # Manual install git clone https://github.com/Agents365-ai/drawio-skill.git ~/.openclaw/skills/drawio-skill
# Via SkillsMP CLI skills install drawio-skill
# Via ClawHub CLI clawhub install drawio-pro-skill
# User-level install git clone https://github.com/Agents365-ai/drawio-skill.git ~/.agents/skills/drawio-skill # Project-level install git clone https://github.com/Agents365-ai/drawio-skill.git .agents/skills/drawio-skill
Related Skills
Part of the Agents365-ai diagram-skill family β pick the right tool for the job.
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.
Support
If this skill helps you, consider supporting the author.
WeChat Pay
Alipay
Buy Me a Coffee
Give a Reward