Visualizing Architectures with Mermaid

Mermaid lets you draw diagrams using plain text. In this post we show two common types: a flowchart and a sequence diagram. Just write fenced code blocks marked as mermaid.

Flowchart example

flowchart TD
  A[Request] --> B{Routing}
  B -- /api --> C[API Service]
  B -- / --> D[Static Site]
  C --> E[(DB)]
  D -->|assets| CDN[(CDN)]
  C -. events .-> Q[(Queue)]

Sequence diagram example

sequenceDiagram
  participant U as User
  participant W as Web App
  participant API as API
  participant DB as Database

  U->>W: Clicks "Run Report"
  W->>API: GET /reports?range=last_7_days
  API->>DB: SELECT ...
  DB-->>API: rows
  API-->>W: 200 OK (JSON)
  W-->>U: Renders chart

These diagrams are rendered on the client side. If you view the page source, you will still see the original code blocks—our page script detects them and swaps in rendered SVGs.