Mermaid Diagram Samples v2

1. Architecture Diagram — Planner V1

Three-tier node treatment via classDef. Labels now sentence case. Subgraph label ("Cloudflare Worker") is the only intentionally-uppercase element, matching the hand-authored SVG convention for group labels.

scroll →

%%{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,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.

2. Flowchart — The Weekly

Simple left-to-right data flow. Baseline diagram type from the imagery standards.

scroll →

%%{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

Mermaid quadrantChart for simple prioritisation matrices. Royal Tonal fills, sentence-case labels.

scroll →

%%{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.

4. Mobile Legibility

All diagrams share the same scroll container: min-width: 490px on the inner element, overflow-x: auto on the card. When the viewport is narrower than the diagram, horizontal scroll activates with a "scroll →" hint. Diagram text stays at 13px rendered — never shrinks. Try resizing the browser window to see the scroll activate.

Desktop — full width

scroll →

%%{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 simulation — 390px

390 × viewport

scroll →

%%{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

How the mobile legibility system works:

.diagram-inner has min-width: 490px — the diagram never renders narrower than this
.diagram-card has overflow-x: auto — horizontal scroll activates when the card is narrower than 490px
The "scroll →" hint appears only when overflow is detected (via JS after render)
Mermaid's fontSize: "13px" stays constant — text size is never reduced on mobile
At 490px rendered width, 13px Mermaid text stays at 13px CSS — well above the 9px legibility floor
In the production <Diagram> component, diagrams also bleed to full container width on mobile (negative margins cancel card padding) before scroll kicks in

5. All Types at Mobile Width

Each diagram type in a 390px mobile frame, demonstrating that the scroll container works consistently across flowcharts, architecture diagrams, and quadrant charts.

Flowchart

390px

scroll →

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#1E2346", "primaryBorderColor": "#3B5BDB", "primaryTextColor": "#E6E2D9", "lineColor": "#3B5BDB", "secondaryColor": "#121428", "fontFamily": "Geist, sans-serif", "fontSize": "13px", "edgeLabelBackground": "#121428"}}}%%
flowchart LR
  A["Browse"] --> B["Pick 3"]
  B --> C["Consolidate"]
  C --> D{"Garnishes?"}
  D -->|yes| E["Include"]
  D -->|no| F["Skip"]
  E --> G["Trolley"]
  F --> G
  classDef default fill:#1E2346,stroke:#3B5BDB,stroke-width:1.5px,color:#E6E2D9

Architecture

390px

scroll →

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#1E2346", "primaryBorderColor": "#3B5BDB", "primaryTextColor": "#E6E2D9", "lineColor": "#3B5BDB", "secondaryColor": "#121428", "fontFamily": "Geist, sans-serif", "fontSize": "13px", "clusterBkg": "transparent", "clusterBorder": "#252C58", "edgeLabelBackground": "#121428"}}}%%
flowchart TD
  browser["Browser"]
  subgraph w ["WORKER"]
    direction LR
    auth["Auth"]
    tasks["Tasks"]
    sms["SMS"]
  end
  db[("D1")]
  gw["Vendor Gateway"]
  ext["Twilio"]
  browser --> w
  auth & tasks & sms --> db
  sms --> gw
  gw -.-> ext
  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
  class browser,auth,tasks,sms,db owned
  class gw highlighted
  class ext external

Quadrant

390px

scroll →

%%{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, sans-serif", "fontSize": "13px"}}}%%
quadrantChart
    title Feature Priority
    x-axis Low effort --> High effort
    y-axis Low impact --> High impact
    quadrant-1 Ship first
    quadrant-2 Plan
    quadrant-3 Deprioritise
    quadrant-4 Quick wins
    SMS: [0.7, 0.9]
    Gateway: [0.8, 0.95]
    OAuth: [0.6, 0.7]
    Budget: [0.3, 0.85]