Diagrams
Diagrams are authored as a plain ```mermaid fence, no component required; the syntax lives in Authoring, Diagrams. This page shows how the rendered result behaves.
Try one
Drag to pan, scroll or use the controls to zoom, and the last control opens the diagram fullscreen. Press Esc to close it.
sequenceDiagram
participant R as Reader
participant S as Docs site
participant P as Postgres
R->>S: POST /_readsmith/api/search
S->>P: full-text + vector query
P-->>S: ranked chunks
S-->>R: hits with deep links
A second grammar
The same fence renders every Mermaid type. A state machine:
stateDiagram-v2
[*] --> Building
Building --> Ready: bundle written
Building --> Failed: diagnostics
Ready --> Serving: deploy
Serving --> Serving: rollback repoints
Failed --> Building: fix and rebuild
How it behaves
- Themed to your site. Diagram colors derive from the live design tokens, not Mermaid's palette, and diagrams re-render when the reader toggles light and dark.
- Lazy by design. The Mermaid renderer loads only on pages that contain a diagram, in its own chunk. Prose pages keep shipping zero JavaScript.
- Readable at any size. Diagrams are vectors: zooming re-renders crisply, and large diagrams get a fullscreen view with its own pan and zoom.
- Safe by default. Diagram source renders with Mermaid's strict security level; script-bearing input is refused.