Every Mermaid diagram, one page.

Twenty-three Mermaid v11 diagram types—from flowcharts and sequence diagrams to architecture, Sankey, radar, and treemap—each with a working example and copyable source. Paste your own code in the scratchpad to render it live.

23 diagram types · Mermaid v11

Diagram index

Scratchpad

Paste or edit any Mermaid code — it renders as you type and is saved in this browser. Ctrl/⌘+Enter forces a re-render, Tab indents.

Start from

Drag the editor's corner to resize

Nothing to render yet — paste Mermaid code above.

Essentials

5 types

Flowchart

Nodes and edges for processes, decisions, and flows—the workhorse of the Mermaid family.

CI/CD pipelines
Decision trees
Algorithms and business processes

Rendering diagram…

View source

mermaid

flowchart TD
    A[Push to main] --> B{CI checks pass?}
    B -->|Yes| C[Build container image]
    B -->|No| D[Notify author]
    D --> E[Fix and re-push]
    E --> B
    C --> F[Push to registry]
    F --> G{Deploy approved?}
    G -->|Yes| H[Rolling deploy to prod]
    G -->|No| I[Hold for review]
    H --> J[Smoke tests]
    J --> K{Healthy?}
    K -->|Yes| L[Done]
    K -->|No| M[Rollback]

Sequence Diagram

How actors and systems exchange messages over time—the classic for API and protocol docs.

API request flows
Auth handshakes (OAuth, SAML)
Debugging distributed interactions

Rendering diagram…

View source

mermaid

sequenceDiagram
    autonumber
    participant U as User
    participant C as Client App
    participant A as Auth Server
    participant R as Resource API

    U->>C: Click "Sign in"
    C->>A: GET /authorize (client_id, scope)
    A->>U: Login page
    U->>A: Enter credentials
    A->>C: Redirect with auth code
    C->>A: POST /token (code, client_secret)
    A-->>C: access_token + refresh_token
    C->>R: GET /profile (Bearer token)
    R-->>C: User profile JSON
    C-->>U: Signed-in dashboard
    Note over C,R: Tokens expire in 1h - the refresh_token renews them

Class Diagram

UML classes, members, and relationships for object-oriented designs.

Domain modeling
Codebase documentation
Planning refactors

Rendering diagram…

View source

mermaid

classDiagram
    class Vehicle {
        +String make
        +String model
        +int year
        +start() void
        +stop() void
    }
    class Car {
        +int doors
        +openTrunk() void
    }
    class Engine {
        +int horsepower
        +ignite() void
    }
    class Driver {
        +String name
        +drive(Vehicle v) void
    }
    Vehicle <|-- Car
    Car *-- Engine : contains
    Driver --> Vehicle : drives

State Diagram

States and the transitions between them—perfect for anything with a lifecycle.

Order or ticket lifecycles
UI component states
Protocol state machines

Rendering diagram…

View source

mermaid

stateDiagram-v2
    [*] --> Created
    Created --> Paid : payment received
    Created --> Cancelled : timeout
    Paid --> Shipped : packed
    Paid --> Refunded : chargeback
    Shipped --> Delivered : signed
    Shipped --> Returned : customer return
    Delivered --> [*]
    Cancelled --> [*]
    Refunded --> [*]
    Returned --> Refunded : refund issued

Entity Relationship Diagram

Database tables, attributes, and cardinalities without opening a schema tool.

Database schema design
Onboarding to an existing database
Data-model reviews

Rendering diagram…

View source

mermaid

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "listed in"
    CUSTOMER {
        string id PK
        string name
        string email
    }
    ORDER {
        string id PK
        string customer_id FK
        date placed_at
        string status
    }
    LINE_ITEM {
        string order_id FK
        string product_id FK
        int quantity
    }
    PRODUCT {
        string id PK
        string name
        float price
    }

Planning & product

6 types

User Journey

A user's experience across steps, scored for satisfaction—UX's favorite one-pager.

UX research synthesis
Customer experience mapping
Pain-point spotting

Rendering diagram…

View source

mermaid

journey
    title Morning coffee run
    section Leave home
      Grab keys: 5: Me
      Walk to car: 4: Me
    section Buy coffee
      Queue up: 3: Me, Barista
      Order oat latte: 5: Me
      Wait for drink: 2: Me
      Pay: 4: Me
    section Head to work
      Drive to office: 5: Me

Gantt Chart

Tasks on a timeline with dependencies—a project plan that fits in a Markdown file.

Release planning
Sprint or milestone tracking
Dependency visualization

Rendering diagram…

View source

mermaid

gantt
    title Website relaunch plan
    dateFormat YYYY-MM-DD
    section Design
    Wireframes      :done,   des1, 2026-10-01, 2026-10-07
    Visual design   :active, des2, 2026-10-08, 2026-10-14
    section Build
    Frontend        :        dev1, after des2, 10d
    Backend API     :        dev2, after des2, 12d
    section Launch
    QA pass         :        qa1, after dev1, 5d
    Deploy to prod  :crit,   dep1, after qa1, 2d

Requirement Diagram

Requirements, system elements, and how they satisfy, trace, and verify each other.

Systems engineering docs
Compliance traceability
Acceptance criteria mapping

Rendering diagram…

View source

mermaid

requirementDiagram
    requirement login_req {
        id: 1
        text: "Users can sign in with email and password."
        risk: high
        verifymethod: test
    }
    requirement sso_req {
        id: 2
        text: "Users can sign in with Google SSO."
        risk: medium
        verifymethod: inspection
    }
    element web_app {
        type: "web application"
    }
    web_app - satisfies -> login_req
    web_app - satisfies -> sso_req
    sso_req - traces -> login_req

Mindmap

Ideas radiating from a central topic—brainstorming that can live directly in the doc.

Brainstorming sessions
Topic outlines
Knowledge mapping

Rendering diagram…

View source

mermaid

mindmap
  root((Mermaid))
    Diagrams
      Flowchart
      Sequence
      Class
      State
      ER
    Charts
      Gantt
      Pie
      Quadrant
      XY
      Radar
    Extras
      Idea maps
      Roadmaps
      Gitgraph
      Kanban

Timeline

Events laid out chronologically—history lessons and roadmaps in plain text.

Project roadmaps
Company history
Incident timelines

Rendering diagram…

View source

mermaid

timeline
    title History of the web
    1990 : Tim Berners-Lee proposes the World Wide Web
    1993 : Mosaic browser launches
    1998 : Google founded
    2004 : Web 2.0 and social media take off
    2007 : iPhone launches the mobile era
    2022 : ChatGPT sparks the AI wave

Kanban Board

Columns of cards for work in progress—a board that can live in your repo.

Lightweight task tracking
Sprint boards in docs
Personal to-do walls

Rendering diagram…

View source

mermaid

kanban
  Backlog
    setup[Set up repo]
    design[Draft UI mockups]
  In Progress
    auth[Implement auth flow]
  Review
    api[REST API endpoints]
  Done
    ci[CI pipeline]

Charts & data

6 types

Pie Chart

Part-of-a-whole proportions in a few lines, with no separate charting library required.

Survey results
Market or traffic share
Budget breakdowns

Rendering diagram…

View source

mermaid

pie title Browser share, Sept 2026
    "Chrome" : 62
    "Safari" : 19
    "Edge" : 6
    "Firefox" : 5
    "Other" : 8

Quadrant Chart

Two axes, four boxes—the classic 2×2 matrix for prioritization.

Feature prioritization
Risk matrices
Market positioning

Rendering diagram…

View source

mermaid

quadrantChart
    title Prioritize features
    x-axis "Low effort" --> "High effort"
    y-axis "Low value" --> "High value"
    quadrant-1 "Do later"
    quadrant-2 "Quick wins"
    quadrant-3 "Skip"
    quadrant-4 "Big bets"
    Dark mode: [0.3, 0.8]
    SSO login: [0.2, 0.9]
    Rewrite in Rust: [0.9, 0.5]
    New logo: [0.2, 0.2]

XY Chart

Bar and line charts on x/y axes—the spreadsheet chart you can version-control.

Metrics dashboards in docs
Trend reporting
A/B test results

Rendering diagram…

View source

mermaid

xychart-beta
    title "Signups per month"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Signups" 0 --> 500
    bar [120, 200, 180, 320, 410, 480]
    line [100, 150, 220, 260, 380, 450]

Sankey Diagram

Flows with widths proportional to quantity—see where energy, money, or users go.

Energy or budget flows
User funnels
Resource allocation

Rendering diagram…

View source

mermaid

sankey-beta
Solar, Grid, 120
Wind, Grid, 80
Grid, Homes, 110
Grid, Industry, 60
Grid, Loss, 30

Radar Chart

A multi-axis comparison on a spider web, ideal for compact spec-sheet showdowns.

Product comparisons
Skill assessments
Benchmark summaries

Rendering diagram…

View source

mermaid

radar-beta
  title "Phone comparison"
  axis b["Battery"], c["Camera"], s["Screen"], p["Price"], w["Weight"]
  curve i["Phone A"]{80, 90, 85, 40, 70}
  curve j["Phone B"]{70, 75, 90, 80, 60}
  max 100
  min 0

Treemap

Nested rectangles sized by value—a hierarchy whose weight is visible at a glance.

Budget breakdowns
Disk or resource usage
Portfolio composition

Rendering diagram…

View source

mermaid

treemap-beta
"Q3 Revenue"
    "Hardware": 420
    "Software": 310
    "Services"
        "Consulting": 120
        "Support": 90

Technical systems

5 types

Git Graph

Branches, commits, merges, and tags as a picture—worth a thousand git log commands.

Explaining branching strategy
Release-note visuals
Git tutorials

Rendering diagram…

View source

mermaid

gitGraph
    commit id: "init"
    branch feature
    checkout feature
    commit id: "add parser"
    commit id: "add tests"
    checkout main
    commit id: "hotfix"
    checkout feature
    merge main
    checkout main
    merge feature
    commit id: "release v1.0" tag: "v1.0"

C4 Diagram

Experimental C4-model syntax for context, container, and component views of software architecture.

System context docs
Architecture reviews
Onboarding engineers

Rendering diagram…

View source

mermaid

C4Context
    title Online bookstore - system context
    Person(customer, "Customer", "Buys books online")
    System(shop, "Bookstore", "Lets customers browse and order books")
    System_Ext(payments, "Payment gateway", "Processes card payments")
    SystemDb(warehouse, "Warehouse DB", "Tracks stock and shipments")

    Rel(customer, shop, "Browses and orders")
    Rel(shop, payments, "Charges cards via")
    Rel(shop, warehouse, "Reads and writes")

Packet Diagram

Bit-level layouts of network packets and binary formats.

Protocol documentation
Binary format specifications
Networking tutorials

Rendering diagram…

View source

mermaid

packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106-111: "Flags"
112-127: "Window Size"
128-143: "Checksum"
144-159: "Urgent Pointer"

Block Diagram

Composable blocks with columns and nesting for quick infrastructure sketches.

Infrastructure sketches
System block layouts
Hardware diagrams

Rendering diagram…

View source

mermaid

block-beta
    columns 3
    db["Database"] app["App Server"] cache["Cache"]
    block:net:3
        columns 1
        lb["Load Balancer"]
    end
    web1["Web 1"] web2["Web 2"] web3["Web 3"]
    lb --> web1
    lb --> web2
    lb --> web3
    web1 --> app
    app --> db
    app --> cache

Architecture Diagram

Cloud-style architecture with icons, groups, and directional edges.

Cloud topology docs
Deployment overviews
Network diagrams

Rendering diagram…

View source

mermaid

architecture-beta
    group cloud(cloud)[Cloud VPC]

    service lb(server)[Load Balancer] in cloud
    service api(server)[API Servers] in cloud
    service db(database)[Postgres] in cloud
    service cache(disk)[Redis] in cloud

    lb:R -- L:api
    api:B -- T:db
    api:B -- T:cache

Utility

1 type

Info

A diagnostic box showing the running Mermaid version—meta, but it counts as a type.

The Info diagram is intentionally minimal: its entire source is the word “info.”

Debugging render issues
Confirming the Mermaid version in a document pipeline

Rendering diagram…

View source

mermaid

info

No matching diagrams

Try a different term or choose another category.

Scope note. These 23 examples were syntax-checked with Mermaid 11.17.2, which is bundled with this page (vendor/mermaid.min.js)—no third-party requests. ZenUML is not included because it requires an experimental configuration; the final “Info” example is a diagnostic that displays the Mermaid version currently running.