Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

Draw.io Diagram Generator

Turns plain-language requests into editable .drawio files and exports PNG/SVG/PDF locally.

Design & UIIntermediate★ 7,359⑂ 538AI score 9/10Last updated: Aug 5, 2026

What it does

Generates .drawio XML from your description and exports PNG/SVG/PDF/JPG through the native draw.io desktop CLI — no browser automation.

  • Covers architecture, flowcharts, ERD, UML class/sequence, C4, BPMN, SysML, swimlanes, network topology, ML model figures and mind maps
  • shapesearch.py resolves exact styles for 10,000+ official shapes (AWS/Azure/GCP/Cisco/Kubernetes) instead of guessing style strings
  • Importers build diagrams straight from Terraform, Kubernetes, docker-compose, OpenAPI specs, SQL DDL, CI workflows, and Python/JS/Go/Rust import graphs
  • Quality passes: Graphviz auto-layout, structural lint (validate.py), edge port distribution (edgeports.py), and a vision-based self-check of the exported PNG
  • Post-processing extras: restyle/theming, metric heat maps, self-contained interactive HTML viewer, PPTX decks, animated flow SVGs, diagram diffing

Who it's for

  • Developers and architects who regularly need precise diagrams for design docs, READMEs or PRs
  • DevOps/SRE teams visualizing declared vs. actually-running infrastructure and spotting drift
  • Technical PMs who need presentation-grade visuals with real vendor icons and clean alignment

Examples

  1. "Diagram this Terraform folder with official AWS icons" → tfimports.py extracts the resource graph, autolayout.py places it, CLI exports a PNG
  2. "Make a swimlane flowchart of our order pipeline and give me a PDF" → hand-written swimlane XML → edgeports.py untangles stacked edges → PDF export
  3. "Re-theme architecture.drawio dark and color nodes by latency.csv" → restyle.py then heatmap.py, then re-export

· · · Install guide · · ·

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/drawio-skill folder from the GitHub repo Agents365-ai/drawio-skill into my ~/.claude/skills/drawio-skill/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/Agents365-ai/drawio-skill.git /tmp/drawio-skill && mkdir -p ~/.claude/skills && cp -r /tmp/drawio-skill/skills/drawio-skill ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Install the draw.io desktop app first: on macOS run brew install --cask drawio; on Windows/Linux grab an installer from https://github.com/jgraph/drawio-desktop/releases (avoid the snap build on Linux).
  2. Verify the CLI with drawio --version. Version 30+ also unlocks Mermaid→.drawio conversion.
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Clone the repo and copy the skill in: git clone https://github.com/Agents365-ai/drawio-skill.git /tmp/drawio-skill && cp -r /tmp/drawio-skill/skills/drawio-skill ~/.claude/skills/
  5. Optional extras: brew install graphviz (or sudo apt install graphviz) for auto-layout, pip install python-pptx for PowerPoint export, pip install pyyaml for CI pipeline diagrams.
  6. Restart Claude Code and ask something like "draw an architecture diagram of this project" — the skill triggers automatically.
View source on GitHub ↗License: MIT