Mermaid Diagram Examples & Templates

Copy these practical Mermaid snippets into the editor, then adapt names, services, and labels to match your own documentation. Each example is intentionally small enough to understand quickly and specific enough to be useful in real technical docs.

How to Use These Examples

Start by copying one snippet into Mermaid Preview. Once it renders, rename the nodes to match your application, replace generic labels with real API paths or system names, and remove any branch that does not help the reader. The best documentation diagram is usually the smallest diagram that answers the reader's question.

Use flowcharts when the reader needs to understand decisions, sequence diagrams when timing matters, ER diagrams when relationships matter, and state diagrams when an item moves through a lifecycle.

API Request Flowchart

Use this when documenting validation, authorization, and error paths.

flowchart TD
  A[Client request] --> B{Authenticated?}
  B -->|No| C[Return 401]
  B -->|Yes| D{Payload valid?}
  D -->|No| E[Return 400]
  D -->|Yes| F[Process request]
  F --> G[Return 200]

Open the editor

Login Sequence Diagram

Show browser, API, identity provider, and session creation order.

sequenceDiagram
  actor User
  participant Browser
  participant API
  participant IdP as Identity Provider
  User->>Browser: Submit login form
  Browser->>API: POST /login
  API->>IdP: Validate credentials
  IdP-->>API: Token
  API-->>Browser: Set session cookie

Read sequence tutorial

Database Relationship

Document entities and relationships without a separate ERD tool.

erDiagram
  USER ||--o{ ORDER : places
  ORDER ||--|{ ORDER_ITEM : contains
  PRODUCT ||--o{ ORDER_ITEM : appears_in
  USER {
    string id
    string email
  }

Try in Mermaid Preview

State Diagram

Useful for payment, onboarding, approval, or ticket workflows.

stateDiagram-v2
  [*] --> Draft
  Draft --> Submitted: submit
  Submitted --> Approved: approve
  Submitted --> Rejected: reject
  Approved --> [*]
  Rejected --> Draft: revise

Try in Mermaid Preview

Class Diagram

Use class diagrams for domain models, interfaces, and object relationships.

classDiagram
  class Invoice {
    +string id
    +decimal total
    +markPaid()
  }
  class Payment {
    +string provider
    +decimal amount
  }
  Invoice "1" -- "many" Payment

Try in Mermaid Preview

Release Gantt Chart

Use a Gantt chart to explain project phases, ownership, and dependencies.

gantt
  title API Release Plan
  dateFormat  YYYY-MM-DD
  section Build
  Implement endpoint :a1, 2026-06-01, 5d
  Add tests          :a2, after a1, 3d
  section Release
  QA review          :b1, after a2, 2d
  Production deploy  :b2, after b1, 1d

Try in Mermaid Preview

Example Selection Checklist

If a diagram grows too large, split it by reader task. For example, an authentication article might use one flowchart for validation rules and one sequence diagram for token exchange. That is usually clearer than forcing every detail into a single canvas.

For more explanation, read the flowchart tutorial, the sequence diagram tutorial, or the guide to embedding Mermaid in Markdown.