VerifiedPlugin
video-podcast-maker
Automated pipeline to create professional video podcasts from a topic. Supports Bilibili, YouTube, Xiaohongshu, Douyin, and WeChat Channels with multi-language output (zh-CN, en-US).
3 skills1.6k
@agents365-aiContent
Plugin
drawio-skill
A skill that turns natural language and real system sources into maintainable .drawio architecture models.
Plugin Signal71/100Solid
maintained97
capable14
documented100
adopted85
Install
$ npx -y skills add Agents365-ai/drawio-skill --agent claude-code
Stats
9,547
Stars
674
Forks
Active
Maintenance
Python
Language
MIT
License
7d ago
Last commit
6mo ago
Created
Repo: Agents365-ai/drawio-skill
What's inside
Badges
README
drawio-skill — From Text to Professional Diagrams
English · 中文 · 📖 Online Docs
A skill that turns natural language and real system sources into maintainable .drawio architecture models. Beyond generation and export, it incrementally synchronizes without discarding manual layout, projects multiple views from one model, enforces architecture contracts, queries dependencies, simulates failure propagation, and publishes dependency-free interactive walkthroughs. Works with Claude Code, Cursor, Copilot, OpenClaw, Codex, Autohand Code, Hermes, and any agent compatible with the Agent Skills format.
✨ Highlights
From a prompt
- Describe it, get an editable
.drawio— the skill plans the layout, writes the XML, exports, then self-checks its own PNG and auto-fixes overlaps, clipped labels, and stacked edges (up to 2 rounds), with up to 5 rounds of your feedback - Mermaid → native .drawio (draw.io ≥ 30) — author 28 standard types as Mermaid text (mindmap, gantt, timeline, journey, pie, sankey, kanban…) and the CLI converts them into a laid-out, editable
.drawio: structure in, layout free - Whiteboard photo / screenshot → editable diagram — snap a legacy PNG or a physical whiteboard, let vision extract the graph, and
raster2drawio.pyrebuilds it as a real, editable.drawiohonouring the original layout - 11 diagram type presets — ERD, UML Class, Sequence, C4, Architecture, ML/Deep Learning, Flowchart, SysML, BPMN, Network Topology, Cross-Functional Swimlane
From real sources
-
Visualize a codebase — import graphs for Python / JS-TS / Go / Rust and Python class hierarchies, with Graphviz placement, transitive reduction, and nested module containers
-
IaC and live infrastructure — Terraform, Kubernetes, and docker-compose configs become diagrams with official AWS / Azure / GCP / K8s icons; snapshot what's actually deployed from
terraform show -json,docker inspect, orkubectl get -o json -
Schemas and pipelines — SQL DDL → ER diagram, OpenAPI/Swagger → API diagram coloured by HTTP method, AsyncAPI → event-driven architecture diagram, Protocol Buffers → message/service diagram, GraphQL SDL → entity type diagram, GitHub Actions / GitLab CI → pipeline DAG
-
Deterministic engines — sequence diagrams with computed lifelines and activation bars; multi-page C4 models with click-to-drill-down
Keep it true over time
- Architecture digital twin / Diagram IR — separate meaning, provenance, and geometry; project executive, system, deployment, data-flow, and security views from one model
- Incremental sync without losing manual layout —
diagramctl syncupdates changed nodes/relations while preserving tuned coordinates, styles, and annotations; removals stay reviewable by default - Diagram-as-Test, in CI — YAML/JSON architecture rules (Internet-to-database access, cycles, orphans, trust boundaries, contrast…) plus an official GitHub Action that enforces them on every PR, and a PR action that renders visual diffs
- Query, review, what-if — query components/owners/paths, spot articulation points and high coupling, simulate failure propagation, publish an accessible Story walkthrough
- Drift and history — colour-coded diffs between two diagrams or two live snapshots; a time-lapse player of how a codebase's architecture grew
Share and restyle
- Repurpose with one command — interactive HTML viewer (pan/zoom/search), PowerPoint deck, animated data-flow SVG, Mermaid or Markdown export, click-through runbook, exec-summary compression
- Restyle and enrich — style presets (yours or built-in
dark/corporate/…), bilingual label variants with layout untouched, data-driven heat maps, white-to-metro tubemap mode - 10,000+ official shapes + 321 AI/LLM logos — resolve exact AWS / Cisco / K8s / UML icon styles instead of guessing, plus brand logos draw.io itself lacks
- One CLI, optional MCP server —
diagramctl doctor/build/sync/views/query/test/review/whatif/story/publish/transform, core workflows stdlib-only and offline; the MCP server exposes them to Claude Desktop, Cursor, VS Code, Codex, and any MCP host. Portable to any Agent Skills-compatible agent, no daemon
🗺️ Feature Map
A bird's-eye view of everything the skill does — diagram types, import sources, layout engines, styling, export formats, and repurposing — in one map. Fittingly, this map was itself drawn with drawio-skill.
🚀 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. Version ≥ 30 recommended — it unlocks Mermaid → .drawio conversion and the ELK --layout pass (both unavailable on ≤ 29). On WSL2 the CLI is the Windows desktop exe reached via /mnt/c — the skill detects this automatically (see troubleshooting). Full recipes in docs/INSTALL_CLI.md.
2. Install the skill
# Any agent (Claude Code, Cursor, Copilot, ...)
npx skills add Agents365-ai/drawio-skill -g
# Manual install
git clone https://github.com/Agents365-ai/drawio-skill.git \
~/.claude/skills/drawio-skill
# Autohand Code global install
git clone https://github.com/Agents365-ai/drawio-skill.git \
~/.autohand/skills/drawio-skill
# Autohand Code project-level install
git clone https://github.com/Agents365-ai/drawio-skill.git \
.autohand/skills/drawio-skill
Autohand Code also supports autohand --skill-install for cataloged skills, with --project for workspace-level installs. Until this skill is listed there, use the direct clone path above.
Also indexed on SkillsMP.
Updating: skills update drawio-skill (SkillsMP) or git pull for manual installs. See docs/INSTALL_SKILL.md#updates. Release history in 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.
🖼️ Examples
[!TIP] The diagram 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 maintained Architecture Studio showcase
covers code → IR → .drawio, conflict-aware synchronization that preserves a
manually tuned layout, and architecture → policy/views/what-if/accessible Story.
Every artifact is regenerated by one script and verified in the test suite.
The skill is designed to route edges cleanly across different topologies, avoiding lines that cross through shapes:
It also speaks Mermaid — standard types (flowchart, mindmap, kanban, gitGraph, timeline…) convert straight to native, editable .drawio. Here's a Kanban board (this project's own roadmap) generated from a few lines of Mermaid:
Tube-Map Mode restyles a pipeline or journey as a London-Underground-style metro map — coloured lines, octilinear (H/V/45°) routing, and white interchange circles. Here's the skill's own flow (this map is assets/tubemap.json, ~20 lines):
Full walkthrough in docs/USAGE.md.
🗺️ From Real Sources to Diagrams
Beyond hand-authored diagrams, the skill turns existing code, infrastructure, and schemas into diagrams — no manual coordinates. Just ask:
"Visualize the module structure of this Python project" · "Draw the class hierarchy of
mypackage"
↑ 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:
File tree
More plugins by @agents365-ai.
View @agents365-ai’s profile@agents365-aiFAQ
drawio-skill is a Claude Code plugin with 1 hand-picked skill for content work, indexed on Flowy. Install it with the command on its page. It includes drawio-skill. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is drawio-skill?
- A skill that turns natural language and real system sources into maintainable .drawio architecture models.
- How do I install drawio-skill?
- Run these in Claude Code: npx -y skills add Agents365-ai/drawio-skill --agent claude-code. Then prompt normally.
- Does drawio-skill auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is drawio-skill free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it