# drawio-skill

> A community skill that turns a description, code, Terraform, SQL or API schemas into editable draw.io diagrams, and keeps them in sync.

drawio-skill is a free, open-source Agent Skill by Agents365-ai that draws diagrams as editable .drawio files rather than flat pictures. Describe what you want, or point it at your code, infrastructure or schemas, and it plans the layout, writes the draw.io XML, exports it, checks its own render and fixes overlaps before showing you. It's a community project, not from draw.io (JGraph).

What you can do with it
- Describe a diagram and get an editable .drawio: architecture, C4, UML class and sequence, ER, BPMN, SysML, network topology, swimlanes, flowcharts and ML model diagrams
- Turn real sources into diagrams: Python, JS/TS, Go and Rust import graphs, Terraform, Kubernetes and docker-compose with official AWS, Azure, GCP and Kubernetes icons, SQL DDL, OpenAPI, AsyncAPI, Protocol Buffers, GraphQL and CI pipelines
- Snapshot what's actually deployed from terraform show, docker inspect or kubectl output
- Rebuild a whiteboard photo or an old PNG as an editable diagram
- Write Mermaid (mind maps, Gantt, timelines, kanban and more) and convert it to native draw.io
- Keep diagrams current: sync a diagram from its changed source without losing your manual layout, and diff two versions in colour
- Ask questions of an architecture: query paths and owners, test it against rules (for example, nothing from the internet straight to a database), review it, or simulate what fails when one part goes down
- Share it as an interactive HTML viewer, a PowerPoint deck, an animated SVG, Mermaid, Markdown or an accessible walkthrough
- Use the real shapes: it searches draw.io's official shape library for exact AWS, Cisco, Kubernetes, UML and BPMN icons, and adds AI and LLM brand logos draw.io lacks
- Apply built-in style presets (corporate, hand-drawn, colour-blind safe, dark) or teach it your own style from a diagram

How it connects
- Install it with npx skills add Agents365-ai/drawio-skill -g, or clone the repo and link its skills/drawio-skill folder into your agent's skills folder.
- Exports need the draw.io desktop app (version 30 or newer for Mermaid conversion). Automatic layout needs Graphviz; the core workflows need only Python 3 and work offline.
- An optional MCP server (scripts/diagramctl_mcp.py) exposes build, sync, views, query, review, what-if and walkthrough tools to MCP hosts.

Good to know
- In Claude Code it doesn't load on its own: call it by name with /drawio-skill.
- There's no account or sign-in. Diagrams and exports are written to your working folder.
- AI brand logos load from a public CDN when the diagram renders, unless you ask it to embed them.
- The maker documents it for Claude Code, Cursor, GitHub Copilot, OpenClaw, Codex, Hermes and more.

- Type: Skill
- Made by: Agents365-ai
- Category: Design
- Formats: Skills
- Version: 3.4.3
- Website: https://agents365-ai.github.io/drawio-skill/
- Source: https://github.com/agents365-ai/drawio-skill/tree/HEAD/skills/drawio-skill
- Page: https://pluginboard.ai/skills/drawio-skill

## Works with

- ChatGPT
- Claude
- Gemini
- GitHub Copilot
- Cursor
- Claude Code
- Codex
- Antigravity
- Gemini CLI
- Replit
- OpenClaw
- OpenCode
- Hermes Agent

## Install

### ChatGPT

In ChatGPT: Download the drawio-skill folder and zip it, then Plugins → Skills → Create → Upload from your computer. Business and Enterprise plans.

View the folder on GitHub: https://github.com/Agents365-ai/drawio-skill/tree/HEAD/skills/drawio-skill

### Claude

In Claude (web or desktop): Download the drawio-skill folder and zip the folder itself, then upload it in Customize → Skills.

View the folder on GitHub: https://github.com/Agents365-ai/drawio-skill/tree/HEAD/skills/drawio-skill

### Gemini

In Gemini: Download the drawio-skill folder, then at gemini.google.com click Customize → Skills → Create → Upload and pick the folder (or a .zip of it).

View the folder on GitHub: https://github.com/Agents365-ai/drawio-skill/tree/HEAD/skills/drawio-skill

### GitHub Copilot

Run in your terminal:

```shell
npx -y degit Agents365-ai/drawio-skill/skills/drawio-skill ~/.copilot/skills/drawio-skill
```

View the folder on GitHub: https://github.com/Agents365-ai/drawio-skill/tree/HEAD/skills/drawio-skill

### Cursor

Run in your terminal:

```shell
npx -y degit Agents365-ai/drawio-skill/skills/drawio-skill ~/.cursor/skills/drawio-skill
```

View the folder on GitHub: https://github.com/Agents365-ai/drawio-skill/tree/HEAD/skills/drawio-skill

### Claude Code

Run in your terminal:

```shell
npx -y degit Agents365-ai/drawio-skill/skills/drawio-skill ~/.claude/skills/drawio-skill
```

View the folder on GitHub: https://github.com/Agents365-ai/drawio-skill/tree/HEAD/skills/drawio-skill

### Codex

Run in your terminal:

```shell
npx -y degit Agents365-ai/drawio-skill/skills/drawio-skill ~/.agents/skills/drawio-skill
```

View the folder on GitHub: https://github.com/Agents365-ai/drawio-skill/tree/HEAD/skills/drawio-skill

### Antigravity

In Antigravity: Copy the drawio-skill folder into ~/.gemini/config/skills (Antigravity app and IDE) or ~/.gemini/antigravity-cli/skills (Antigravity CLI).

View the folder on GitHub: https://github.com/Agents365-ai/drawio-skill/tree/HEAD/skills/drawio-skill

### Gemini CLI

Run in your terminal:

```shell
npx -y degit Agents365-ai/drawio-skill/skills/drawio-skill ~/.gemini/skills/drawio-skill
```

View the folder on GitHub: https://github.com/Agents365-ai/drawio-skill/tree/HEAD/skills/drawio-skill

### Replit

Run in your terminal:

```shell
npx -y degit Agents365-ai/drawio-skill/skills/drawio-skill .agents/skills/drawio-skill
```

View the folder on GitHub: https://github.com/Agents365-ai/drawio-skill/tree/HEAD/skills/drawio-skill

### OpenClaw

Run in your terminal:

```shell
npx -y degit Agents365-ai/drawio-skill/skills/drawio-skill ~/.openclaw/skills/drawio-skill
```

View the folder on GitHub: https://github.com/Agents365-ai/drawio-skill/tree/HEAD/skills/drawio-skill

### OpenCode

Run in your terminal:

```shell
npx -y degit Agents365-ai/drawio-skill/skills/drawio-skill ~/.config/opencode/skills/drawio-skill
```

View the folder on GitHub: https://github.com/Agents365-ai/drawio-skill/tree/HEAD/skills/drawio-skill

### Hermes Agent

Run in your terminal:

```shell
npx -y degit Agents365-ai/drawio-skill/skills/drawio-skill ~/.hermes/skills/drawio-skill
```

View the folder on GitHub: https://github.com/Agents365-ai/drawio-skill/tree/HEAD/skills/drawio-skill

---
From Pluginboard (https://pluginboard.ai).
