draw.io Diagram Skill

What it does

The draw.io Diagram Skill gives an agent the ability to produce and refine native .drawio diagrams, export to PNG/SVG/PDF/JPG, and run repository-grade SVG linting to catch layout issues like border overlap, label collisions, and text overflow. It includes helpers for AWS icons, fixture-based lint coverage, and commands to build and verify documentation.

When to use it

Use this skill when the user requests architecture diagrams, flowcharts, or visual assets that must be precise and production-ready. Triggers include: "create a draw.io diagram", "export architecture.drawio to svg", "run svg lint on diagram", "find AWS icon ec2", or "refactor login-flow.drawio". It's useful for docs, slide assets, and engineering architecture reviews.

What's included

• Scripts: export helpers and SVG linting scripts (node scripts/export-drawio.mjs, scripts/check-drawio-svg-overlaps.mjs) and fixtures for lint tests.
• References: comprehensive docs and examples under docs/ and fixtures/ demonstrating layout rules and QA checks.
• Instructions: detailed workflow for editing .drawio sources, export commands, linting steps, and XML/layout rules to ensure diagram quality.

Compatible agents

Suited for Claude Code, Codex, and other assistants that can run repository scripts or call CLI tools. The skill is repo-focused and intended for environments where the assistant can read/write .drawio files and run Node/CLI helpers.