Mermaid Diagram Examples

This page showcases various types of Mermaid diagrams you can use in your content.

Flowcharts

Basic Flowchart

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> E[Fix Issue]
    E --> B
    C --> F[End]

Development Workflow

graph LR
    A[Write Code] --> B[Test]
    B --> C{Tests Pass?}
    C -->|Yes| D[Deploy]
    C -->|No| E[Fix Bugs]
    E --> B
    D --> F[Monitor]
    F --> G{Issues?}
    G -->|Yes| H[Rollback]
    G -->|No| I[Success]
    H --> E

Sequence Diagrams

API Request Flow

sequenceDiagram
    participant C as Client
    participant S as Server
    participant DB as Database

    C->>S: HTTP Request
    S->>DB: Query Data
    DB-->>S: Return Results
    S-->>C: HTTP Response

Authentication Flow

sequenceDiagram
    participant U as User
    participant A as App
    participant Auth as Auth Server
    participant API as API Server

    U->>A: Login Request
    A->>Auth: Authenticate
    Auth-->>A: JWT Token
    A->>API: API Request + Token
    API-->>A: Protected Data
    A-->>U: Display Data

Class Diagrams

Simple Class Structure

classDiagram
    class Animal {
        -String name
        -int age
        +getName() String
        +setAge(int age)
        +makeSound() void
    }

    class Dog {
        -String breed
        +bark() void
        +fetch() void
    }

    class Cat {
        -boolean indoor
        +meow() void
        +purr() void
    }

    Animal <|-- Dog
    Animal <|-- Cat

State Diagrams

User Session States

stateDiagram-v2
    [*] --> Anonymous
    Anonymous --> LoggingIn: login()
    LoggingIn --> Authenticated: success
    LoggingIn --> Anonymous: failure
    Authenticated --> LoggingOut: logout()
    LoggingOut --> Anonymous: complete
    Authenticated --> Expired: timeout
    Expired --> Anonymous: redirect

Entity Relationship Diagrams

Simple Database Schema

erDiagram
    USER {
        int id PK
        string email UK
        string name
        datetime created_at
    }

    POST {
        int id PK
        int user_id FK
        string title
        text content
        datetime published_at
    }

    COMMENT {
        int id PK
        int post_id FK
        int user_id FK
        text content
        datetime created_at
    }

    USER ||--o{ POST : "writes"
    POST ||--o{ COMMENT : "has"
    USER ||--o{ COMMENT : "makes"

Journey Diagrams

User Onboarding Journey

journey
    title User Onboarding Journey
    section Discovery
      Visit website: 5: User
      Read about features: 4: User
      Compare plans: 3: User
    section Registration
      Sign up form: 3: User
      Email verification: 2: User
      Profile setup: 4: User
    section First Use
      Tutorial: 5: User
      Create first project: 5: User
      Invite team: 3: User

Pie Charts

Technology Usage

pie title Technology Stack Usage
    "JavaScript" : 40
    "Python" : 25
    "TypeScript" : 20
    "Ruby" : 10
    "Other" : 5

Gantt Charts

Project Timeline

gantt
    title Project Development Timeline
    dateFormat  YYYY-MM-DD
    section Planning
    Requirements    :2025-01-01, 2025-01-15
    Design         :2025-01-10, 2025-01-25
    section Development
    Backend        :2025-01-20, 2025-03-01
    Frontend       :2025-02-01, 2025-03-15
    Integration    :2025-03-01, 2025-03-20
    section Testing
    Unit Tests     :2025-02-15, 2025-03-25
    Integration Tests :2025-03-15, 2025-04-01
    User Testing   :2025-03-25, 2025-04-10

Mind Maps

Project Structure

mindmap
  root((Jekyll Site))
    Content
      Posts
      Pages
      Collections
    Layout
      Templates
      Includes
      Assets
    Configuration
      Config YAML
      Gemfile
      Plugins
    Development
      Local Server
      Build Process
      Testing

Tips for Creating Effective Diagrams

1. Keep it simple: Focus on the key relationships and flows
2. Use consistent naming: Stick to a naming convention throughout
3. Add descriptions: Use meaningful labels and titles
4. Consider your audience: Adjust complexity based on who will read it
5. Test syntax: Use Mermaid Live Editor to validate

Common Use Cases

• Documentation: System architecture, data flows
• Planning: Project timelines, user journeys
• Education: Process explanations, concept relationships
• Troubleshooting: Decision trees, diagnostic flows
• Presentations: Visual storytelling, process overview

---

For more diagram types and advanced syntax, visit the official Mermaid documentation.