[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-74237":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":16,"starSnapshotCount":16,"syncStatus":36,"lastSyncTime":37,"discoverSource":38},74237,"drawio-skill","Agents365-ai\u002Fdrawio-skill","Agents365-ai","Generate draw.io diagrams from natural language — 6 presets, vision self-check + up to 5-round refinement, codebase-to-diagram, 10,000+ official shapes & 321 AI\u002FLLM brand logos. Exports PNG\u002FSVG\u002FPDF\u002FJPG.","https:\u002F\u002Fagents365-ai.github.io\u002Fdrawio-skill\u002F",null,"Python",2335,155,3,1,0,194,337,901,582,105.58,false,"main",true,[26,27,28,5,29,30,31,32],"agent-skills","codex","drawio","hermes-agent","openclaw","openclaw-skills","skill-md-skillsmp","2026-06-12 04:01:13","# drawio-skill — From Text to Professional Diagrams\n\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-yellow.svg)](LICENSE)\n[![GitHub stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FAgents365-ai\u002Fdrawio-skill?style=flat&logo=github)](https:\u002F\u002Fgithub.com\u002FAgents365-ai\u002Fdrawio-skill\u002Fstargazers)\n[![GitHub forks](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002FAgents365-ai\u002Fdrawio-skill?style=flat&logo=github)](https:\u002F\u002Fgithub.com\u002FAgents365-ai\u002Fdrawio-skill\u002Fnetwork\u002Fmembers)\n[![Latest Release](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fv\u002Frelease\u002FAgents365-ai\u002Fdrawio-skill?logo=github)](https:\u002F\u002Fgithub.com\u002FAgents365-ai\u002Fdrawio-skill\u002Freleases\u002Flatest)\n[![Last Commit](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flast-commit\u002FAgents365-ai\u002Fdrawio-skill?logo=github)](https:\u002F\u002Fgithub.com\u002FAgents365-ai\u002Fdrawio-skill\u002Fcommits\u002Fmain)\n\n[![SkillsMP](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FSkillsMP-listed-1f6feb)](https:\u002F\u002Fskillsmp.com\u002Fskills\u002Fagents365-ai-drawio-skill-skills-drawio-skill-skill-md)\n[![ClawHub](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FClawHub-listed-ff6b35)](https:\u002F\u002Fclawhub.ai\u002Fagents365-ai\u002Fdrawio-pro-skill)\n[![Claude Code Plugin](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FClaude%20Code-plugin-8a2be2)](https:\u002F\u002Fgithub.com\u002FAgents365-ai\u002F365-skills)\n[![Agent Skills](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAgent%20Skills-compatible-2ea44f)](https:\u002F\u002Fagentskills.io)\n[![Discord](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDiscord-Join-5865F2?logo=discord&logoColor=white)](https:\u002F\u002Fdiscord.gg\u002F79JF5Atuk)\n\n**English** · [中文](README_CN.md) · [📖 Online Docs](https:\u002F\u002Fagents365-ai.github.io\u002Fdrawio-skill\u002F)\n\nA skill that turns natural-language descriptions into `.drawio` XML and exports them to PNG \u002F SVG \u002F PDF \u002F 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](https:\u002F\u002Fagentskills.io) format.\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"assets\u002Fmicroservices-example.png\" width=\"900\" alt=\"Microservices Architecture — generated from a single natural-language prompt\">\n\u003C\u002Fp>\n\n## ✨ Highlights\n\n- **6 diagram type presets** — ERD, UML Class, Sequence, Architecture, ML\u002FDeep Learning, Flowchart\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> [!TIP]\n> **The hero image above was generated from this single prompt:**\n\n```\nCreate a microservices e-commerce architecture with Mobile\u002FWeb\u002FAdmin clients,\nAPI Gateway (auth + rate limiting + routing), Auth\u002FUser\u002FOrder\u002FProduct\u002FPayment\nservices, Kafka message queue, Notification service, and User DB \u002F Order DB \u002F\nProduct DB \u002F Redis Cache \u002F Stripe API\n```\n\nThe skill is designed to route edges cleanly across different topologies, avoiding lines that cross through shapes:\n\n\u003Ctable>\n  \u003Ctr>\n    \u003Ctd align=\"center\" width=\"33%\">\n      \u003Cimg src=\"assets\u002Fdemo-star.png\" alt=\"Star topology\" width=\"100%\">\u003Cbr>\n      \u003Cb>Star\u003C\u002Fb> · 7 nodes\u003Cbr>\n      \u003Csub>Central message broker with 6 microservices radiating outward, no edge crossings on this example.\u003C\u002Fsub>\n    \u003C\u002Ftd>\n    \u003Ctd align=\"center\" width=\"33%\">\n      \u003Cimg src=\"assets\u002Fdemo-layered.png\" alt=\"Layered flow\" width=\"100%\">\u003Cbr>\n      \u003Cb>Layered\u003C\u002Fb> · 10 nodes \u002F 4 tiers\u003Cbr>\n      \u003Csub>E-commerce stack with horizontal and diagonal cross-connections routed via corridors.\u003C\u002Fsub>\n    \u003C\u002Ftd>\n    \u003Ctd align=\"center\" width=\"33%\">\n      \u003Cimg src=\"assets\u002Fdemo-ring.png\" alt=\"Ring cycle\" width=\"100%\">\u003Cbr>\n      \u003Cb>Ring\u003C\u002Fb> · 8 nodes\u003Cbr>\n      \u003Csub>CI\u002FCD pipeline with a closed loop and 2 spur branches flowing along the perimeter.\u003C\u002Fsub>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\nFull walkthrough in [docs\u002FUSAGE.md](docs\u002FUSAGE.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:\u002F\u002Fgithub.com\u002Fjgraph\u002Fdrawio-desktop\u002Freleases) |\n| **Linux** | `.deb`\u002F`.rpm` from [releases](https:\u002F\u002Fgithub.com\u002Fjgraph\u002Fdrawio-desktop\u002Freleases); `sudo apt install xvfb` for headless |\n\nVerify with `drawio --version`. Full recipes in [docs\u002FINSTALL_CLI.md](docs\u002FINSTALL_CLI.md).\n\n### 2. Install the skill\n\n```bash\n# Any agent (Claude Code, Cursor, Copilot, ...)\nnpx skills add Agents365-ai\u002F365-skills -g\n```\n\n```text\n# Claude Code plugin marketplace\n> \u002Fplugin marketplace add Agents365-ai\u002F365-skills\n> \u002Fplugin install drawio\n```\n\n```bash\n# Manual install\ngit clone https:\u002F\u002Fgithub.com\u002FAgents365-ai\u002Fdrawio-skill.git \\\n  ~\u002F.claude\u002Fskills\u002Fdrawio-skill\n```\n\nAlso indexed on [SkillsMP](https:\u002F\u002Fskillsmp.com\u002Fskills\u002Fagents365-ai-drawio-skill-skills-drawio-skill-skill-md) and [ClawHub](https:\u002F\u002Fclawhub.ai\u002Fagents365-ai\u002Fdrawio-pro-skill).\n\n**Updating:** `\u002Fplugin update drawio` (Claude Code), `skills update drawio-skill` (SkillsMP), `clawhub update drawio-pro-skill` (OpenClaw), or `git pull` for manual installs — see [docs\u002FINSTALL_SKILL.md#updates](docs\u002FINSTALL_SKILL.md#updates).\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## 🧩 Supported Diagram Types\n\n| Category | Examples | Notable features |\n|---|---|---|\n| Architecture | microservices, cloud (AWS\u002FGCP\u002FAzure), network topology, deployment | Tier-based swimlanes, hub-center strategy |\n| ML \u002F 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\u002FO, diamond decisions) |\n| UML | class diagrams, sequence diagrams | Inheritance \u002F composition \u002F aggregation arrows; lifelines + activation boxes |\n| Data | ER diagrams, data flow diagrams (DFD) | Table containers, PK\u002FFK notation |\n| Other | org charts, mind maps, wireframes | — |\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 ~\u002Fdiagrams\u002Fbrand.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\u002FSTYLE_PRESETS.md](docs\u002FSTYLE_PRESETS.md).\n\n## 🔄 How it works\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"assets\u002Fworkflow.png\" width=\"700\" alt=\"Internal workflow\">\n\u003C\u002Fp>\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| Grid-aligned layout | ❌ | ✅ 10px snap, routing corridors |\n| Color palette | random \u002F inconsistent | ✅ 7-color semantic system |\n| Style presets | ❌ | ✅ learn from `.drawio` file or image |\n\n### vs Other draw.io Skills & Tools\n\n| Feature | drawio-skill | [jgraph\u002Fdrawio-mcp](https:\u002F\u002Fgithub.com\u002Fjgraph\u002Fdrawio-mcp) (official)\u003Cbr>![stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fjgraph\u002Fdrawio-mcp?style=flat-square&logo=github) | [bahayonghang\u002Fdrawio-skills](https:\u002F\u002Fgithub.com\u002Fbahayonghang\u002Fdrawio-skills)\u003Cbr>![stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fbahayonghang\u002Fdrawio-skills?style=flat-square&logo=github) | [GBSOSS\u002Fai-drawio](https:\u002F\u002Fgithub.com\u002FGBSOSS\u002Fai-drawio)\u003Cbr>![stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FGBSOSS\u002Fai-drawio?style=flat-square&logo=github) |\n|---|---|---|---|---|\n| **Approach** | Pure SKILL.md | SKILL.md \u002F MCP \u002F 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 \u002F Gemini \u002F 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\u002FDL diagrams** | ✅ tensor shapes, layer colors | ❌ | ❌ | ❌ |\n| **Color system** | ✅ 7-color semantic | ❌ | ✅ 6 themes | ❌ |\n| **Browser fallback** | ✅ diagrams.net URL | ❌ inline preview only | ✅ via optional MCP | ✅ diagrams.net viewer (primary) |\n| **Zero-config** | ✅ copy `skills\u002Fdrawio-skill\u002F` | ✅ | ✅ desktop-only mode | ❌ needs plugin install |\n\nFull comparison + key-advantages summary in [docs\u002FCOMPARISON.md](docs\u002FCOMPARISON.md) (with audit timestamp).\n\n## 🔗 Related Skills\n\nPart of the [Agents365-ai diagram-skill family](https:\u002F\u002Fgithub.com\u002FAgents365-ai) — pick the right tool for the job:\n\n| Skill | Style | Best for |\n|---|---|---|\n| [excalidraw-skill](https:\u002F\u002Fgithub.com\u002FAgents365-ai\u002Fexcalidraw-skill) | Hand-drawn \u002F sketchy | Whiteboard mockups, informal diagrams |\n| [mermaid-skill](https:\u002F\u002Fgithub.com\u002FAgents365-ai\u002Fmermaid-skill) | Text-based, auto-layout | README-embeddable, version-control friendly |\n| [plantuml-skill](https:\u002F\u002Fgithub.com\u002FAgents365-ai\u002Fplantuml-skill) | UML-focused | Class \u002F sequence diagrams in CI pipelines |\n| [tldraw-skill](https:\u002F\u002Fgithub.com\u002FAgents365-ai\u002Ftldraw-skill) | Whiteboard collaboration | Casual sketches, FigJam-style boards |\n\n## 💬 Community\n\n- **Discord:** https:\u002F\u002Fdiscord.gg\u002F79JF5Atuk\n- **WeChat:** scan the QR code below\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FAgents365-ai\u002Fimages_payment\u002Fmain\u002Fqrcode\u002Fagents365ai_wechat_1.png\" width=\"200\" alt=\"WeChat Community Group\">\n\u003C\u002Fp>\n\n## ❤️ Support\n\nIf this skill helps you, consider supporting the author:\n\n\u003Ctable>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\n      \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FAgents365-ai\u002Fimages_payment\u002Fmain\u002Fqrcode\u002Fwechat-pay.png\" width=\"180\" alt=\"WeChat Pay\">\n      \u003Cbr>\n      \u003Cb>WeChat Pay\u003C\u002Fb>\n    \u003C\u002Ftd>\n    \u003Ctd align=\"center\">\n      \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FAgents365-ai\u002Fimages_payment\u002Fmain\u002Fqrcode\u002Falipay.png\" width=\"180\" alt=\"Alipay\">\n      \u003Cbr>\n      \u003Cb>Alipay\u003C\u002Fb>\n    \u003C\u002Ftd>\n    \u003Ctd align=\"center\">\n      \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FAgents365-ai\u002Fimages_payment\u002Fmain\u002Fqrcode\u002Fbuymeacoffee.png\" width=\"180\" alt=\"Buy Me a Coffee\">\n      \u003Cbr>\n      \u003Cb>Buy Me a Coffee\u003C\u002Fb>\n    \u003C\u002Ftd>\n    \u003Ctd align=\"center\">\n      \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FAgents365-ai\u002Fimages_payment\u002Fmain\u002Fawarding\u002Faward.gif\" width=\"180\" alt=\"Give a Reward\">\n      \u003Cbr>\n      \u003Cb>Give a Reward\u003C\u002Fb>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\n## 👤 Author\n\n**Agents365-ai**\n\n- GitHub: https:\u002F\u002Fgithub.com\u002FAgents365-ai\n- Bilibili: https:\u002F\u002Fspace.bilibili.com\u002F441831884\n\n## 📄 License\n\n[MIT](LICENSE)\n","drawio-skill 是一个将自然语言描述转换为专业图表的工具。其核心功能包括从文本生成 .drawio XML 文件，并导出为 PNG、SVG 或 PDF 格式，支持六种预设图表类型如 ERD、UML 类图等。该项目采用 Python 编写，具备自我检查和自动修正布局问题的能力，能够通过迭代反馈机制优化图表质量，同时允许用户自定义样式并复用。此外，它无需复杂配置即可在多种代理环境下运行，例如 Claude Code、OpenClaw 和 Hermes Agent 等。适用于需要快速创建高质量技术架构图或流程图的技术文档编写者及团队。",2,"2026-06-11 03:49:37","high_star"]