Figures & Diagrams

Figures are centered plates with italic, em-dash captions. The codex supports two kinds: inline SVG (offline, hand-authored) and Mermaid diagrams rendered by the local mermaid.min.js asset.

An Inline SVG Plate

<figure>
<svg viewBox="0 0 420 120" width="420" role="img" aria-label="Verification funnel">
  <!-- hand-authored, offline, diffable -->
</svg>
<figcaption>The caption, set in italics after an em dash.</figcaption>
</figure>

Plates Side by Side

Wrap figures in <div class="figrid"> to set them as a grid; on narrow pages the plates stack:

<div class="figrid">
<figure>…</figure>
<figure>…</figure>
</div>

A Mermaid Plate

graph LR
    A[Markdown Sources] --> B[mdBook]
    A --> C[Slide Compiler]
    B --> D[Static Website]
    C --> D
    D --> E[PDF via Chromium]

A Mermaid diagram is an ordinary fenced block with the mermaid language tag:

```mermaid
graph LR
    A[Markdown Sources] --> B[mdBook]
    B --> D[Static Website]
```