Visual documentation that teaches — and actually renders

Goal: visual docs that make a reader understand, not just diagrams that exist. Two properties, always together:

1. Didactic — every diagram is chosen to teach one idea, narrated in prose, and built for progressive understanding (big picture → detail).
2. Correct — diagram-as-code is deterministic, so it's validated by compiling, not by eyeballing. A diagram that doesn't parse is a bug.

This skill covers: teaching-oriented flow, sequence, and state diagrams; ASCII packet/byte/memory walks; annotated code explanation (call graphs, execution traces); choosing the right diagram type for a concept; the Mermaid + ASCII authoring rules; and the deterministic validation loop. It also covers architecture diagrams (C4).

This skill does NOT cover: data charts/plots (bar/line/scatter/dashboards) → use the dataviz skill. Auto-generating a whole codebase's architecture doc end to end → use the visual-explainer agent (it reuses this skill for the mechanics).