Mermaid Diagram Samples

1. Architecture Diagram — Planner V1

The architecture diagram that was previously hand-authored SVG, now as Mermaid flowchart. Uses classDef for three-tier node treatment: owned (royal-4 fill, royal-8 stroke), highlighted (royal-5 fill, royal-9 stroke, 2px), external (transparent fill, royal-7 dashed).

%%{init: {
  "theme": "base",
  "themeVariables": {
    "primaryColor": "#1E2346",
    "primaryBorderColor": "#3B5BDB",
    "primaryTextColor": "#E6E2D9",
    "lineColor": "#3B5BDB",
    "secondaryColor": "#121428",
    "tertiaryColor": "#181B36",
    "fontFamily": "Geist, -apple-system, system-ui, sans-serif",
    "fontSize": "13px",
    "clusterBkg": "transparent",
    "clusterBorder": "#252C58",
    "edgeLabelBackground": "#121428"
  }
}}%%
flowchart TD
  browser["Browser\n(React SPA)"]

  subgraph worker ["CLOUDFLARE WORKER"]
    direction LR
    auth["Auth"]
    tasks["Tasks"]
    reviews["Reviews"]
    sms["SMS"]
    notify["Notify"]
  end

  db[("D1\n(SQLite)")]
  gateway["Vendor Gateway\nkillswitch → budget → dedup → send"]

  cron(["Cron Trigger"])
  google["Google OAuth"]
  twilio["Twilio"]
  haiku["Claude Haiku"]

  browser --> worker
  cron --> notify

  auth & tasks & reviews & sms & notify --> db
  sms --> gateway
  notify --> gateway

  auth -.-> google
  gateway -.-> twilio
  gateway -.-> haiku

  classDef owned fill:#1E2346,stroke:#3B5BDB,stroke-width:1.5px,color:#E6E2D9,rx:8,ry:8
  classDef highlighted fill:#252C58,stroke:#4D6DE8,stroke-width:2px,color:#E6E2D9,rx:8,ry:8
  classDef external fill:none,stroke:#364280,stroke-width:1.5px,stroke-dasharray:6 4,color:#E6E2D9,rx:8,ry:8
  classDef trigger fill:none,stroke:#364280,stroke-width:1.5px,stroke-dasharray:6 4,color:#E6E2D9

  class browser,auth,tasks,reviews,sms,notify,db owned
  class gateway highlighted
  class google,twilio,haiku external
  class cron trigger

Planner V1 system architecture. The Vendor Gateway (bright stroke) is the single path to all paid APIs.

What works:

classDef handles the three-tier node treatment cleanly
Subgraph creates the "Cloudflare Worker" grouping box
Database cylinder shape via [(text)]
Stadium/pill shape for Cron via ([text])
Dashed arrows (-.->) for external calls
Multi-line labels with \n for sub-labels (same font size)

Limitations vs hand-authored SVG:

Sub-label on Vendor Gateway renders at the same font size (no smaller emphasis text)
Arrow routing is automatic — less precise than hand-placed paths
Subgraph label styling is limited (Mermaid controls positioning)
stroke-dasharray on nodes may need escaping in some renderers

2. Flowchart — The Weekly Consolidation

The existing standard from portfolio-imagery-standards.md. Simple left-to-right data flow. This is the baseline Mermaid diagram type that was already planned.

%%{init: {
  "theme": "base",
  "themeVariables": {
    "primaryColor": "#1E2346",
    "primaryBorderColor": "#3B5BDB",
    "primaryTextColor": "#E6E2D9",
    "lineColor": "#3B5BDB",
    "secondaryColor": "#121428",
    "tertiaryColor": "#181B36",
    "fontFamily": "Geist, -apple-system, system-ui, sans-serif",
    "fontSize": "13px",
    "edgeLabelBackground": "#121428"
  }
}}%%
flowchart LR
  A["Browse recipes"] --> B["Pick 3 meals"]
  B --> C["Consolidate"]
  C --> D{"Optional\ngarnishes?"}
  D -->|yes| E["Include"]
  D -->|no| F["Skip"]
  E --> G["Review trolley"]
  F --> G
  G --> H["Checkout"]

  classDef default fill:#1E2346,stroke:#3B5BDB,stroke-width:1.5px,color:#E6E2D9,rx:8,ry:8

The Weekly: recipe selection to checkout flow.

3. Quadrant Chart — 2x2 Matrix

The quadrantChart diagram type for simple 2x2 matrices. Example: prioritisation matrix for Planner V1 features. Limited theming — Mermaid quadrant charts have their own colour variables.

%%{init: {
  "theme": "base",
  "themeVariables": {
    "quadrant1Fill": "#252C58",
    "quadrant2Fill": "#1E2346",
    "quadrant3Fill": "#181B36",
    "quadrant4Fill": "#1E2346",
    "quadrant1TextFill": "#D5DCFA",
    "quadrant2TextFill": "#A5B4FF",
    "quadrant3TextFill": "#A5B4FF",
    "quadrant4TextFill": "#A5B4FF",
    "quadrantPointFill": "#4D6DE8",
    "quadrantPointTextFill": "#E6E2D9",
    "quadrantXAxisTextFill": "#A5B4FF",
    "quadrantYAxisTextFill": "#A5B4FF",
    "quadrantTitleFill": "#D5DCFA",
    "quadrantInternalBorderStrokeFill": "#364280",
    "quadrantExternalBorderStrokeFill": "#364280",
    "fontFamily": "Geist, -apple-system, system-ui, sans-serif",
    "fontSize": "13px"
  }
}}%%
quadrantChart
    title Planner V1 Feature Prioritisation
    x-axis Low effort --> High effort
    y-axis Low impact --> High impact
    quadrant-1 Ship first
    quadrant-2 Plan carefully
    quadrant-3 Deprioritise
    quadrant-4 Quick wins
    SMS reminders: [0.7, 0.9]
    Weekly review: [0.5, 0.8]
    Vendor Gateway: [0.8, 0.95]
    Google OAuth: [0.6, 0.7]
    Budget caps: [0.3, 0.85]
    Task CRUD: [0.2, 0.6]
    Dark mode: [0.15, 0.2]
    Export CSV: [0.4, 0.3]

Planner V1 feature prioritisation. Top-right quadrant = ship first.

Quadrant chart notes:

Theming uses dedicated quadrant* variables, not the standard node variables
Point labels are automatic — no manual positioning needed
Limited layout control: can't adjust point label size independently
Background colour of the chart itself comes from the quadrant fill variables
Good for simple data; for custom annotations or non-standard axes, fall back to hand-authored SVG

4. Mobile Legibility Check

The architecture diagram rendered inside containers at desktop (720px) and mobile (390px) widths, simulating the case study body column. Tests whether Mermaid's auto-layout handles narrow containers gracefully.

Desktop — 720px body

%%{init: {
  "theme": "base",
  "themeVariables": {
    "primaryColor": "#1E2346",
    "primaryBorderColor": "#3B5BDB",
    "primaryTextColor": "#E6E2D9",
    "lineColor": "#3B5BDB",
    "secondaryColor": "#121428",
    "tertiaryColor": "#181B36",
    "fontFamily": "Geist, -apple-system, system-ui, sans-serif",
    "fontSize": "13px",
    "clusterBkg": "transparent",
    "clusterBorder": "#252C58",
    "edgeLabelBackground": "#121428"
  }
}}%%
flowchart TD
  browser["Browser (React SPA)"]

  subgraph worker ["CLOUDFLARE WORKER"]
    direction LR
    auth["Auth"]
    tasks["Tasks"]
    reviews["Reviews"]
    sms["SMS"]
    notify["Notify"]
  end

  db[("D1 (SQLite)")]
  gateway["Vendor Gateway\nkillswitch → budget → dedup → send"]

  cron(["Cron Trigger"])
  google["Google OAuth"]
  twilio["Twilio"]
  haiku["Claude Haiku"]

  browser --> worker
  cron --> notify

  auth & tasks & reviews & sms & notify --> db
  sms --> gateway
  notify --> gateway

  auth -.-> google
  gateway -.-> twilio
  gateway -.-> haiku

  classDef owned fill:#1E2346,stroke:#3B5BDB,stroke-width:1.5px,color:#E6E2D9
  classDef highlighted fill:#252C58,stroke:#4D6DE8,stroke-width:2px,color:#E6E2D9
  classDef external fill:none,stroke:#364280,stroke-width:1.5px,stroke-dasharray:6 4,color:#E6E2D9
  classDef trigger fill:none,stroke:#364280,stroke-width:1.5px,stroke-dasharray:6 4,color:#E6E2D9

  class browser,auth,tasks,reviews,sms,notify,db owned
  class gateway highlighted
  class google,twilio,haiku external
  class cron trigger

Mobile — 390px screen

%%{init: {
  "theme": "base",
  "themeVariables": {
    "primaryColor": "#1E2346",
    "primaryBorderColor": "#3B5BDB",
    "primaryTextColor": "#E6E2D9",
    "lineColor": "#3B5BDB",
    "secondaryColor": "#121428",
    "tertiaryColor": "#181B36",
    "fontFamily": "Geist, -apple-system, system-ui, sans-serif",
    "fontSize": "12px",
    "clusterBkg": "transparent",
    "clusterBorder": "#252C58",
    "edgeLabelBackground": "#121428"
  }
}}%%
flowchart TD
  browser["Browser (React SPA)"]

  subgraph worker ["CLOUDFLARE WORKER"]
    direction LR
    auth["Auth"]
    tasks["Tasks"]
    reviews["Reviews"]
    sms["SMS"]
    notify["Notify"]
  end

  db[("D1 (SQLite)")]
  gateway["Vendor Gateway\nkillswitch → budget → dedup → send"]

  cron(["Cron Trigger"])
  google["Google OAuth"]
  twilio["Twilio"]
  haiku["Claude Haiku"]

  browser --> worker
  cron --> notify

  auth & tasks & reviews & sms & notify --> db
  sms --> gateway
  notify --> gateway

  auth -.-> google
  gateway -.-> twilio
  gateway -.-> haiku

  classDef owned fill:#1E2346,stroke:#3B5BDB,stroke-width:1.5px,color:#E6E2D9
  classDef highlighted fill:#252C58,stroke:#4D6DE8,stroke-width:2px,color:#E6E2D9
  classDef external fill:none,stroke:#364280,stroke-width:1.5px,stroke-dasharray:6 4,color:#E6E2D9
  classDef trigger fill:none,stroke:#364280,stroke-width:1.5px,stroke-dasharray:6 4,color:#E6E2D9

  class browser,auth,tasks,reviews,sms,notify,db owned
  class gateway highlighted
  class google,twilio,haiku external
  class cron trigger

5. Comparison — Mermaid vs Hand-Authored SVG

The same Planner V1 architecture rendered via Mermaid (auto-layout) and via the hand-authored SVG from the v2 explorer. For evaluating whether the auto-layout is good enough.

Mermaid (auto-layout)

%%{init: {
  "theme": "base",
  "themeVariables": {
    "primaryColor": "#1E2346",
    "primaryBorderColor": "#3B5BDB",
    "primaryTextColor": "#E6E2D9",
    "lineColor": "#3B5BDB",
    "secondaryColor": "#121428",
    "tertiaryColor": "#181B36",
    "fontFamily": "Geist, -apple-system, system-ui, sans-serif",
    "fontSize": "13px",
    "clusterBkg": "transparent",
    "clusterBorder": "#252C58",
    "edgeLabelBackground": "#121428"
  }
}}%%
flowchart TD
  browser["Browser (React SPA)"]

  subgraph worker ["CLOUDFLARE WORKER"]
    direction LR
    auth["Auth"]
    tasks["Tasks"]
    reviews["Reviews"]
    sms["SMS"]
    notify["Notify"]
  end

  db[("D1 (SQLite)")]
  gateway["Vendor Gateway\nkillswitch → budget → dedup → send"]

  cron(["Cron Trigger"])
  google["Google OAuth"]
  twilio["Twilio"]
  haiku["Claude Haiku"]

  browser --> worker
  cron --> notify

  auth & tasks & reviews & sms & notify --> db
  sms --> gateway
  notify --> gateway

  auth -.-> google
  gateway -.-> twilio
  gateway -.-> haiku

  classDef owned fill:#1E2346,stroke:#3B5BDB,stroke-width:1.5px,color:#E6E2D9
  classDef highlighted fill:#252C58,stroke:#4D6DE8,stroke-width:2px,color:#E6E2D9
  classDef external fill:none,stroke:#364280,stroke-width:1.5px,stroke-dasharray:6 4,color:#E6E2D9
  classDef trigger fill:none,stroke:#364280,stroke-width:1.5px,stroke-dasharray:6 4,color:#E6E2D9

  class browser,auth,tasks,reviews,sms,notify,db owned
  class gateway highlighted
  class google,twilio,haiku external
  class cron trigger

Hand-authored SVG (from v2 explorer)

Key differences to evaluate:

Layout density: Mermaid spaces nodes generously; hand-authored SVG is more compact
Sub-labels: Hand-authored SVG has a smaller Geist Mono line under "Vendor Gateway"; Mermaid renders both lines at the same size
Arrow routing: Hand-authored SVG uses precise paths with right-angle bends; Mermaid uses its auto-router
Grouping label: Hand-authored SVG places "CLOUDFLARE WORKER" as uppercase with letter-spacing; Mermaid uses its default subgraph label style
Database shape: Hand-authored SVG has a custom ellipse cap; Mermaid uses its native cylinder