MermaidJS Diagram Examples

All examples require MermaidJS support to render properly. Use with:

• GitHub/Markdown (native support)
• Mermaid Live Editor (https://mermaid.live)
• VS Code with Mermaid extension

Flowchart

Process flow with decisions

flowchart TD
    A[Start] --> B{Input?}
    B -->|Yes| C[Process Data]
    B -->|No| D[End]
    C --> E[Save Results]
    E --> D

Sequence Diagram

User login sequence

sequenceDiagram
    participant User
    participant System
    participant Database
    
    User->>System: Enter Credentials
    System->>Database: Validate Credentials
    Database-->>System: Authentication Result
    System-->>User: Display Welcome Message

Class Diagram

Vehicle inheritance structure

classDiagram
    Vehicle <|-- Car
    Vehicle <|-- Truck
    Vehicle : +String make
    Vehicle : +startEngine()
    class Car {
        +int doors
        +openSunroof()
    }
    class Truck {
        +float payloadCapacity
        +attachTrailer()
    }

State Diagram

Light switch states

stateDiagram-v2
    [*] --> Off
    Off --> On : Switch On
    On --> Off : Switch Off
    On --> Dimmed : Dimmer
    Dimmed --> On : Full Power
    Dimmed --> Off : Switch Off

Entity Relationship Diagram

Simple database schema

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
        string name
        string email
    }
    ORDER {
        date orderDate
    }
    LINE-ITEM {
        int quantity
        float price
    }

User Journey

Online shopping experience

journey
    title Online Shopping Journey
    section Browse
      View Products: 5: User
      Filter Results: 3: User
    section Purchase
      Add to Cart: 4: User
      Checkout: 5: User
    section Post-Purchase
      Receive Confirmation: 5: System
      Track Delivery: 4: User

Gantt Chart

Project timeline

gantt
    title Project Schedule
    dateFormat  YYYY-MM-DD
    section Design
    Requirements      :done, des1, 2024-01-01, 14d
    UI Prototype      :active, des2, after des1, 10d
    section Development
    Backend Implementation  :crit, dev1, after des2, 21d
    Frontend Development    :dev2, after des2, 25d
    section Testing
    System Testing    :after dev1, 14d

Pie Chart

Market share distribution

pie
    title Browser Market Share
    "Chrome" : 65.4
    "Safari" : 19.2
    "Firefox" : 8.1
    "Edge" : 5.3
    "Other" : 2.0

Quadrant Chart

Technology assessment

quadrantChart
    title Technology Radar
    x-axis Low Adoption --> High Adoption
    y-axis Low Value --> High Value
    quadrant-1 Adopt
    quadrant-2 Trial
    quadrant-3 Assess
    quadrant-4 Hold
    
    "React": [0.8, 0.9]
    "Vue.js": [0.7, 0.6]
    "Angular": [0.5, 0.4]
    "jQuery": [0.3, 0.2]

Requirement Diagram

System requirements

requirementDiagram

    requirement test_req {
    id: 1
    text: The system shall provide user authentication.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: SIM
    }

    test_entity - satisfies -> test_req

Mind Map

mindmap
  root((MermaidJS))
    Diagram Types
      Flowchart
      Sequence
      Class
      State
    Features
      Text-based
      Interactive
      Customizable
    Integrations
      GitHub
      VS Code
      Docs

Tip: To use these diagrams:

1. Copy the code blocks
2. Paste into Markdown files with Mermaid support
3. View in supported environments
4. Modify values and structure as needed

Official Documentation | Live Editor