name: drawio description: Apply when creating or reviewing architecture diagrams, Mermaid diagrams, or draw.io files. license: MIT version: 1.0.0 tokens_target: 1300 triggers:

• architecture diagram
• mermaid diagram
• drawio file

loads_after: [] supersedes: []

Sub-Skill: Diagrams (draw.io / Mermaid)

Purpose: Ensure diagrams are version-controlled as source, rendered consistently, and kept in sync with the system they describe.

Rules

Source Control

1. Commit source, not just exports. Always commit diagram source files (.drawio, .mmd, .puml) alongside or instead of rendered image exports. Reference: ERR-2026-027
2. No binary-only diagrams. Never commit only a PNG or SVG export without the editable source; reviewers cannot diff or modify a raster image.
3. One source file per diagram. Use a single canonical source file per diagram; avoid duplicating the same diagram in multiple formats.

Format Selection

1. Prefer diagram-as-code. Prefer Mermaid or PlantUML over draw.io XML when the diagram fits a supported diagram type; text diffs are reviewable.
2. Match diagram type to content. Use sequenceDiagram for request flows, flowchart for decision logic, C4Context/C4Container for architecture, erDiagram for data models.
3. Set layout direction explicitly. Always declare layout direction (LR, TD) in Mermaid flowcharts; never rely on the default, which varies by renderer.

Rendering Pipeline

1. Document the render command. Always include the render command or CI step in the repo README or Makefile so any contributor can regenerate exports.
2. Regenerate exports in CI. Ensure CI regenerates diagram exports from source and fails if the committed export differs from the generated one.
3. Pin renderer version. Always pin the Mermaid CLI or draw.io CLI version in CI to prevent silent rendering changes across upgrades.

Quality & Consistency

1. Use consistent node naming. Always use the same label for the same system component across all diagrams in the repo; divergent names cause confusion.
2. Add alt text to exported images. Always add descriptive alt text to diagram images embedded in documentation for accessibility.
3. Review diagrams in PRs. Before merging, verify that any diagram change accurately reflects the system change described in the PR.

See also

• skills/svg-check/SKILL.md
• skills/error-log/SKILL.md