Diagram families
Twelve families share one deterministic layout engine. Each parses from Mermaid text and renders to SVG, PNG, ASCII, Unicode, and layout JSON from the same positioned model.
Every family carries a route certificate: a machine-checkable claim about how its edges were routed — orthogonal boxes for class and ER, lifelines for sequence, side-anchored links for architecture. That certificate is what lets verify answer in tiers instead of guessing.
| Family | What it draws |
|---|---|
| Flowchart | Decision flow with labeled branches. |
| State | Lifecycle using Mermaid stateDiagram-v2 syntax. |
| Sequence | Request/response messages between participants. |
| Timeline | Chronological milestones with sections. |
| Class | Classes with members and relationships. |
| ER | Entities, attributes, keys, and cardinality markers. |
| Journey | Scored user tasks grouped by section. |
| Architecture | Services, groups, icons, and routed connections. |
| XY chart | Bar and line series using xychart syntax. |
| Pie | Proportional slices with values shown in the legend. |
| Quadrant | Two-axis priority map with labeled regions and points. |
| Gantt | Sections, dependencies, status tags, and a milestone. |
See any of them rendered on the examples page, or open one in the editor.