Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/Agents365-ai/drawio-skill

Generate draw.io diagrams from natural language with 6 presets and a 2-round self-check loop. Exports to PNG/SVG/PDF/JPG.
https://github.com/Agents365-ai/drawio-skill

agent-skill agent-skills architecture-diagram claude-code claude-code-skill claude-skills diagram drawio erd flowchart openclaw openclaw-skills skill-md skillsmp uml

Last synced: about 1 month ago
JSON representation

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

Awesome Lists containing this project

README 

          
# drawio-skill β€” From Text to Professional Diagrams



[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

[![GitHub stars](https://img.shields.io/github/stars/Agents365-ai/drawio-skill?style=flat&logo=github)](https://github.com/Agents365-ai/drawio-skill/stargazers)

[![GitHub forks](https://img.shields.io/github/forks/Agents365-ai/drawio-skill?style=flat&logo=github)](https://github.com/Agents365-ai/drawio-skill/network/members)

[![Latest Release](https://img.shields.io/github/v/release/Agents365-ai/drawio-skill?logo=github)](https://github.com/Agents365-ai/drawio-skill/releases/latest)

[![Last Commit](https://img.shields.io/github/last-commit/Agents365-ai/drawio-skill?logo=github)](https://github.com/Agents365-ai/drawio-skill/commits/main)



[![SkillsMP](https://img.shields.io/badge/SkillsMP-listed-1f6feb)](https://skillsmp.com/skills/agents365-ai-drawio-skill-skills-drawio-skill-skill-md)

[![ClawHub](https://img.shields.io/badge/ClawHub-listed-ff6b35)](https://clawhub.ai/agents365-ai/drawio-pro-skill)

[![Claude Code Plugin](https://img.shields.io/badge/Claude%20Code-plugin-8a2be2)](https://github.com/Agents365-ai/365-skills)

[![Agent Skills](https://img.shields.io/badge/Agent%20Skills-compatible-2ea44f)](https://agentskills.io)

[![Discord](https://img.shields.io/badge/Discord-Join-5865F2?logo=discord&logoColor=white)](https://discord.gg/79JF5Atuk)



**English** Β· [δΈ­ζ–‡](README_CN.md) Β· [πŸ“– Online Docs](https://agents365-ai.github.io/drawio-skill/)



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. It can also turn an **existing codebase** (Python / JS-TS / Go / Rust) into an auto-laid-out structure diagram. Works with **Claude Code, Cursor, Copilot, OpenClaw, Codex, Hermes**, and any agent compatible with the [Agent Skills](https://agentskills.io) format.





  Microservices Architecture β€” generated from a single natural-language prompt




## ✨ Highlights



- **6 diagram type presets** β€” ERD, UML Class, Sequence, Architecture, ML/Deep Learning, Flowchart

- **Visualize a codebase** β€” extract and auto-lay-out the structure of a Python / JS-TS / Go / Rust project (import graphs) or a Python class hierarchy β€” Graphviz placement, transitive reduction, nested module containers

- **Search 10,000+ official shapes** β€” resolve the exact AWS / Azure / GCP / Cisco / Kubernetes / UML / BPMN icon style instead of guessing (no more blank-box `shape=mxgraph.*` 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

- **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 topology


      Star Β· 7 nodes


      Central message broker with 6 microservices radiating outward, no edge crossings on this example.

    

    

      Layered flow


      Layered Β· 10 nodes / 4 tiers


      E-commerce stack with horizontal and diagonal cross-connections routed via corridors.

    

    

      Ring cycle


      Ring Β· 8 nodes


      CI/CD pipeline with a closed loop and 2 spur branches flowing along the perimeter.

    

  



Full walkthrough in [docs/USAGE.md](docs/USAGE.md).



## πŸš€ Installation



### 1. Install the draw.io desktop CLI



| Platform | Command |

|----------|---------|

| **macOS** | `brew install --cask drawio` |

| **Windows** | [Download installer](https://github.com/jgraph/drawio-desktop/releases) |

| **Linux** | `.deb`/`.rpm` from [releases](https://github.com/jgraph/drawio-desktop/releases); `sudo apt install xvfb` for headless |



Verify with `drawio --version`. On **WSL2** the CLI is the Windows desktop exe reached via `/mnt/c` β€” the skill detects this automatically (see [troubleshooting](skills/drawio-skill/references/troubleshooting.md)). Full recipes in [docs/INSTALL_CLI.md](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](https://skillsmp.com/skills/agents365-ai-drawio-skill-skills-drawio-skill-skill-md) and [ClawHub](https://clawhub.ai/agents365-ai/drawio-pro-skill).



**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](docs/INSTALL_SKILL.md#updates). Release history in [CHANGELOG.md](CHANGELOG.md).



## ⚑ 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.



## πŸ—ΊοΈ Visualize a Codebase



Beyond hand-authored diagrams, the skill turns **existing code into structure diagrams** β€” no manual coordinates. Just ask:



> *"Visualize the module structure of this Python project"* Β· *"Draw the class hierarchy of `mypackage`"*





  Auto-generated class hierarchy of Python's logging package β€” modules boxed, inheritance arrows resolved




↑ Python's logging package as a class hierarchy β€” one command, modules auto-boxed, every inheritance edge resolved.



Under the hood it runs a bundled extractor β†’ auto-layout β†’ validate pipeline:



```bash

# Import graph β€” Python / JS-TS / Go / Rust

python3 scripts/pyimports.py   myproject --group -o graph.json

python3 scripts/jsimports.py   ./src     --group -o graph.json

python3 scripts/goimports.py   ./module  --group -o graph.json

python3 scripts/rustimports.py ./crate   --group -o graph.json



# Python class-inheritance hierarchy

python3 scripts/pyclasses.py   mypackage --group -o graph.json



# any extractor β†’ auto-layout β†’ editable .drawio

python3 scripts/autolayout.py  graph.json -o diagram.drawio

```



| Piece | What it does |

|---|---|

| **5 extractors** | import graphs for **Python Β· JS/TS Β· Go Β· Rust**, plus **Python class inheritance** |

| **Auto-layout** | Graphviz places nodes and routes orthogonal edges *around* them β€” removes the manual-coordinate ceiling for large graphs |

| **Transitive reduction** | drops edges implied by a longer path, turning a dense hairball into a traceable graph (asyncio: 149 β†’ 46 edges) |

| **Nested containers** | `--group` boxes modules by sub-package, nested for deep package trees |

| **Deterministic validator** | `validate.py` lints the `.drawio` (dangling edges, duplicate ids, overlaps) before the visual self-check |



Layout needs Graphviz (`brew install graphviz` / `apt install graphviz`) β€” optional; everything else works without it. Full format + flag reference in [references/autolayout.md](skills/drawio-skill/references/autolayout.md).



## 🧩 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 | β€” |



## πŸ” Shape Search



Need a real AWS / Azure / GCP / Cisco / Kubernetes / UML / BPMN icon? The skill searches **10,000+ official draw.io shapes** for the exact style string β€” so vendor icons render correctly instead of falling back to a blank box from a guessed `shape=mxgraph.*` name.



> *"Add an AWS Lambda wired to an S3 bucket"* Β· *"Use the real Kubernetes pod icon"*



```bash

python3 scripts/shapesearch.py "aws lambda" --limit 5

# β†’ Lambda (77x93)

#   outlineConnect=0;...;shape=mxgraph.aws3.lambda;fillColor=#F58534;...

```





  Serverless AWS architecture built from official draw.io icons resolved by shapesearch.py




↑ A serverless AWS architecture β€” every icon is the real official draw.io shape resolved by shapesearch.py, not a hand-guessed shape= string.



Covers AWS / Azure / GCP / Cisco / Kubernetes / UML / BPMN / ER / electrical / P&ID and the general shape sets. Hand-writable style cheatsheet + search usage in [references/shapes.md](skills/drawio-skill/references/shapes.md).



## πŸ€– AI / LLM Brand Logos



draw.io ships **no** modern AI/LLM logos, so an LLM-app diagram renders as generic boxes. `aiicons.py` resolves a brand name to a draw.io image style for any of **321 logos** (OpenAI, Claude, Gemini, Mistral, Llama, Cohere, DeepSeek, Qwen, Ollama, LangChain, HuggingFace…) from [lobe-icons](https://github.com/lobehub/lobe-icons) (MIT).



```bash

python3 scripts/aiicons.py "claude" --json      # CDN-referenced (default)

python3 scripts/aiicons.py "openai" --embed     # self-contained data URI

```





  Multi-provider LLM app diagram with real AI brand logos resolved by aiicons.py




↑ A multi-provider LLM app β€” every brand logo resolved by aiicons.py. Icons are referenced from the unpkg CDN by default (network needed at render time); --embed inlines them for offline use. Logos are trademarks of their owners, used for identification only.



## 🎨 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](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) |

| Visualize a codebase | ❌ | βœ… import graphs (Py/JS/Go/Rust) + class diagrams |

| Auto-layout for large graphs | ❌ hand-places, overlaps | βœ… Graphviz placement, ortho routing, nested containers |

| Structural validation | ❌ | βœ… deterministic `.drawio` linter |

| Official shape search | ❌ guesses, blank boxes | βœ… exact style for 10k+ AWS/Azure/GCP/UML shapes |

| AI/LLM brand logos | ❌ none | βœ… 321 logos (OpenAI/Claude/Gemini/…) via aiicons.py |

| 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](https://github.com/jgraph/drawio-mcp) (official)
![stars](https://img.shields.io/github/stars/jgraph/drawio-mcp?style=flat-square&logo=github) | [bahayonghang/drawio-skills](https://github.com/bahayonghang/drawio-skills)
![stars](https://img.shields.io/github/stars/bahayonghang/drawio-skills?style=flat-square&logo=github) | [GBSOSS/ai-drawio](https://github.com/GBSOSS/ai-drawio)
![stars](https://img.shields.io/github/stars/GBSOSS/ai-drawio?style=flat-square&logo=github) |

|---|---|---|---|---|

| **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 | ❌ |

| **Official shape search** | βœ… 10k+ shapes (local) | βœ… 10k+ shapes (MCP) | ❌ | ❌ |

| **AI/LLM brand logos** | βœ… 321 (lobe-icons) | ❌ | ❌ | ❌ |

| **Browser fallback** | βœ… diagrams.net URL (viewer + editable) | ❌ 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](docs/COMPARISON.md) (with audit timestamp).



## 🎯 When to use (and when not to)



**Good fit:**

- Polished, precise diagrams β€” stakeholder decks, architecture, network topology, strict UML, ER diagrams

- Solid opaque fills, 10,000+ official shapes, branded icons (AWS / Azure / GCP / Cisco / Kubernetes + AI/LLM logos), swimlanes, and custom geometry

- Anything you'll export to PNG / SVG / PDF and keep editable



**Reach for a sibling skill instead when you need:**

- **A casual, hand-drawn / whiteboard look** β†’ [excalidraw-skill](https://github.com/Agents365-ai/excalidraw-skill) or [tldraw-skill](https://github.com/Agents365-ai/tldraw-skill)

- **Diagrams-as-code that live in git and render in Markdown** β†’ [mermaid-skill](https://github.com/Agents365-ai/mermaid-skill) (general) or [plantuml-skill](https://github.com/Agents365-ai/plantuml-skill) (UML)

- **Freeform infinite-canvas sketching / freehand strokes** β†’ [tldraw-skill](https://github.com/Agents365-ai/tldraw-skill)



## πŸ”— Related Skills



Part of the [Agents365-ai diagram-skill family](https://github.com/Agents365-ai) β€” pick the right tool for the job:



| Skill | Style | Best for |

|---|---|---|

| [excalidraw-skill](https://github.com/Agents365-ai/excalidraw-skill) | Hand-drawn / sketchy | Whiteboard mockups, informal diagrams |

| [mermaid-skill](https://github.com/Agents365-ai/mermaid-skill) | Text-based, auto-layout | README-embeddable, version-control friendly |

| [plantuml-skill](https://github.com/Agents365-ai/plantuml-skill) | UML-focused | Class / sequence diagrams in CI pipelines |

| [tldraw-skill](https://github.com/Agents365-ai/tldraw-skill) | Whiteboard collaboration | Casual sketches, FigJam-style boards |



## πŸ’¬ Community



- **Discord:** https://discord.gg/79JF5Atuk

- **WeChat:** scan the QR code below





  WeChat Community Group




## ❀️ Support



If this skill helps you, consider supporting the author:



  

    

      WeChat Pay

      


      WeChat Pay

    

    

      Alipay

      


      Alipay

    

    

      Buy Me a Coffee

      


      Buy Me a Coffee

    

    

      Give a Reward

      


      Give a Reward

    

  



## πŸ‘€ Author



**Agents365-ai**



- GitHub: https://github.com/Agents365-ai

- Bilibili: https://space.bilibili.com/441831884



## πŸ“„ License



[MIT](LICENSE)