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

Table of Contents

  1. Flowcharts
  2. Sequence Diagrams
  3. Class Diagrams
  4. State Diagrams
  5. Entity Relationship Diagrams
  6. Journey Diagrams
  7. Pie Charts
  8. Gantt Charts
  9. Mind Maps

Overview

Mermaid is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and display diagrams. This documentation provides practical examples for different diagram types.

Flowcharts

Flowcharts are used to represent processes and workflows with decision points.

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]

```mermaid
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

```mermaid
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

Sequence diagrams show interactions between objects in a sequential manner.

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

```mermaid
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

```mermaid
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

Class diagrams represent the static structure of a system.

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

```mermaid
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

State diagrams illustrate the behavior of a system through states and transitions.

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

```mermaid
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

ER diagrams show relationships between entities in a database.

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"

```mermaid
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

Journey diagrams visualize user experiences and customer journeys.

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

```mermaid
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

Pie charts display proportional data in a circular format.

Technology Usage

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

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

Gantt Charts

Gantt charts show project timelines and task dependencies.

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

```mermaid
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

Mind maps show hierarchical relationships and brainstorming ideas.

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

```mermaid
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

Practical Tips

For Developers

  • Use descriptive node names that clearly indicate their purpose
  • Keep diagrams focused on one main concept
  • Test diagrams in different browsers for compatibility

For Documentation Writers

  • Include titles for all diagrams
  • Add brief explanations for complex diagrams
  • Use consistent styling throughout your documentation

For Designers

  • Consider color contrast for accessibility
  • Ensure diagrams are responsive
  • Test with different screen sizes

Accessibility Considerations

  • Ensure diagrams have appropriate alt text for screen readers
  • Use sufficient color contrast for text elements
  • Provide text alternatives for complex diagrams
  • Consider keyboard navigation for interactive diagrams

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