drawio Skill (bahayonghang) for Claude Code: What It Does and How to Install It

Makes Claude create, edit and export draw.io diagrams from a text description, YAML, Mermaid or CSV.

Installs: 8.6K; on skills.sh
Stars: 297; on GitHub
Files: 60+; besides SKILL.md
Updated: Sep 2026; last repo commit

Describe the diagram you want. Claude writes a YAML spec, checks it, then produces a .drawio file and a 300dpi PNG (or a standalone SVG if draw.io Desktop is missing). The same workflow edits existing .drawio files, redraws a screenshot, and imports declared config or local code.

It runs a bundled Node CLI, so it needs Node.js 20 or newer. An optional browser-refinement mode uses an MCP server, but the SKILL.md says normal work never needs it. For paper or thesis figures, the SKILL.md sends you to a sibling skill, drawio-academic-skills, instead.

Good for

Engineers drawing architecture, network and flowchart diagrams
Teams turning Terraform, Kubernetes, Compose, SQL or OpenAPI files into diagrams
Anyone who wants an existing diagram or screenshot redrawn as an editable .drawio file
Writers who need colorblind-safe or grayscale palettes

Install drawio

Claude Code

Copy this prompt.

Install the drawio skill in Claude Code. Run this command:

npx skills add bahayonghang/drawio-skills

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js 20 or newer.

Restart your client after install (README). The repo has 2 skill folders, drawio and drawio-academic-skills; the first command installs the repo's skills, the second only drawio. The skill's compatibility line needs Node 20+. draw.io Desktop is optional: it makes the 300dpi PNG, otherwise you get a standalone SVG. The skill needs Node.js and runs local scripts, so there is no Claude app upload route.

From the project README. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

Scope
Runtime Stack
Task Routing
Default Operating Rules
Create Flow
Local Image Assets
Edit, Import, and Replicate
Desktop and Diagrams.net Export
Style Presets
Palette Selection
Validation Policy
Completion Report

Key facts

Author: bahayonghang (repo owner)
License: MIT (LICENSE file and SKILL.md frontmatter)
Installs on skills.sh: 8,590 (Nov 2, 2026)
GitHub stars: 297 for the whole bahayonghang/drawio-skills repo (Nov 2, 2026)
Last repo commit: Sep 8, 2026
What it includes: 306 files including SKILL.md: 136 under scripts/, 100 references, 39 assets, 20 evals, 4 styles, 2 agent YAML files, 2 reports, a CHANGELOG.md and a .mcp.json (git tree)
skills.sh audits: Gen Agent Trust Hub: pass; Socket: pass; Snyk: warn (Nov 2, 2026)
Needs: Node.js 20 or newer; draw.io Desktop for PNG, PDF and JPG export (optional)

What it includes

Turns text, YAML, Mermaid or CSV into a .drawio file and a PNG
Runs node scripts/cli.js on a YAML spec with --validate; --use-desktop makes the 300dpi PNG, with a standalone SVG fallback.
Try: “/drawio create a horizontal login flow with 6 nodes”
Runs code · Create
Imports an existing .drawio file, edits its YAML, regenerates
Writes a .spec.yaml sidecar so the next edit can start from the spec.
Runs code · Edit and import
Redraws an uploaded image, screenshot or SVG as a structured diagram
Keeps the source palette by default and checks text placement against the exported PNG.
Write · Replicate
Draws diagrams from Terraform, Kubernetes, Compose, SQL, OpenAPI, CI files or code
Code import covers Python, JavaScript/TypeScript, Go and Rust projects. Some parsers use optional Python 3.9+ workers.
Runs code · Config and code import
Writes PNG, PDF, JPG or embedded .drawio.svg through draw.io Desktop
Without Desktop, PNG export falls back to a standalone SVG with a warning.
Runs code · Export
Applies themes, 15 palettes and style presets
The README lists 15 metadata-backed palettes. It asks with a single-select question only when you mention palette, colorblind safety, grayscale or multi-category colors.
Read · Palettes, themes and presets
Checks structure, layout and edge quality, then inspects the exported image
Edge rules include native bound connectors and open arrowheads by default.
Runs code · Validate and visual review
Offline mermaid, explain, relabel, restyle, heatmap and script-free html operations
The SKILL.md names exactly these six operations.
Runs code · Postprocess
Browser refinement through the @next-ai-drawio/mcp-server MCP server
Provisioned by the bundled .mcp.json, which runs it with npx. Offline authoring does not use it.
Runs code · Live refinement (optional)

From the official docs

Permissions

Medium risk

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It runs local scripts and starts apps
The SKILL.md allows Read, Write, Bash and AskUserQuestion. The CLI starts draw.io Desktop for exports, and optional parsers start Python. Run it in a project folder you can review. github.com
The bundled .mcp.json runs a package with npx
It contains the command npx --yes @next-ai-drawio/mcp-server@0.4.13, which the SKILL.md says npx fetches over the network. The README config uses @latest instead. Offline authoring does not read it. github.com
The skill folder bundles agent files
The folder has agents/interface.yaml and agents/openai.yaml, plus 136 files under scripts/ including tests. github.com
Browser handoff builds a diagrams.net URL
The diagrams-net-url.js script builds a viewer.diagrams.net link. The SKILL.md says the diagram is encoded after #R in the URL fragment, not sent as a query parameter. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode. Use version control.
Talks to	viewer.diagrams.net (default base of the browser handoff link). npm registry (only if you use the optional MCP server through npx)
Sign-in and keys	The SKILL.md names no account or key.
Scopes	Runs node scripts/cli.js through Bash on your YAML specs and .drawio files Writes .drawio, PNG and other exports, plus sidecars in a work folder such as .drawio-tmp/<name>/ Starts draw.io Desktop for exports (the Desktop helper calls it with execFile) Config and code importers read the project files you point them at, and some parsers spawn Python 3.9+ workers

Questions

What does the drawio skill do?

It makes your agent create, edit, import, replicate and export draw.io diagrams through a YAML-first workflow. It covers architecture, network topology, flowcharts, UML and ER diagrams, org charts, Mermaid and CSV conversion, and formula diagrams.

How do I install it in Claude Code?

Use the install box at the top of this page. The README command npx skills add bahayonghang/drawio-skills installs the repo's skills, and the second command installs drawio alone. Restart your client afterwards.

Is it official?

No. It is a third-party skill by bahayonghang, not made by draw.io or diagrams.net. It only produces files in the draw.io format.

Does it need draw.io Desktop?

Not to create the .drawio file. Desktop makes the default 300dpi PNG, plus PDF, JPG or embedded .drawio.svg. Without it, image export falls back to a standalone SVG.

Does it need an MCP server?

No. The SKILL.md says the MCP backend is optional and only for browser refinement. The README gives a config for @next-ai-drawio/mcp-server if you want it.

Does the README recommend something else for replicating diagrams?

Yes. Its Install section recommends a separate project, drawio-scientific-illustrator (dev branch, installed by git clone into .claude/skills or .codex/skills), for redrawing existing diagrams with better fidelity than this skills package. That project is not part of this skill.

drawio vs drawio-academic-skills?

The SKILL.md description says to use drawio-academic-skills for paper, thesis, IEEE or camera-ready figures. Use drawio for general diagrams. The academic overlay is a second skill folder in the same repo.

Does it work in the Claude app?

There is no Claude app upload route, because the skill runs a Node.js 20+ CLI on your machine. The install box lists Claude Code and Codex routes. The README title says Claude and Codex.

Is it safe?

It runs local Node scripts and may open draw.io Desktop and write .drawio, PNG and sidecar files into your project. The SKILL.md tells it to treat labels, paths, specs and imported XML as untrusted data. The optional MCP setup runs a package through npx, so skip it unless you want browser refinement.

Information

updated Nov 2, 2026

Repository: bahayonghang/drawio-skills
Folder: skills/drawio

bahayonghang/drawio-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

drawio SKILL.md · github.com
drawio-skills README · github.com
drawio .mcp.json · github.com