Draw.io Skill
Draw.io Skill for Claude & Codex
Skills for draw.io diagrams: architecture, networks, flowcharts, import from Terraform and code, offline generation from YAML and PNG and SVG export
- 291 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skill runs a local Node CLI, writes diagram files and reads project folders when importing code and configs
- The optional live editing launches an MCP server through `npx` at version `latest`
Install
- Works in
Manual install
npx skills add bahayonghang/drawio-skillsRestart the client after installing. By hand, copy `skills/drawio` and, for paper figures, `skills/drawio-academic-skills` into the skills directory.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill runs a local Node CLI, writes diagram files and reads project folders when importing code and configs
- The optional live editing launches an MCP server through `npx` at version `latest`
This is third-party code. Review the repository files before installing.
What it does
Draw.io Skill builds and edits draw.io diagrams through an offline workflow where YAML is the main description format. For a request like `/drawio create a horizontal tech-blue login flow with 6 nodes`, the agent writes a spec and turns it into a `.drawio` file with a local command, placing `.spec.yaml` and `.arch.json` sidecars beside it. draw.io Desktop produces PNG, PDF, JPG and embedded SVG; without it the image exports as a standalone SVG. There are three routes: create, edit and replicate an existing diagram. The skill offers seven themes, fifteen palettes, cloud provider icons, AI model logos, and network topology with interface and VLAN labels. A diagram can come from Terraform, Kubernetes, Compose, SQL DDL, OpenAPI, GitHub Actions and GitLab CI, or from module and class relationships in Python, JavaScript, TypeScript, Go and Rust. The repository holds two skills: the base `drawio` and the `drawio-academic-skills` overlay for figures in papers and theses, with checks for captions, legends and formulas.
Who it is for. For developers, architects and network engineers who need editable draw.io diagrams from text and code, and for authors preparing figures for papers.
Good fit when
- You need an architecture or network diagram: a firewall, core switch, two app servers and a database subnet, with interface and VLAN labels on links
- You want to turn Terraform, Kubernetes manifests, Compose or OpenAPI into a diagram with no cloud CLI and no network
- You have an existing `.drawio` file and want it in a YAML bundle for repeatable editing: `--input-format drawio --export-spec`
- You need a relationship diagram of a project's modules and classes in Python, TypeScript, Go or Rust from a local folder
- You need a figure for an IEEE-style paper: the `drawio-academic-skills` overlay outputs `.drawio`, YAML, JSON and SVG
Not a fit when
- You need to replicate someone else's diagram with the best fidelity: the author recommends the drawio-scientific-illustrator project, `dev` branch, for that
- You need live browser editing as the main route: it is optional, belongs only to the base skill and requires an MCP server
- You need PNG and PDF export without draw.io Desktop: without it only a standalone SVG remains
- You cannot run Node 20: the YAML command workflow requires Node 20 or newer
Example request
/drawio create a tech-blue network topology with a firewall, core switch, two app servers and a private database subnetLimitations
The offline workflow needs Node 20 or newer. A 300 dpi image comes from draw.io Desktop; without it a standalone SVG remains. Local PNG and JPEG are added as assets, while SVG and multi-page assets are out of scope in v1. Requests for figures in scientific work should go to the overlay, because the base skill applies no publication checks.
Live editing through the `@next-ai-drawio/mcp-server` MCP server is optional and concerns only the base skill; the overlay never calls MCP. The author names the preferred route for replicating diagrams: the drawio-scientific-illustrator project, `dev` branch. Restart the client after installing the skills.
How to disable. Delete the `drawio` and `drawio-academic-skills` folders from the client's skills directory. If you wired the MCP server, remove the `drawio` entry from the Claude config or Codex `config.toml`.
FAQ
How do I install Draw.io Skill in Claude Code or Codex?
Run `npx skills add bahayonghang/drawio-skills` and restart the client. For a manual install, copy the `skills/drawio` folder into the client's skills directory, and for publication tasks put `skills/drawio-academic-skills` beside it because the overlay looks for a sibling `../drawio`.
Do I need an MCP server?
No. Creating, editing and exporting work without it. The `@next-ai-drawio/mcp-server` MCP is only for optional live browser editing, and only in the base skill.
Which export formats are available?
With draw.io Desktop installed, the skill outputs a 300 dpi PNG, PDF, JPG and embedded `.drawio.svg`. Without it a standalone SVG remains.
What can it generate a diagram from automatically?
Terraform, Kubernetes, Compose, SQL DDL, OpenAPI, GitHub Actions and GitLab CI, or module and class relationships in Python, JavaScript, TypeScript, Go and Rust. All importers work offline, with no cloud CLI or Graphviz.
What is the drawio-academic-skills overlay for?
Figures for papers and theses. It checks audience and venue, captions and legends, formula fidelity and A4, Word and LaTeX expectations, and classes the figure as architecture, roadmap or workflow. It needs the sibling `drawio` skill.
Discussion
No questions or reviews yet.
Related
SkillsA skill for editable draw.io diagrams from text, code, Terraform, Kubernetes, SQL and OpenAPI, with export and self-checks
A skill that draws editorial diagrams as standalone HTML and SVG files: architecture, flowcharts, ER, funnels and about forty more types
The official draw.io MCP server: an agent builds diagrams from XML or Mermaid and opens them in the draw.io editor
Next AI Draw.io is an MCP server and plugin where the agent draws draw.io diagrams on a live browser canvas that you can edit by hand
A Codex plugin that redraws a scientific figure from a reference on the live draw.io canvas step by step, then validates and exports the file
A skill that builds Excalidraw diagrams from a description and checks their look with a Playwright render
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Draw.io Skill (this entry) | no | 291 | ||
| drawio-skill | no | 10,274 | another draw.io skill from text, code, Terraform and SQL; this one is an offline YAML bundle with a scientific-figure overlay | |
| Draw.io MCP Server | yes | not required | 5,674 | the official draw.io MCP server, while this is a skill with a local CLI where MCP is optional |
| drawio-ai-kit | no | 660 | skills and a CLI for AWS, Azure, GCP and BPMN diagrams, while this is wider in themes, importers and export |
README in short
The description opens with a warning that the main route is offline from YAML and that the MCP server is optional. It then covers the two skills, the feature list, the order of runtime paths, installation and the optional live-editing setup. It closes with a quick start of example prompts and shell commands that render and validate a bundle.
README badge
Original SKILL.md
---
name: drawio
version: "2.8.0"
description: "Create, edit, replicate, import, and export draw.io diagrams with an offline YAML-first workflow: architecture, network topologies, flowcharts, UML/ER, org charts, Mermaid/CSV conversion, existing .drawio bundles, style presets, themes, and non-publication formula diagrams. For publication figures (paper, thesis, IEEE, camera-ready) use drawio-academic-skills instead."
license: MIT
homepage: https://github.com/bahayonghang/drawio-skills
compatibility: "Node 20+ for the YAML/CLI workflow. draw.io Desktop produces the default 300dpi PNG (plus PDF/JPG or embedded .drawio.svg); without it, image exports fall back to a standalone SVG. No MCP server is required for offline authoring; the optional live-refinement backend needs a browser/MCP provider."
platforms: [macos, linux, windows]
metadata:
category: visual-design
tags:
- diagram
- drawio
- architecture
- flowchart
- network-topology
- uml
- mermaid
- csv
- design-system
- math
argument-hint: [diagram-description-or-instruction]
allowed-tools: Read, Write, Bash, AskUserQuestion
---
# Draw.io Base Skill
Create, edit, validate, replicate, import, and export draw.io diagrams through a YAML-first offline workflow. It is the single maintained base for sibling overlays and owns the local CLI, schemas, references, themes, palettes, examples, style presets, and export helpers.
## Scope
Use this base skill for general draw.io work: software/system architecture; network topologies and infrastructure maps; flowcharts, swimlanes, process maps, and org charts; UML class/sequence/state/ER; Mermaid and CSV conversion; structured redraw and non-academic replication; formula-bearing technical diagrams; `.drawio` import, sidecar export, and local validation.
For paper, thesis, IEEE, journal, manuscript, or publication-ready figure requests, route to the sibling `drawio-academic-skills` overlay; the base does not apply academic publication gates. Without the overlay, render the local YAML bundle but report that overlay policy was not applied.
## Runtime Stack
Use the lightest path that satisfies the request:
- **Offline Authoring Path (default)** — the YAML spec generates the final `.drawio` plus the default delivered image, a **300dpi PNG** via draw.io Desktop (standalone SVG fallback).