Mermaid Diagram Templates for System Design Interviews

Every system-design interview expects four diagrams: high-level architecture, request flow, data model, and (sometimes) state machine. Drawing them on a whiteboard mid-interview is slow and error-prone. If you have an AI tool that renders Mermaid (Interview Helpers does this inline), here are the templates that cover 80% of design questions.

1. High-level architecture (flowchart)

Use this whenever you're sketching the overall system. Client → CDN/WAF → API gateway → services → caches → datastores.

flowchart LR
  Client["Client (web/mobile)"] -->|HTTPS| CDN
  CDN -->|cache miss| Gateway[API Gateway]
  Gateway --> Auth[Auth Service]
  Gateway --> Service[Core Service]
  Service --> Cache[(Redis)]
  Service --> DB[(Primary DB)]
  Service --> Queue[/Message Queue/]
  Queue --> Worker[Background Worker]
  Worker --> DB

2. Request sequence (sequenceDiagram)

For walking through a specific user action — login, post, search. Shows the time-ordered message exchange between components.

sequenceDiagram
  participant C as Client
  participant G as API Gateway
  participant S as Service
  participant Ca as Cache
  participant D as Database

  C->>G: GET /resource/123 (Bearer token)
  G->>G: Verify JWT
  G->>S: forward request
  S->>Ca: GET resource:123
  alt cache hit
    Ca-->>S: payload
  else cache miss
    S->>D: SELECT * WHERE id=123
    D-->>S: row
    S->>Ca: SET resource:123 (TTL 60s)
  end
  S-->>G: response
  G-->>C: 200 OK + payload

3. Data model (erDiagram)

For showing tables, columns, primary/foreign keys, and relationships. Mermaid's parser is picky here — stick to the simple types (string, int, uuid, timestamp, bool, json) and avoid length annotations like varchar(255).

erDiagram
  USER {
    uuid id PK
    string email UK
    string display_name
    timestamp created_at
  }
  POST {
    uuid id PK
    uuid user_id FK
    string title
    string body
    timestamp created_at
  }
  COMMENT {
    uuid id PK
    uuid post_id FK
    uuid user_id FK
    string body
    timestamp created_at
  }
  USER ||--o{ POST : authors
  USER ||--o{ COMMENT : writes
  POST ||--o{ COMMENT : has

Cardinalities to remember: ||--o{ = one-to-many, ||--|| = one-to-one, }o--o{ = many-to-many.

4. State machine (stateDiagram-v2)

For order/payment/job status flows, where you need to show valid transitions explicitly.

stateDiagram-v2
  [*] --> Pending
  Pending --> Processing: charge
  Processing --> Completed: success
  Processing --> Failed: gateway error
  Failed --> Pending: retry
  Completed --> Refunded: refund
  Refunded --> [*]
  Completed --> [*]

How to actually use these

1. Memorize the shape of each (you don't need exact syntax — just the structure)
2. In a real interview, when you need to draw a diagram, use System Design Mode: Ctrl+Shift+S → Ctrl+1 screenshot of the question
3. The AI returns a diagram inline based on the actual question — usually a refined version of one of these templates
4. Read it, paraphrase it aloud to the interviewer, drill into specifics they ask about

Pitfalls to avoid

• Unicode arrows. Mermaid does NOT render →, ⟶, or ⇒ — only ASCII -->.
• Long node labels. Keep them under ~25 chars or the diagram gets unreadable.
• Comments inside entity blocks. Mermaid's erDiagram parser breaks. Put indexes / shard keys in prose below the diagram.
• Special characters in entity names. Use UPPER_SNAKE only — no hyphens, no spaces.

See the System Design Mode docs for how Interview Helpers auto-fixes most of these mistakes when an AI strays.