drawio-diagram

Installation
SKILL.md

Draw.io Diagram

Produce a valid, readable native .drawio file. Native XML is the source of truth and remains beside any export. This skill exists for draw.io compatibility and editability; a generic diagram, geometry, grid, or chart belongs to technical-figure.

Quick path

  1. Form the reader brief in the content contract below. Fix the reader and the one question; do not reduce the material to a sentence before you know what the peer must be able to verify.

  2. Derive the required nodes, edges, groups, and annotations from that brief. Every component and relation the peer needs to verify the answer is required; a fact that answers a different question stays outside the figure. Read references/local/figure-principles.md and references/local/figure-style.md unless the user supplied a different style or an existing file already establishes one.

  3. Read references/local/upstream-drawio-rules.md. Start with uncompressed bare mxGraphModel XML unless pages or file metadata require <mxfile>.

  4. Choose a layout that preserves semantic grouping and the intended reading path. Automatic layout is the default for a new graph; use explicit placement when geometry or an existing design carries meaning. references/local/auto-layout.md describes the bundled route.

  5. Run both validators from the skill root:

    python3 scripts/validate_drawio_xml.py <file>.drawio
    python3 scripts/validate_drawio_layout.py <file>.drawio
    
  6. For every new diagram or substantial visual edit, export and inspect SVG or PNG when an exporter is available, in the dark theme as well when readers will see it dark. Apply references/local/review-loop.md: fix render defects first, then remove any text the document should carry. If a route is ambiguous or collides with content, use references/local/edge-routing.md, fix the affected routes, and validate again.

Installs
18
First Seen
Aug 4, 2026