Drawio Skill is an agent skill that turns natural-language descriptions and existing system sources into editable draw.io diagrams. Given a prompt, the agent plans the layout, writes the .drawio XML, exports it through the draw.io desktop CLI, then inspects the rendered PNG and fixes overlaps, clipped labels, and stacked edges before taking up to five rounds of your feedback. It installs into Claude Code and other Agent Skills-compatible agents.
Beyond prompts, the skill builds diagrams from real sources: import graphs for Python, JS/TS, Go, and Rust code, Python class hierarchies, Terraform, Kubernetes, and docker-compose configs with official cloud icons, live infrastructure snapshots, SQL DDL as ER diagrams, OpenAPI, AsyncAPI, Protocol Buffers, and GraphQL schemas, and CI pipelines as DAGs. Mermaid text in 28 standard types and photos of whiteboards or legacy diagrams can also be converted into native, editable diagrams.
Diagrams can be kept in step with the system over time. A diagram intermediate representation separates meaning from geometry so several views (executive, deployment, data-flow, security) come from one model, and incremental sync updates changed nodes while preserving hand-tuned layout. Architecture rules can run as tests in CI through a GitHub Action, alongside dependency queries, failure-propagation what-ifs, color-coded drift diffs, and a time-lapse of how a codebase's architecture grew.
A diagramctl CLI exposes these workflows, and an optional MCP server makes them available to Claude Desktop, Cursor, VS Code, Codex, and other MCP hosts. Diagrams can also be republished as an interactive HTML viewer, a PowerPoint deck, animated SVG, Mermaid, or Markdown.
Features
- Prompt to diagram: generates editable .drawio files with a vision self-check that fixes layout problems
- 11 presets: ERD, UML class, sequence, C4, architecture, ML and deep learning, flowchart, SysML, BPMN, network topology, and swimlane
- Codebase visualization: import graphs for Python, JS/TS, Go, and Rust, plus Python class hierarchies with automatic layout
- Infrastructure and schemas: Terraform, Kubernetes, docker-compose, live snapshots, SQL DDL, OpenAPI, AsyncAPI, Protobuf, GraphQL, and CI pipelines
- Conversions: Mermaid text and whiteboard photos or screenshots become native editable diagrams
- Incremental sync: updates changed nodes and relations while keeping manual layout and styles
- Diagram-as-test: architecture rules for cycles, orphans, and trust boundaries enforced in CI, with visual PR diffs
- Shape search: resolves exact styles from 10,000+ official draw.io shapes, plus 321 AI and LLM brand logos
- Repurposing: HTML viewer, PowerPoint, animated SVG, Mermaid, Markdown, runbooks, and restyled or translated variants
- CLI and MCP server: diagramctl workflows exposed to Claude Desktop, Cursor, VS Code, Codex, and other MCP hosts
