Diagrams

Mermaid diagrams use the Avionics palette for visual consistency. Diagrams are authored in markdown and generated to SVG.

Theme Variables

Key mermaid theme variables mapped to design tokens:

primaryColor: #f04e30    /* --c-brand (nodes) */
clusterBkg: #ebebe6      /* --c-bg-surface (subgraphs) */
clusterBorder: #d1d1c7   /* --c-border */
textColor: #111111       /* --c-text-primary */
fontFamily: "B612 Mono"  /* --f-mono */

Generation Workflow

1. Write ```mermaid block in markdown article
2. Run pnpm diagrams to generate SVG
3. Script outputs to public/mermaid/{slug}-fig-{n}.svg
4. Script adds <figure> reference after mermaid block

Example Flowchart

```mermaid
flowchart LR
    subgraph "Input Layer"
        A["Source"]
    end
    
    subgraph "Processing"
        B["Transform"]
        C["Validate"]
        B --> C
    end
    
    A --> B
    C --> D["Output"]
```

Result: Nodes use Safety Orange (#f04e30), subgraphs use warm grey (#ebebe6), text uses primary black (#111111).