drawio-diagram-builder
Installation
SKILL.md
Research Draw.io Diagram Builder
Prerequisites
Before starting, verify these are available. If anything is missing, tell the user immediately — do not proceed without them.
| Requirement | Why |
|---|---|
| Python 3 (3.7+) | All preview/validation scripts are Python. Run python --version to check. |
| Browser automation | The iterative refinement loop depends on taking screenshots of a local preview. You need one of: Playwright MCP, Puppeteer MCP, browser-evaluate/screenshot tools, or equivalent. |
| Vision / image-reading tool (required when user provides reference images as style guides) | Style extraction (see references/style-extraction.md) requires sampling pixel colors from reference images. You need one of: vision-capable model with image reading, a color-picker MCP/browser tool, or the ability to ask the user for hex codes. Without this, you CANNOT complete the style extraction table — do not fabricate hex codes. Fallback: ask the user for the palette. |
| Internet access | Preview loads https://embed.diagrams.net/ in an iframe. Offline won't work. |
| File write access | You will create .drawio files. |
Script paths in this document are relative to the skill directory. Resolve them like <skill-dir>/scripts/serve_drawio_preview.py. If you can't find the skill directory, look under the agent's installed skills path (e.g., ~/.claude/skills/drawio-diagram-builder/ or ~/.codex/skills/drawio-diagram-builder/).
If Playwright reports a missing bundled browser, first try an installed browser channel before giving up, for example npx playwright screenshot --channel chrome ... or --channel msedge ....