Mermaid Diagrams Demo

3 min read 568 words
mermaid diagrams documentation visualization

A comprehensive demonstration of Mermaid diagram support including flowcharts, sequence diagrams, class diagrams, and more.

Table of Contents

This post demonstrates the various diagram types supported by Mermaid.js. Diagrams are lazy-loaded for better performance and automatically adapt to light and dark modes.

Flowcharts

Flowcharts are great for visualizing processes and decision trees.

Basic Flowchart

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

Left-to-Right Flowchart

graph LR
    A[Input] --> B[Process]
    B --> C[Output]
    B --> D[Logs]

Flowchart with Subgraphs

graph TB
    subgraph Frontend
        A[React App] --> B[Components]
        B --> C[State Management]
    end
    subgraph Backend
        D[API Server] --> E[Database]
        D --> F[Cache]
    end
    A --> D

Sequence Diagrams

Sequence diagrams show interactions between components over time.

API Request Flow

sequenceDiagram
    participant User
    participant Frontend
    participant API
    participant Database

    User->>Frontend: Click submit
    Frontend->>API: POST /data
    API->>Database: INSERT query
    Database-->>API: Success
    API-->>Frontend: 200 OK
    Frontend-->>User: Show success

Authentication Flow

sequenceDiagram
    participant Client
    participant Auth Server
    participant Resource Server

    Client->>Auth Server: Request token
    Auth Server-->>Client: Access token
    Client->>Resource Server: Request with token
    Resource Server->>Auth Server: Validate token
    Auth Server-->>Resource Server: Token valid
    Resource Server-->>Client: Protected resource

Class Diagrams

Class diagrams are useful for showing object-oriented designs.

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +String breed
        +bark()
        +fetch()
    }
    class Cat {
        +String color
        +meow()
        +scratch()
    }
    Animal <|-- Dog
    Animal <|-- Cat

State Diagrams

State diagrams show the different states of a system.

stateDiagram-v2
    [*] --> Draft
    Draft --> Review: Submit
    Review --> Draft: Request Changes
    Review --> Approved: Approve
    Approved --> Published: Publish
    Published --> [*]

Entity Relationship Diagrams

ER diagrams show database relationships.

erDiagram
    USER ||--o{ POST : writes
    USER ||--o{ COMMENT : creates
    POST ||--o{ COMMENT : has
    POST ||--o{ TAG : contains

    USER {
        int id PK
        string username
        string email
        datetime created_at
    }
    POST {
        int id PK
        int user_id FK
        string title
        text content
        datetime published_at
    }
    COMMENT {
        int id PK
        int user_id FK
        int post_id FK
        text content
    }
    TAG {
        int id PK
        string name
    }

Gantt Charts

Gantt charts are perfect for project planning.

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Planning
    Requirements     :a1, 2024-01-01, 7d
    Design           :a2, after a1, 5d
    section Development
    Backend API      :b1, after a2, 14d
    Frontend UI      :b2, after a2, 14d
    section Testing
    Integration Tests:c1, after b1, 7d
    User Testing     :c2, after c1, 5d

Pie Charts

Pie charts visualize proportional data.

pie title Programming Languages Used
    "Python" : 35
    "JavaScript" : 30
    "Go" : 20
    "Rust" : 15

Git Graphs

Git graphs show branching and merging.

gitGraph
    commit id: "Initial"
    branch develop
    commit id: "Feature A"
    commit id: "Feature B"
    checkout main
    commit id: "Hotfix"
    merge develop
    commit id: "Release"

Journey Diagrams

User journey diagrams map user experiences.

journey
    title User Onboarding Journey
    section Discovery
      Find website: 5: User
      Read landing page: 4: User
    section Sign Up
      Create account: 3: User
      Verify email: 2: User
    section First Use
      Complete tutorial: 4: User
      Create first project: 5: User

Conclusion

Mermaid diagrams are a powerful way to add visual documentation to your technical writing. They’re written in plain text, version-controlled with your code, and render beautifully in both light and dark modes.

Key features of our Mermaid implementation:

  • Lazy loading: Diagrams only render when they come into view
  • Dark mode support: Diagrams automatically adapt to the current theme
  • Error handling: Invalid diagrams show helpful error messages
  • Responsive: Diagrams scale appropriately on all screen sizes