drawio-skills

Runtime Model

Use the skill in this order unless you explicitly need a browser session:

1. Offline-first: generate .drawio locally and keep the sidecars in sync.
2. Desktop-enhanced: add draw.io Desktop when you need PNG, PDF, JPG, or embedded SVG exports.
3. Optional live MCP: start a browser session only for in-session visual refinement.

Quick Start

Install the skill:

npx skills add bahayonghang/drawio-skills

Create a first diagram:

/drawio create a horizontal tech-blue login flow with 6 nodes

Validate and export from the repo:

node skills/drawio/scripts/cli.js input.yaml output.drawio --validate --write-sidecars
node skills/drawio/scripts/cli.js input.yaml output.svg --validate --write-sidecars

Import an existing .drawio file into the offline bundle:

node skills/drawio/scripts/cli.js existing.drawio --input-format drawio --export-spec --write-sidecars

What the Site Covers

• Guide: installation, routes, design system, YAML specification, CLI, and export workflow.
• API: optional MCP tools, XML format notes, and the standalone SVG converter.
• Examples: prompt-first examples plus reusable YAML specs under skills/drawio/references/examples/.

Source of Truth

This documentation tracks the current runtime model defined in:

• skills/drawio/SKILL.md
• skills/drawio/references/workflows/*.md
• skills/drawio/references/docs/**

If a page disagrees with those files, treat the skill and references as authoritative.