Skip to main content

Mermaid Examples

Mermaid is a simple language for creating charts and diagrams. This page demonstrates various types of Mermaid diagrams that can be used in our documentation.

Layout Options and Styling​

Mermaid supports different layout engines and visual styles:

Layout Options​

  • Dagre (default): Traditional hierarchical layout algorithm
  • ELK: Eclipse Layout Kernel for more complex layouts

Visual Styles​

  • Classic (default): Clean, professional appearance
  • Hand-drawn: Sketch-like appearance for a more casual look

Best Practices​

When to Use Different Layouts​

  • Dagre: Good for simple hierarchical diagrams, flowcharts, and organization charts
  • ELK: Better for complex network diagrams, system architectures, and when you need more sophisticated layout algorithms

When to Use Different Styles​

  • Classic: Use for formal documentation, technical specifications, and professional presentations
  • Hand-drawn: Use for brainstorming sessions, informal documentation, creative workshops, and user-friendly guides

Use these configuration options in your diagram directives or via the %%{init: {...}}%% syntax.

Flowchart Example (Classic Style)​

📋 Copy Code
```mermaid
%%{init: {"flowchart": {"defaultRenderer": "dagre"}, "theme": "default"}}%%
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[End]
    
    %% Classic styling
    classDef startEnd fill:#e1f5fe,stroke:#01579b,stroke-width:2px
    classDef decision fill:#fff3e0,stroke:#e65100,stroke-width:2px
    classDef process fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px
    
    class A,E startEnd
    class B decision
    class C,D process
```

Flowchart Example (Hand-drawn Style)​

📋 Copy Code
```mermaid
%%{init: {"flowchart": {"defaultRenderer": "dagre"}, "theme": "base", "themeVariables": {"primaryColor": "#ff6b6b", "primaryTextColor": "#2c3e50", "primaryBorderColor": "#e74c3c", "lineColor": "#34495e", "fontFamily": "Comic Sans MS, cursive"}}}%%
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[End]
    
    %% Hand-drawn styling
    classDef handDrawn fill:#fff2cc,stroke:#d6b656,stroke-width:3px,stroke-dasharray: 5 5
    class A,B,C,D,E handDrawn
```

Sequence Diagram​

📋 Copy Code
```mermaid
sequenceDiagram
    participant Client
    participant API
    participant Database
    
    Client->>API: Request data
    API->>Database: Query
    Database-->>API: Results
    API-->>Client: Response
```

Architecture Diagram (ELK Layout)​

📋 Copy Code
```mermaid
%%{init: {"flowchart": {"defaultRenderer": "elk"}, "theme": "neutral"}}%%
graph LR
    subgraph "Frontend Layer"
        A[Next.js App]
        B[React Components]
        C[Tailwind CSS]
        G[State Management]
    end
    
    subgraph "API Layer"
        D[API Gateway]
        H[Authentication]
        I[Rate Limiting]
    end
    
    subgraph "Backend Services"
        E[User Service]
        J[Order Service]
        K[Payment Service]
    end
    
    subgraph "Data Layer"
        F[Primary Database]
        L[Cache Layer]
        M[Analytics DB]
    end
    
    A --> D
    B --> A
    C --> A
    G --> A
    D --> H
    D --> I
    H --> E
    H --> J
    H --> K
    E --> F
    J --> F
    K --> F
    E --> L
    J --> L
    K --> M
    
    %% ELK layout styling
    classDef frontend fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
    classDef api fill:#fff3e0,stroke:#f57c00,stroke-width:2px
    classDef backend fill:#e8f5e8,stroke:#388e3c,stroke-width:2px
    classDef data fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
    
    class A,B,C,G frontend
    class D,H,I api
    class E,J,K backend
    class F,L,M data
```

Layout Comparison: Dagre vs ELK​

Dagre Layout (Default)​

📋 Copy Code
```mermaid
%%{init: {"flowchart": {"defaultRenderer": "dagre"}}}%%
graph TB
    A[Client Request] --> B[Load Balancer]
    B --> C[Web Server 1]
    B --> D[Web Server 2]
    C --> E[Database]
    D --> E
    E --> F[Response]
```

ELK Layout​

📋 Copy Code
```mermaid
%%{init: {"flowchart": {"defaultRenderer": "elk"}}}%%
graph TB
    A[Client Request] --> B[Load Balancer]
    B --> C[Web Server 1]
    B --> D[Web Server 2]
    C --> E[Database]
    D --> E
    E --> F[Response]
```

Git Flow Diagram (Hand-drawn Style)​

📋 Copy Code
```mermaid
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#dce775", "primaryTextColor": "#33691e", "primaryBorderColor": "#689f38", "lineColor": "#8bc34a", "fontFamily": "Comic Sans MS, cursive"}}}%%
graph TD
    A[Initial Commit] --> B[Create develop branch]
    B --> C[Feature A commit]
    C --> D[Feature B commit]
    D --> E[Merge to main]
    E --> F[Release v1.0]
    
    subgraph "main branch"
        A
        E
        F
    end
    
    subgraph "develop branch"
        C
        D
    end
    
    %% Hand-drawn styling
    classDef mainBranch fill:#ffcdd2,stroke:#d32f2f,stroke-width:3px,stroke-dasharray: 3 3
    classDef developBranch fill:#c8e6c9,stroke:#388e3c,stroke-width:3px,stroke-dasharray: 3 3
    classDef commit fill:#fff3e0,stroke:#f57c00,stroke-width:2px,stroke-dasharray: 2 2
    
    class A,E,F mainBranch
    class C,D developBranch
```

Class Diagram​

📋 Copy Code
```mermaid
classDiagram
    class User {
        +String name
        +String email
        +authenticate()
        +logout()
    }
    
    class Admin {
        +String permissions
        +manageUsers()
    }
    
    User <|-- Admin
```

State Diagram​

📋 Copy Code
```mermaid
stateDiagram-v2
    [*] --> Idle
    Idle --> Loading : Start Request
    Loading --> Success : Data Loaded
    Loading --> Error : Request Failed
    Success --> Idle : Reset
    Error --> Idle : Retry
    Error --> [*] : Give Up
```

Technology Usage Chart​

📋 Copy Code
```mermaid
%%{init: {'theme':'base', 'themeVariables': { 'primaryColor': '#00AA44', 'primaryTextColor': '#000000', 'primaryBorderColor': '#00AA44', 'lineColor': '#000000', 'background': '#ffffff', 'mainBkg': '#ffffff', 'xyChart': {'titleColor': '#000000', 'xAxisTitleColor': '#000000', 'yAxisTitleColor': '#000000', 'xAxisLabelColor': '#000000', 'yAxisLabelColor': '#000000', 'plotColorPalette': '#00AA44'}}}}%%
xychart-beta
    title "Technology Stack Distribution"
    x-axis ["Next.js", "React", "Tailwind", "TypeScript", "shadcn/ui"]
    y-axis "Usage Percentage" 0 --> 40
    bar [35, 25, 20, 15, 5]
```

Pie Chart - Technology Usage​

📋 Copy Code
```mermaid
%%{init: {'theme':'base', 'themeVariables': { 'pie1': '#4f46e5', 'pie2': '#06b6d4', 'pie3': '#10b981', 'pie4': '#f59e0b', 'pie5': '#ef4444', 'pieTitleTextSize': '20px'}}}%%
pie title Technology Stack Distribution
    "Next.js" : 35
    "React Components" : 25
    "Tailwind CSS" : 20
    "TypeScript" : 15
    "shadcn/ui" : 5
```

Entity Relationship Diagram​

📋 Copy Code
```mermaid
erDiagram
    USER {
        int user_id PK
        string email
        string name
        datetime created_at
    }
    
    PROJECT {
        int project_id PK
        string title
        string description
        int owner_id FK
        datetime created_at
    }
    
    TASK {
        int task_id PK
        string title
        string status
        int project_id FK
        int assignee_id FK
    }
    
    USER ||--o{ PROJECT : owns
    USER ||--o{ TASK : assigned
    PROJECT ||--o{ TASK : contains
```

Journey Map - User Onboarding​

📋 Copy Code
```mermaid
graph LR
    A[Getting Started] --> B[Documentation: 😊]
    A --> C[Dependencies: 😐]
    A --> D[Environment: 😞]
    
    E[First Project] --> F[New Project: 😊]
    E --> G[Configuration: 😐]
    E --> H[Dev Server: 😊]
    
    I[Advanced Features] --> J[Components: 😊]
    I --> K[Styling: 😊]
    I --> L[Deployment: 😊]
    
    B --> E
    C --> E
    D --> E
    F --> I
    G --> I
    H --> I
    
    classDef happy fill:#c8e6c9
    classDef neutral fill:#fff3e0
    classDef sad fill:#ffcdd2
    
    class B,F,H,J,K,L happy
    class C,G neutral
    class D sad
```

Quadrant Chart - Technology Assessment​

📋 Copy Code
```mermaid
quadrantChart
    title Technology Evaluation Matrix
    x-axis Low Complexity --> High Complexity
    y-axis Low Impact --> High Impact
    quadrant-1 Avoid
    quadrant-2 Consider
    quadrant-3 Monitor
    quadrant-4 Adopt
    Next.js: [0.8, 0.9]
    React: [0.7, 0.8]
    TypeScript: [0.6, 0.9]
    Tailwind: [0.4, 0.8]
    GraphQL: [0.9, 0.6]
    Docker: [0.7, 0.5]
```

Sankey Diagram - Data Flow​


📋 Copy Code
```mermaid
sankey-beta
    Users,Frontend,100
    Frontend,API Gateway,90
    Frontend,CDN,10
    API Gateway,Auth Service,30
    API Gateway,User Service,30
    API Gateway,Data Service,30
    Auth Service,Database,25
    User Service,Database,25
    Data Service,Database,25
    CDN,Static Assets,10
```

Timeline - Project Milestones​

📋 Copy Code
```mermaid
timeline
    title Development Timeline
    
    section Planning
        Q1 2024 : Requirements Gathering
               : Architecture Design
        
    section Development
        Q2 2024 : Core Features
               : UI Components
               
        Q3 2024 : Integration
               : Testing
               
    section Launch
        Q4 2024 : Deployment
               : Documentation
               : Training
```

Configuration Examples​

Layout Engine Configuration​

📋 Copy Code
```mermaid
%%{init: {"flowchart": {"defaultRenderer": "dagre"}}}%%
graph TD
    A --> B --> C
```

Styling Configuration​

Classic Professional Look​

📋 Copy Code
```mermaid
%%{init: {"theme": "neutral", "themeVariables": {"primaryColor": "#4f81bd", "primaryTextColor": "#ffffff"}}}%%
graph LR
    A[Professional] --> B[Clean] --> C[Business Ready]
```

Hand-drawn Casual Look​

📋 Copy Code
```mermaid
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#ff6b6b", "lineColor": "#4ecdc4", "fontFamily": "Comic Sans MS, cursive"}}}%%
graph LR
    A[Casual] --> B[Friendly] --> C[Approachable]
    
    classDef handDrawn stroke-width:3px,stroke-dasharray: 4 4
    class A,B,C handDrawn
```

Mindmap - Next.js Ecosystem​


📋 Copy Code
```mermaid
graph TD
    A[Next.js Ecosystem] --> B[Frontend]
    A --> C[Backend]
    A --> D[Deployment]
    A --> E[Development Tools]
    
    B --> F[React]
    B --> G[TypeScript]
    B --> H[Tailwind CSS]
    B --> I[shadcn/ui]
    
    C --> J[API Routes]
    C --> K[Server Actions]
    C --> L[Middleware]
    C --> M[Authentication]
    
    D --> N[Vercel]
    D --> O[Docker]
    D --> P[CI/CD]
    D --> Q[Static Export]
    
    E --> R[ESLint]
    E --> S[Prettier]
    E --> T[Jest]
    E --> U[Storybook]
    
    classDef core fill:#e3f2fd
    classDef frontend fill:#e8f5e8
    classDef backend fill:#fff3e0
    classDef deploy fill:#fce4ec
    classDef tools fill:#f3e5f5
    
    class A core
    class B,F,G,H,I frontend
    class C,J,K,L,M backend
    class D,N,O,P,Q deploy
    class E,R,S,T,U tools
```