Mermaid with Native Markdown Syntax

✨ Simple Implementation: No HTML tags needed! Just use markdown code blocks.

🚀 Quick Start

Step 1: Write Markdown Code Blocks

Simply use triple backticks with mermaid as the language:

```mermaid
graph TD
    A[Start] --> B[End]
```

Step 2: That’s It!

No front matter needed, no HTML <div> tags, just pure markdown.

📊 Examples

Example 1: Basic Flowchart

```mermaid
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
```

Result:

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]

Example 2: Sequence Diagram

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```

Result:

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

Example 3: Class Diagram

```mermaid
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
```

Result:

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }

Example 4: State Diagram

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

Result:

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

Example 5: Gantt Chart

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2025-01-01, 30d
    Another task     :after a1  , 20d
```

Result:

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2025-01-01, 30d
    Another task     :after a1  , 20d

Example 6: Pie Chart

```mermaid
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```

Result:

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

🎯 Benefits

✅ Simpler Syntax

• Before: <div class="mermaid">graph TD...</div> + mermaid: true in front matter
• After: Just ` mermaid ... ` in markdown

✅ Standard Markdown

• Native markdown code block syntax
• Compatible with other markdown processors
• GitHub-style fenced code blocks

✅ No Configuration Needed

• No front matter variables required
• No conditional includes
• Just write and it works

✅ Cleaner Content

• Pure markdown syntax
• No HTML mixed in
• Easier to read and edit

📚 All Supported Diagram Types

🔧 Configuration

The plugin is configured in _config.yml:

plugins:
  - jekyll-mermaid

mermaid:
  src: 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js'

That’s all the configuration needed!

📝 Usage Summary

In Your Markdown Files

Just use standard markdown code blocks:

```mermaid
graph LR
    A --> B --> C
```

No Front Matter Needed

Unlike the previous implementation, you don’t need:

---
mermaid: true  # ← NOT NEEDED ANYMORE
---

No HTML Tags Needed

Unlike the previous implementation, you don’t need:

<div class="mermaid">  <!-- ← NOT NEEDED ANYMORE -->
graph LR
    A --> B
</div>

🎓 Quick Reference

Flowchart Directions

TD or TB - Top to bottom
BT - Bottom to top
LR - Left to right
RL - Right to left

Node Shapes

[Rectangle]
(Rounded)
{Diamond}
((Circle))
>Flag]

Arrow Types

-->  Solid arrow
-.-> Dotted arrow
==>  Thick arrow
--   Line without arrow

🔗 Resources

• Jekyll-Mermaid: GitHub Repository
• Mermaid Docs: Official Documentation
• Live Editor: Test Your Diagrams
• Syntax Guide: Complete Reference

✨ Advantages of This Approach

1. Native Markdown - Standard fenced code blocks
2. Simpler - No HTML, no front matter variables
3. Portable - Works with other markdown processors
4. Cleaner - Easier to read and maintain
5. Automatic - Plugin handles everything
6. GitHub-Style - Same syntax as GitHub markdown

Happy Diagramming! 📊✨

Using jekyll-mermaid plugin for automatic diagram generation from native markdown.