Mermaid Diagrams Guide

This Jekyll site now supports Mermaid diagrams, which allow you to create beautiful flowcharts, sequence diagrams, Gantt charts, and more using simple text syntax.

How to Use Mermaid Diagrams

Method 1: Mermaid Code Blocks

Use triple backticks with mermaid as the language:

```mermaid
graph TD;
    A[Start] --> B[Process];
    B --> C{Decision};
    C -->|Yes| D[Action 1];
    C -->|No| E[Action 2];
    D --> F[End];
    E --> F;
```

Method 2: HTML Div with Class

Use a div with the mermaid class:

<div class="mermaid">
graph TD;
    A[Start] --> B[Process];
    B --> C{Decision};
    C -->|Yes| D[Action 1];
    C -->|No| E[Action 2];
    D --> F[End];
    E --> F;
</div>

Supported Diagram Types

1. Flowcharts

graph TD;
    A[Start] --> B[Process];
    B --> C{Decision};
    C -->|Yes| D[Action 1];
    C -->|No| E[Action 2];
    D --> F[End];
    E --> F;

2. Sequence Diagrams

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob, how are you?
    B-->>A: Great!
    A-)B: See you later!

3. Gantt Charts

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

4. Class Diagrams

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

5. State Diagrams

stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

6. Entity Relationship Diagrams

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

7. User Journey

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

8. Git Graph

gitgraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit

Features

• Responsive Design: Diagrams automatically scale to fit different screen sizes
• Theme Support: Automatically adapts to light/dark themes
• Error Handling: Graceful error handling with informative error messages
• Print Support: Diagrams render correctly when printing pages
• Accessibility: Diagrams are accessible and screen-reader friendly

Tips

1. Keep it Simple: Start with simple diagrams and gradually add complexity
2. Use Meaningful Labels: Make your diagram labels clear and descriptive
3. Test Different Sizes: Check how your diagrams look on different screen sizes
4. Syntax Validation: Use the Mermaid Live Editor to test your diagrams

Troubleshooting

If diagrams don’t render:

1. Check the syntax using the Mermaid Live Editor
2. Ensure you’re using the correct markdown syntax
3. Check the browser console for error messages
4. Make sure JavaScript is enabled in your browser

Advanced Configuration

The Mermaid configuration can be customized by editing the assets/js/mermaid-enhanced.js file. You can modify:

• Theme colors
• Font sizes
• Diagram-specific settings
• Security settings

For more information, visit the official Mermaid documentation.