---
name: diagrams
description: Create readable software, process and network diagrams. Use for flowcharts, architecture diagrams, node-link graphs, state machines and diagram-as-code.
---

# Diagrams

Identify node/edge meaning and reading order before layout. Prefer Mermaid for diagram-as-code; use ELK when layered/ported graph layout needs explicit control; choose an editor library only when editing is part of the product. Check overlaps, connector meaning, keyboard access, text alternative and mobile legibility. `fixtures/diagram` is the runnable example.