Draw.io Diagram Creator

Produce a native .drawio file (mxGraphModel XML) that opens directly in app.diagrams.net, fully editable. The editable XML is the required deliverable; never replace it with a PNG, SVG, or PDF. A local draw.io Desktop installation may be used for native inspection or an explicitly requested derivative export.

Steps

1. Read the bundled XML essentials in references/xml-essentials.md. It is the complete offline contract for ordinary nodes, edges, labels, geometry, and pages. Done when: the chosen document structure and ID scheme are clear.
2. Generate uncompressed mxGraphModel XML. Prefer the mxfile wrapper for a native named page; raw mxGraphModel is valid for a single page. Keep the layout conservative when no visual inspection will be available. Done when: every intended relationship is represented by an edge and the file remains editable XML.
3. Write it to <descriptive-name>.drawio (lowercase-with-hyphens), in the location the repository's agent contract (AGENTS.md or equivalent) specifies for deliverables when one exists, otherwise the cwd. Done when: the file exists at the reported path.
4. Validate structurally with node <skill-root>/scripts/validate-drawio.mjs <file.drawio>. Resolve <skill-root> from this SKILL.md; never assume the session working directory or a particular Claude Code/Codex install shape. Fix every error before delivery. If Node is unavailable, perform the checks in the bundled reference manually and report that deterministic validation was unavailable. Done when: the validator passes, or the final report names the degraded manual-only check.
5. Inspect natively when available. Prefer a local draw.io/diagrams.net application or another already-available native renderer that does not disclose the artifact externally. For complex or edge-label-heavy diagrams, use the optional visual workflow below if permission and tooling allow it. Done when: the diagram was inspected, or the final report clearly limits assurance to structural validation.
6. Report the absolute path, validation performed, visual-inspection status, and how to open it: drag the file onto app.diagrams.net, or File → Open from → Device (see "Opening in a browser" below before opening it for the user).

For advanced shapes, swimlanes, layers, edge routing, or theme work, the pinned upstream drawio-mcp XML reference is optional depth. Fetch it only when the task needs those features and network access is already allowed; ordinary generation never depends on it.

Design quality

A diagram should argue, not just label boxes: strip the text and the structure alone should still carry the concept. Every real relationship gets an edge. Position alone doesn't show a connection, so if A depends on B, draw the line. Build hierarchy through size and whitespace (make the important node bigger and give it room), not through decorative color or borders. If an edge needs tortured routing (hand-placed waypoints, a curve bent around an obstacle) to reach its target, the layout is wrong, not the edge: move the node so the line runs straight.