Drawio Diagram Skill — Development skill for Claude Code

draw.io diagram skill for Claude Code

A Claude Code skill that produces diagrams as draw.io files, then validates and renders them so the result is actually looked at before it is called done.

The problem it solves is narrow and specific. Asking a coding agent for a diagram usually gets you Mermaid or ASCII art, or a `.drawio` file that was never opened. XML validity says nothing about whether two boxes are printed on top of each other. This skill pairs a written visual grammar with a renderer, so the diagram gets produced, exported to an image, and inspected as part of the loop.

How it runs


Source: [docs/drawio-skill-flow.drawio](docs/drawio-skill-flow.drawio) (editable in draw.io).

What is in here

• draw-diagram/SKILL.md the skill itself. Loads the grammar, writes the XML, renders, looks at the image, reports where the source and the image were saved.
• draw-diagram/DRAWIO_DIAGRAMS.md the visual grammar: shape vocabulary, a seven-color palette, the layout skeleton (header strip, stage containers, data store column, footer), arrow conventions, and the decision-hub temporal-ordering defenses. It also carries the traps that only surface at render time, including the CLI exporter silently refusing ;base64 data URIs and text cells that do not wrap.
• draw-diagram/render.py validates a .drawio file and exports it to PNG, SVG, or PDF. Pure standard library for the validation half, so it runs anywhere with no install.

Install

Copy the skill directory into your `~/.claude/skills/` so Claude Code picks it up:

cp -R drawio-diagram-skill/draw-diagram ~/.claude/skills/

The grammar file lives inside the skill directory, so the skill stays self-contained and there is nothing else to wire up.

To make draw.io your default for every diagram rather than something you ask for by name, add a line to your `~/.claude/CLAUDE.md`:

Whenever a diagram is needed (architectur