{"id":50754715,"url":"https://github.com/Agents365-ai/drawio-skill","last_synced_at":"2026-06-13T17:00:40.938Z","repository":{"id":341866531,"uuid":"1171833693","full_name":"Agents365-ai/drawio-skill","owner":"Agents365-ai","description":"Generate draw.io diagrams from natural language with 6 presets and a 2-round self-check loop. Exports to PNG/SVG/PDF/JPG.","archived":false,"fork":false,"pushed_at":"2026-06-02T13:10:22.000Z","size":2100,"stargazers_count":2043,"open_issues_count":1,"forks_count":125,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-06-02T13:14:19.452Z","etag":null,"topics":["agent-skill","agent-skills","architecture-diagram","claude-code","claude-code-skill","claude-skills","diagram","drawio","erd","flowchart","openclaw","openclaw-skills","skill-md","skillsmp","uml"],"latest_commit_sha":null,"homepage":"https://agents365-ai.github.io/drawio-skill/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Agents365-ai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-03T16:54:59.000Z","updated_at":"2026-06-02T12:45:41.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Agents365-ai/drawio-skill","commit_stats":null,"previous_names":["agents365-ai/drawio-skill"],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/Agents365-ai/drawio-skill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Agents365-ai%2Fdrawio-skill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Agents365-ai%2Fdrawio-skill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Agents365-ai%2Fdrawio-skill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Agents365-ai%2Fdrawio-skill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Agents365-ai","download_url":"https://codeload.github.com/Agents365-ai/drawio-skill/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Agents365-ai%2Fdrawio-skill/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34292326,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-13T02:00:06.617Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agent-skill","agent-skills","architecture-diagram","claude-code","claude-code-skill","claude-skills","diagram","drawio","erd","flowchart","openclaw","openclaw-skills","skill-md","skillsmp","uml"],"created_at":"2026-06-11T04:00:27.564Z","updated_at":"2026-06-13T17:00:40.931Z","avatar_url":"https://github.com/Agents365-ai.png","language":"Python","funding_links":[],"categories":["Skills \u0026 Plugins","Skills, Plugins, and Extensions","🧠 Agent Skills","Source Catalog","Uncategorized","⭐ 精选第三方技能","Diagram and Visual Skills"],"sub_categories":["agentskills.io Ecosystem","Skills and skill ecosystems","Uncategorized","💻 开发效率"],"readme":"# drawio-skill — From Text to Professional Diagrams\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![GitHub stars](https://img.shields.io/github/stars/Agents365-ai/drawio-skill?style=flat\u0026logo=github)](https://github.com/Agents365-ai/drawio-skill/stargazers)\n[![GitHub forks](https://img.shields.io/github/forks/Agents365-ai/drawio-skill?style=flat\u0026logo=github)](https://github.com/Agents365-ai/drawio-skill/network/members)\n[![Latest Release](https://img.shields.io/github/v/release/Agents365-ai/drawio-skill?logo=github)](https://github.com/Agents365-ai/drawio-skill/releases/latest)\n[![Last Commit](https://img.shields.io/github/last-commit/Agents365-ai/drawio-skill?logo=github)](https://github.com/Agents365-ai/drawio-skill/commits/main)\n\n[![SkillsMP](https://img.shields.io/badge/SkillsMP-listed-1f6feb)](https://skillsmp.com/skills/agents365-ai-drawio-skill-skills-drawio-skill-skill-md)\n[![ClawHub](https://img.shields.io/badge/ClawHub-listed-ff6b35)](https://clawhub.ai/agents365-ai/drawio-pro-skill)\n[![Claude Code Plugin](https://img.shields.io/badge/Claude%20Code-plugin-8a2be2)](https://github.com/Agents365-ai/365-skills)\n[![Agent Skills](https://img.shields.io/badge/Agent%20Skills-compatible-2ea44f)](https://agentskills.io)\n[![Discord](https://img.shields.io/badge/Discord-Join-5865F2?logo=discord\u0026logoColor=white)](https://discord.gg/79JF5Atuk)\n\n**English** · [中文](README_CN.md) · [📖 Online Docs](https://agents365-ai.github.io/drawio-skill/)\n\nA 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.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/microservices-example.png\" width=\"900\" alt=\"Microservices Architecture — generated from a single natural-language prompt\"\u003e\n\u003c/p\u003e\n\n## ✨ Highlights\n\n- **6 diagram type presets** — ERD, UML Class, Sequence, Architecture, ML/Deep Learning, Flowchart\n- **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\n- **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)\n- **AI / LLM brand logos** — 321 logos (OpenAI, Claude, Gemini, Mistral, Llama, Ollama, LangChain…) that draw.io has none of, for LLM-app architecture diagrams\n- **Self-check + auto-fix** — reads its own PNG output and auto-fixes overlaps, clipped labels, stacked edges, and more (up to 2 rounds)\n- **Iterative feedback loop** — up to 5 rounds of targeted refinement\n- **Style presets** — capture your visual style from a `.drawio` file or image, reuse on demand\n- **Clean layout** — grid-aligned, spacing scales with diagram size, connectors routed clear of nodes\n- **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)\n\n## 🖼️ Examples\n\n\u003e [!TIP]\n\u003e **The hero image above was generated from this single prompt:**\n\n```\nCreate a microservices e-commerce architecture with Mobile/Web/Admin clients,\nAPI Gateway (auth + rate limiting + routing), Auth/User/Order/Product/Payment\nservices, Kafka message queue, Notification service, and User DB / Order DB /\nProduct DB / Redis Cache / Stripe API\n```\n\nThe skill is designed to route edges cleanly across different topologies, avoiding lines that cross through shapes:\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" width=\"33%\"\u003e\n      \u003cimg src=\"assets/demo-star.png\" alt=\"Star topology\" width=\"100%\"\u003e\u003cbr\u003e\n      \u003cb\u003eStar\u003c/b\u003e · 7 nodes\u003cbr\u003e\n      \u003csub\u003eCentral message broker with 6 microservices radiating outward, no edge crossings on this example.\u003c/sub\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"33%\"\u003e\n      \u003cimg src=\"assets/demo-layered.png\" alt=\"Layered flow\" width=\"100%\"\u003e\u003cbr\u003e\n      \u003cb\u003eLayered\u003c/b\u003e · 10 nodes / 4 tiers\u003cbr\u003e\n      \u003csub\u003eE-commerce stack with horizontal and diagonal cross-connections routed via corridors.\u003c/sub\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"33%\"\u003e\n      \u003cimg src=\"assets/demo-ring.png\" alt=\"Ring cycle\" width=\"100%\"\u003e\u003cbr\u003e\n      \u003cb\u003eRing\u003c/b\u003e · 8 nodes\u003cbr\u003e\n      \u003csub\u003eCI/CD pipeline with a closed loop and 2 spur branches flowing along the perimeter.\u003c/sub\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\nFull walkthrough in [docs/USAGE.md](docs/USAGE.md).\n\n## 🚀 Installation\n\n### 1. Install the draw.io desktop CLI\n\n| Platform | Command |\n|----------|---------|\n| **macOS** | `brew install --cask drawio` |\n| **Windows** | [Download installer](https://github.com/jgraph/drawio-desktop/releases) |\n| **Linux** | `.deb`/`.rpm` from [releases](https://github.com/jgraph/drawio-desktop/releases); `sudo apt install xvfb` for headless |\n\nVerify 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).\n\n### 2. Install the skill\n\n```bash\n# Any agent (Claude Code, Cursor, Copilot, ...)\nnpx skills add Agents365-ai/365-skills -g\n```\n\n```text\n# Claude Code plugin marketplace\n\u003e /plugin marketplace add Agents365-ai/365-skills\n\u003e /plugin install drawio\n```\n\n```bash\n# Manual install\ngit clone https://github.com/Agents365-ai/drawio-skill.git \\\n  ~/.claude/skills/drawio-skill\n```\n\nAlso 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).\n\n**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).\n\n## ⚡ Quick Start\n\nAfter installation, just describe what you want. For example, an ML model:\n\n```\nDraw a Transformer encoder-decoder for machine translation: 6-layer encoder\nwith self-attention, 6-layer decoder with cross-attention, input embeddings\n(batch × 512 × 768), positional encoding, and a final output projection.\nAnnotate tensor shapes between layers and color-code by layer type.\n```\n\nThe skill plans the layout, generates the `.drawio` XML, exports to your chosen format, self-checks the result, and lets you iterate.\n\n## 🗺️ Visualize a Codebase\n\nBeyond hand-authored diagrams, the skill turns **existing code into structure diagrams** — no manual coordinates. Just ask:\n\n\u003e *\"Visualize the module structure of this Python project\"* · *\"Draw the class hierarchy of `mypackage`\"*\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/code-structure-example.png\" width=\"900\" alt=\"Auto-generated class hierarchy of Python's logging package — modules boxed, inheritance arrows resolved\"\u003e\n\u003c/p\u003e\n\n\u003csub\u003e↑ Python's \u003ccode\u003elogging\u003c/code\u003e package as a class hierarchy — one command, modules auto-boxed, every inheritance edge resolved.\u003c/sub\u003e\n\nUnder the hood it runs a bundled extractor → auto-layout → validate pipeline:\n\n```bash\n# Import graph — Python / JS-TS / Go / Rust\npython3 scripts/pyimports.py   myproject --group -o graph.json\npython3 scripts/jsimports.py   ./src     --group -o graph.json\npython3 scripts/goimports.py   ./module  --group -o graph.json\npython3 scripts/rustimports.py ./crate   --group -o graph.json\n\n# Python class-inheritance hierarchy\npython3 scripts/pyclasses.py   mypackage --group -o graph.json\n\n# any extractor → auto-layout → editable .drawio\npython3 scripts/autolayout.py  graph.json -o diagram.drawio\n```\n\n| Piece | What it does |\n|---|---|\n| **5 extractors** | import graphs for **Python · JS/TS · Go · Rust**, plus **Python class inheritance** |\n| **Auto-layout** | Graphviz places nodes and routes orthogonal edges *around* them — removes the manual-coordinate ceiling for large graphs |\n| **Transitive reduction** | drops edges implied by a longer path, turning a dense hairball into a traceable graph (asyncio: 149 → 46 edges) |\n| **Nested containers** | `--group` boxes modules by sub-package, nested for deep package trees |\n| **Deterministic validator** | `validate.py` lints the `.drawio` (dangling edges, duplicate ids, overlaps) before the visual self-check |\n\nLayout 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).\n\n## 🧩 Supported Diagram Types\n\n| Category | Examples | Notable features |\n|---|---|---|\n| Architecture | microservices, cloud (AWS/GCP/Azure), network topology, deployment | Tier-based swimlanes, hub-center strategy |\n| ML / Deep Learning | Transformer, CNN, LSTM, GRU | Tensor shape annotations, layer-type color coding |\n| Flowcharts | business processes, workflows, decision trees, state machines | Semantic shapes (parallelogram I/O, diamond decisions) |\n| UML | class diagrams, sequence diagrams | Inheritance / composition / aggregation arrows; lifelines + activation boxes |\n| Data | ER diagrams, data flow diagrams (DFD) | Table containers, PK/FK notation |\n| Other | org charts, mind maps, wireframes | — |\n\n## 🔍 Shape Search\n\nNeed 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.\n\n\u003e *\"Add an AWS Lambda wired to an S3 bucket\"* · *\"Use the real Kubernetes pod icon\"*\n\n```bash\npython3 scripts/shapesearch.py \"aws lambda\" --limit 5\n# → Lambda (77x93)\n#   outlineConnect=0;...;shape=mxgraph.aws3.lambda;fillColor=#F58534;...\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/shape-search-example.png\" width=\"900\" alt=\"Serverless AWS architecture built from official draw.io icons resolved by shapesearch.py\"\u003e\n\u003c/p\u003e\n\n\u003csub\u003e↑ A serverless AWS architecture — every icon is the real official draw.io shape resolved by \u003ccode\u003eshapesearch.py\u003c/code\u003e, not a hand-guessed \u003ccode\u003eshape=\u003c/code\u003e string.\u003c/sub\u003e\n\nCovers AWS / Azure / GCP / Cisco / Kubernetes / UML / BPMN / ER / electrical / P\u0026ID and the general shape sets. Hand-writable style cheatsheet + search usage in [references/shapes.md](skills/drawio-skill/references/shapes.md).\n\n## 🤖 AI / LLM Brand Logos\n\ndraw.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).\n\n```bash\npython3 scripts/aiicons.py \"claude\" --json      # CDN-referenced (default)\npython3 scripts/aiicons.py \"openai\" --embed     # self-contained data URI\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/ai-logos-example.png\" width=\"900\" alt=\"Multi-provider LLM app diagram with real AI brand logos resolved by aiicons.py\"\u003e\n\u003c/p\u003e\n\n\u003csub\u003e↑ A multi-provider LLM app — every brand logo resolved by \u003ccode\u003eaiicons.py\u003c/code\u003e. Icons are referenced from the unpkg CDN by default (network needed at render time); \u003ccode\u003e--embed\u003c/code\u003e inlines them for offline use. Logos are trademarks of their owners, used for identification only.\u003c/sub\u003e\n\n## 🎨 Style Presets\n\nCapture 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:\n\n```\nDraw a microservices architecture using my \"corporate\" style\n```\n\n```\nLearn my style from ~/diagrams/brand.drawio as \"mybrand\"\n```\n\nThe 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).\n\n## 🔄 How it works\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/workflow.png\" width=\"700\" alt=\"Internal workflow\"\u003e\n\u003c/p\u003e\n\nBehind 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**.\n\n## 🆚 Comparison\n\n### vs Native Agent (no skill)\n\n| Feature | Native agent | drawio-skill |\n|---|---|---|\n| Self-check after export | ❌ | ✅ reads PNG, auto-fixes 6 issue types |\n| Iterative review loop | ❌ manual re-prompt | ✅ targeted edits, 5-round safety valve |\n| Diagram type presets | ❌ | ✅ 6 presets (ERD, UML, Seq, Arch, ML, Flow) |\n| Visualize a codebase | ❌ | ✅ import graphs (Py/JS/Go/Rust) + class diagrams |\n| Auto-layout for large graphs | ❌ hand-places, overlaps | ✅ Graphviz placement, ortho routing, nested containers |\n| Structural validation | ❌ | ✅ deterministic `.drawio` linter |\n| Official shape search | ❌ guesses, blank boxes | ✅ exact style for 10k+ AWS/Azure/GCP/UML shapes |\n| AI/LLM brand logos | ❌ none | ✅ 321 logos (OpenAI/Claude/Gemini/…) via aiicons.py |\n| Grid-aligned layout | ❌ | ✅ 10px snap, routing corridors |\n| Color palette | random / inconsistent | ✅ 7-color semantic system |\n| Style presets | ❌ | ✅ learn from `.drawio` file or image |\n\n### vs Other draw.io Skills \u0026 Tools\n\n| Feature | drawio-skill | [jgraph/drawio-mcp](https://github.com/jgraph/drawio-mcp) (official)\u003cbr\u003e![stars](https://img.shields.io/github/stars/jgraph/drawio-mcp?style=flat-square\u0026logo=github) | [bahayonghang/drawio-skills](https://github.com/bahayonghang/drawio-skills)\u003cbr\u003e![stars](https://img.shields.io/github/stars/bahayonghang/drawio-skills?style=flat-square\u0026logo=github) | [GBSOSS/ai-drawio](https://github.com/GBSOSS/ai-drawio)\u003cbr\u003e![stars](https://img.shields.io/github/stars/GBSOSS/ai-drawio?style=flat-square\u0026logo=github) |\n|---|---|---|---|---|\n| **Approach** | Pure SKILL.md | SKILL.md / MCP / Project | YAML DSL + CLI (MCP optional) | Claude Code plugin |\n| **Dependencies** | draw.io desktop only | draw.io desktop | draw.io desktop (MCP optional) | draw.io plugin + browser |\n| **Multi-agent** | ✅ 6 platforms | ❌ Claude apps only | ✅ Claude / Gemini / Codex | ❌ Claude Code only |\n| **Self-check + auto-fix** | ✅ 2-round (reads PNG) | ❌ | ✅ validation + strict mode | ❌ screenshot only |\n| **Iterative review** | ✅ 5-round loop | ❌ generate once | ✅ 3 workflows | ❌ |\n| **Diagram presets** | ✅ 6 types | ❌ | ✅ paper-mode classifier | ❌ |\n| **ML/DL diagrams** | ✅ tensor shapes, layer colors | ❌ | ❌ | ❌ |\n| **Color system** | ✅ 7-color semantic | ❌ | ✅ 6 themes | ❌ |\n| **Official shape search** | ✅ 10k+ shapes (local) | ✅ 10k+ shapes (MCP) | ❌ | ❌ |\n| **AI/LLM brand logos** | ✅ 321 (lobe-icons) | ❌ | ❌ | ❌ |\n| **Browser fallback** | ✅ diagrams.net URL (viewer + editable) | ❌ inline preview only | ✅ via optional MCP | ✅ diagrams.net viewer (primary) |\n| **Zero-config** | ✅ copy `skills/drawio-skill/` | ✅ | ✅ desktop-only mode | ❌ needs plugin install |\n\nFull comparison + key-advantages summary in [docs/COMPARISON.md](docs/COMPARISON.md) (with audit timestamp).\n\n## 🎯 When to use (and when not to)\n\n**Good fit:**\n- Polished, precise diagrams — stakeholder decks, architecture, network topology, strict UML, ER diagrams\n- Solid opaque fills, 10,000+ official shapes, branded icons (AWS / Azure / GCP / Cisco / Kubernetes + AI/LLM logos), swimlanes, and custom geometry\n- Anything you'll export to PNG / SVG / PDF and keep editable\n\n**Reach for a sibling skill instead when you need:**\n- **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)\n- **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)\n- **Freeform infinite-canvas sketching / freehand strokes** → [tldraw-skill](https://github.com/Agents365-ai/tldraw-skill)\n\n## 🔗 Related Skills\n\nPart of the [Agents365-ai diagram-skill family](https://github.com/Agents365-ai) — pick the right tool for the job:\n\n| Skill | Style | Best for |\n|---|---|---|\n| [excalidraw-skill](https://github.com/Agents365-ai/excalidraw-skill) | Hand-drawn / sketchy | Whiteboard mockups, informal diagrams |\n| [mermaid-skill](https://github.com/Agents365-ai/mermaid-skill) | Text-based, auto-layout | README-embeddable, version-control friendly |\n| [plantuml-skill](https://github.com/Agents365-ai/plantuml-skill) | UML-focused | Class / sequence diagrams in CI pipelines |\n| [tldraw-skill](https://github.com/Agents365-ai/tldraw-skill) | Whiteboard collaboration | Casual sketches, FigJam-style boards |\n\n## 💬 Community\n\n- **Discord:** https://discord.gg/79JF5Atuk\n- **WeChat:** scan the QR code below\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/Agents365-ai/images_payment/main/qrcode/agents365ai_wechat_1.png\" width=\"200\" alt=\"WeChat Community Group\"\u003e\n\u003c/p\u003e\n\n## ❤️ Support\n\nIf this skill helps you, consider supporting the author:\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/Agents365-ai/images_payment/main/qrcode/wechat-pay.png\" width=\"180\" alt=\"WeChat Pay\"\u003e\n      \u003cbr\u003e\n      \u003cb\u003eWeChat Pay\u003c/b\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/Agents365-ai/images_payment/main/qrcode/alipay.png\" width=\"180\" alt=\"Alipay\"\u003e\n      \u003cbr\u003e\n      \u003cb\u003eAlipay\u003c/b\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/Agents365-ai/images_payment/main/qrcode/buymeacoffee.png\" width=\"180\" alt=\"Buy Me a Coffee\"\u003e\n      \u003cbr\u003e\n      \u003cb\u003eBuy Me a Coffee\u003c/b\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/Agents365-ai/images_payment/main/awarding/award.gif\" width=\"180\" alt=\"Give a Reward\"\u003e\n      \u003cbr\u003e\n      \u003cb\u003eGive a Reward\u003c/b\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## 👤 Author\n\n**Agents365-ai**\n\n- GitHub: https://github.com/Agents365-ai\n- Bilibili: https://space.bilibili.com/441831884\n\n## 📄 License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAgents365-ai%2Fdrawio-skill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAgents365-ai%2Fdrawio-skill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAgents365-ai%2Fdrawio-skill/lists"}