Mermaid Cheat Sheet

Complete quick reference for all Mermaid.js diagram syntax. Bookmark this page for fast access to every diagram type.

Flowchart Syntax Sequence Diagram Syntax Class Diagram Syntax State Diagram Syntax Gantt Chart Syntax ER Diagram Syntax Journey Map Syntax Git Graph Syntax Mindmap Syntax Pie Chart Syntax Timeline Syntax Kanban Syntax Quadrant Chart Syntax Sankey Diagram Syntax XY Chart Syntax Block Diagram Syntax Architecture Diagram Syntax Packet Diagram Syntax

Flowchart Syntax

Visualize processes, workflows, and algorithms with nodes and directional arrows. Perfect for business processes and decision trees.

Basic top-down flow

Try in Editor

graph TD
    A[Start] --> B[End]

Decision branching

Try in Editor

graph TD
    A{Decision} -->|Yes| B[OK]
    A -->|No| C[Cancel]

Subgraph grouping

Try in Editor

graph LR
    subgraph Group
        A --> B
    end

Node shapes

Try in Editor

graph TD
    A[Rectangle] --> B(Rounded)
    B --> C{Diamond}
    C --> D((Circle))
    C --> E([Stadium])

Sequence Diagram Syntax

Document interactions between different actors or systems over time. Ideal for API documentation and system design.

Basic message exchange

Try in Editor

sequenceDiagram
    Alice->>Bob: Hello
    Bob-->>Alice: Hi

Loop block

Try in Editor

sequenceDiagram
    loop Every minute
        Alice->>Bob: Ping
    end

Alternative flows

Try in Editor

sequenceDiagram
    alt Success
        A->>B: 200 OK
    else Error
        A->>B: 500 Error
    end

Activation boxes

Try in Editor

sequenceDiagram
    Alice->>+Bob: Request
    Bob-->>-Alice: Response

Class Diagram Syntax

Model object-oriented systems with classes, attributes, and relationships. Essential for software architecture planning.

Class with members

Try in Editor

classDiagram
    class Animal {
        +String name
        +makeSound()
    }

Inheritance relationships

Try in Editor

classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +String name

Cardinality notation

Try in Editor

classDiagram
    Customer "1" --> "*" Order

State Diagram Syntax

Represent state transitions in systems or applications. Great for modeling lifecycle states and workflows.

Basic state transitions

Try in Editor

stateDiagram-v2
    [*] --> Active
    Active --> [*]

Labeled transitions

Try in Editor

stateDiagram-v2
    Idle --> Running: start
    Running --> Idle: stop

Nested composite state

Try in Editor

stateDiagram-v2
    state Active {
        [*] --> Working
        Working --> Paused
    }

Gantt Chart Syntax

Plan and track project timelines with tasks and dependencies. Perfect for project management and scheduling.

Basic project schedule

Try in Editor

gantt
    title Project
    dateFormat YYYY-MM-DD
    section Phase 1
    Task A :a1, 2024-01-01, 30d
    Task B :after a1, 20d

Task status markers

Try in Editor

gantt
    Task Done :done, d1, 2024-01-01, 10d
    Task Active :active, 2024-01-11, 10d
    Task Crit :crit, 2024-01-21, 10d

ER Diagram Syntax

Design database schemas with entities and relationships. Ideal for database modeling and documentation.

Entity relationships

Try in Editor

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains

Entity with attributes

Try in Editor

erDiagram
    CUSTOMER {
        int id PK
        string name
        string email
    }

Journey Map Syntax

Map user experiences and interactions across touchpoints. Excellent for UX design and customer journey mapping.

User experience journey

Try in Editor

journey
    title User Flow
    section Login
      Visit site: 5: User
      Enter credentials: 3: User
      Dashboard: 4: User

Onboarding satisfaction

Try in Editor

journey
    title New User Onboarding
    section Sign up
      Open homepage: 5: Visitor
      Create account: 3: Visitor
      Verify email: 2: Visitor
    section First diagram
      Choose template: 4: User
      Edit code: 5: User
      Export PNG: 5: User

Multi-actor checkout

Try in Editor

journey
    title Checkout Flow
    section Browse
      Search product: 4: Customer
      View details: 5: Customer
    section Purchase
      Add to cart: 5: Customer
      Pay: 3: Customer, Stripe
      Confirm order: 5: Customer, Stripe

Git Graph Syntax

Visualize Git branching strategies and commit histories. Helpful for explaining version control workflows.

Basic branch and merge

Try in Editor

gitGraph
    commit
    branch develop
    commit
    checkout main
    merge develop

Feature branch workflow

Try in Editor

gitGraph
    commit
    branch feature
    commit
    commit
    checkout main
    merge feature
    commit

Mindmap Syntax

Organize ideas, brainstorm concepts, and create hierarchical visual structures. Perfect for planning and knowledge mapping.

Central topic with branches

Try in Editor

mindmap
  root((Central))
    Topic A
      Detail 1
      Detail 2
    Topic B
      Detail 3

Project planning mindmap

Try in Editor

mindmap
  root((Launch Plan))
    Engineering
      Backend API
      Frontend UI
      Testing
    Marketing
      Landing page
      Social media
    Operations
      Support docs
      Pricing

Node shapes and icons

Try in Editor

mindmap
  root((Mermaid))
    ::icon(fa fa-book)
    Origins
      Long history
      Popularisation
    [Square]
      (Rounded)
      ((Circle))
    {{Hexagon}}

Pie Chart Syntax

Display proportional data distributions with circular charts. Ideal for showing percentages and market share breakdowns.

Budget distribution

Try in Editor

pie title Budget
    "Engineering" : 45
    "Marketing" : 25
    "Operations" : 30

Browser market share

Try in Editor

pie showData title Browser Share 2026
    "Chrome" : 64.2
    "Safari" : 18.5
    "Edge" : 5.3
    "Firefox" : 3.1
    "Other" : 8.9

Time allocation

Try in Editor

pie title How I Spend My Day
    "Sleep" : 8
    "Work" : 9
    "Meals" : 2
    "Exercise" : 1
    "Free time" : 4

Timeline Syntax

Visualize chronological events and milestones along a time axis. Great for project histories and roadmaps.

Chronological events

Try in Editor

timeline
    title History
    2020 : Event A
    2021 : Event B
         : Event C
    2022 : Event D

Product roadmap by section

Try in Editor

timeline
    title Product Roadmap
    section 2024
      Q1 : Beta launch
      Q2 : Public release
    section 2025
      Q1 : Mobile apps
      Q2 : Enterprise plan
      Q3 : API v2
    section 2026
      Q1 : AI assistant
      Q2 : Marketplace

Personal study plan

Try in Editor

timeline
    title Mermaid Study Plan
    Week 1 : Read syntax docs
           : Try flowcharts
    Week 2 : Sequence diagrams
           : Class diagrams
    Week 3 : Gantt and timeline
    Week 4 : Build a real project

Kanban Syntax

Organize tasks into columns representing workflow stages. Perfect for agile project management and task tracking.

Task board columns

Try in Editor

kanban
  Todo
    Task 1
    Task 2
  In Progress
    Task 3
  Done
    Task 4

Sprint board with metadata

Try in Editor

kanban
  Backlog
    [Auth flow]@{ assigned: 'alice', priority: 'High' }
    [Onboarding tour]@{ assigned: 'bob', priority: 'Low' }
  In Progress
    [Payments]@{ assigned: 'carol', priority: 'High' }
  Review
    [Settings page]@{ assigned: 'dan', priority: 'Medium' }
  Done
    [Landing redesign]@{ assigned: 'erin', priority: 'High' }

Bug triage board

Try in Editor

kanban
  Reported
    Login 500 error
    Slow PDF export
  Triaged
    Mobile menu glitch
  Fixing
    Dark mode contrast
  Verified
    Empty state typo

Quadrant Chart Syntax

Plot items on a two-axis grid to compare and prioritize. Ideal for feature prioritization and strategic analysis.

Priority matrix

Try in Editor

quadrantChart
    title Priority Matrix
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
    quadrant-1 Plan
    quadrant-2 Do First
    quadrant-3 Delegate
    quadrant-4 Eliminate
    Item A: [0.3, 0.8]
    Item B: [0.7, 0.2]

Reach vs engagement

Try in Editor

quadrantChart
    title Reach and Engagement
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 Stars
    quadrant-2 Hidden Gems
    quadrant-3 Filler
    quadrant-4 Volume Plays
    Campaign A: [0.7, 0.8]
    Campaign B: [0.3, 0.7]
    Campaign C: [0.2, 0.2]
    Campaign D: [0.8, 0.3]

Styled quadrant chart

Try in Editor

quadrantChart
    title Tech Choices
    x-axis Hard --> Easy
    y-axis Slow --> Fast
    quadrant-1 Adopt
    quadrant-2 Trial
    quadrant-3 Hold
    quadrant-4 Assess
    Vue: [0.8, 0.7] radius: 12, color: #41b883
    React: [0.7, 0.7] radius: 12, color: #61dafb
    Svelte: [0.6, 0.85] radius: 10, color: #ff3e00

Sankey Diagram Syntax

Visualize flow quantities between nodes with proportional arrows. Perfect for energy flows, budget allocation, and conversion funnels.

Flow quantities between nodes

Try in Editor

sankey-beta

Source,Target,Value
A,X,5
A,Y,3
B,X,2
B,Y,8

Marketing funnel breakdown

Try in Editor

sankey-beta

Visitors,Signups,1200
Visitors,Bounce,3800
Signups,Trial,800
Signups,Free Plan,400
Trial,Paid,250
Trial,Churn,550

Energy flow diagram

Try in Editor

sankey-beta

Solar,Grid,40
Wind,Grid,30
Coal,Grid,80
Grid,Residential,50
Grid,Industrial,80
Grid,Losses,20

XY Chart Syntax

Create bar charts and line charts with customizable axes. Ideal for data visualization and trend analysis.

Bar and line chart

Try in Editor

xychart-beta
    title "Sales"
    x-axis [Jan, Feb, Mar, Apr]
    y-axis "Revenue" 0 --> 100
    bar [30, 50, 70, 90]
    line [30, 50, 70, 90]

Quarterly bar chart

Try in Editor

xychart-beta
    title "Quarterly Revenue (USD k)"
    x-axis ["Q1", "Q2", "Q3", "Q4"]
    y-axis "Revenue" 0 --> 250
    bar [120, 145, 180, 220]

Multi-line growth comparison

Try in Editor

xychart-beta
    title "Active Users"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Users (k)" 0 --> 50
    line [10, 14, 18, 25, 33, 42]
    line [8, 11, 15, 20, 24, 28]

Horizontal bar chart

Try in Editor

xychart-beta horizontal
    title "Programming Language Popularity"
    x-axis "Share (%)" 0 --> 30
    y-axis [JavaScript, Python, Java, C#, Go]
    bar [25, 22, 14, 8, 5]

Block Diagram Syntax

Build structured layouts with blocks arranged in columns and rows. Great for system architecture and component overviews.

Columnar block layout

Try in Editor

block-beta
columns 3
  a["A"]:3
  b["B"] c["C"] d["D"]

Block shapes and arrows

Try in Editor

block-beta
columns 4
  a["Input"] b("Process") c{{"Decision"}} d[("Storage")]
  a --> b
  b --> c
  c --> d

System architecture blocks

Try in Editor

block-beta
columns 3
  Web["Web App"]:3
  space:3
  API["REST API"] Auth["Auth Service"] DB[("Postgres")]
  Web --> API
  API --> Auth
  API --> DB

Architecture Diagram Syntax

Design cloud and system architecture with service icons and connections. Perfect for infrastructure documentation.

Cloud service topology

Try in Editor

architecture-beta
    group api(cloud)[API]
    service web(internet)[Web] in api
    service db(database)[DB]
    web:R --> L:db

Three-tier web app

Try in Editor

architecture-beta
    group public(cloud)[Public Network]
    group private(cloud)[Private VPC]

    service cdn(internet)[CDN] in public
    service lb(server)[Load Balancer] in public
    service web(server)[Web Tier] in private
    service api(server)[API Tier] in private
    service db(database)[Postgres] in private
    service cache(disk)[Redis] in private

    cdn:R --> L:lb
    lb:R --> L:web
    web:R --> L:api
    api:R --> L:db
    api:B --> T:cache

Event-driven microservices

Try in Editor

architecture-beta
    service gw(internet)[API Gateway]
    service queue(server)[Event Bus]
    service orders(server)[Orders]
    service billing(server)[Billing]
    service notify(server)[Notifications]
    service db(database)[Shared DB]

    gw:R --> L:orders
    orders:R --> L:queue
    queue:T --> B:billing
    queue:B --> T:notify
    orders:B --> T:db

Packet Diagram Syntax

Visualize network protocol packet structures with bit-level field layouts. Essential for network protocol documentation.

Network packet field layout

Try in Editor

packet-beta
  0-15: "Source Port"
  16-31: "Dest Port"
  32-63: "Sequence Number"

TCP header layout

Try in Editor

packet-beta
title TCP Header
  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"
  128-143: "Checksum"
  144-159: "Urgent Pointer"

IPv4 header layout

Try in Editor

packet-beta
title IPv4 Header
  0-3: "Version"
  4-7: "IHL"
  8-15: "Type of Service"
  16-31: "Total Length"
  32-47: "Identification"
  48-50: "Flags"
  51-63: "Fragment Offset"
  64-71: "TTL"
  72-79: "Protocol"
  80-95: "Header Checksum"
  96-127: "Source IP Address"
  128-159: "Destination IP Address"

Try in Editor