Mermaid Quick Start

Add beautiful diagrams to your Jekyll content using simple text syntax.

✨ Basic Usage

Simply use fenced code blocks with mermaid as the language:

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

🚀 Common Diagram Types

Flowchart

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

Sequence Diagram

```mermaid
sequenceDiagram
    Alice->>Bob: Hello!
    Bob-->>Alice: Hi there!
```

Class Diagram

```mermaid
classDiagram
    class Animal {
        +name: string
        +makeSound()
    }
```

🔧 Setup (Already Configured)

This site is already configured with Mermaid support. The configuration includes:

✅ Jekyll plugin installed (jekyll-mermaid)
✅ CDN script loaded in layouts
✅ Runtime conversion for fenced code blocks
✅ Cross-browser compatibility

📝 Best Practices

Use fenced code blocks (````mermaid`) instead of Liquid tags
Test diagrams at Mermaid Live Editor first
Keep diagrams simple for better readability
Use descriptive labels for accessibility

🐛 Quick Troubleshooting

Diagram shows as code?

Ensure you’re using ````mermaid` fenced blocks
Check browser console for JavaScript errors

Syntax error message?

Validate syntax at mermaid.live
Avoid special characters that might be HTML-encoded

📚 More Information

Full Setup Guide: Mermaid Configuration Guide
Official Docs: mermaid.js.org
Live Editor: mermaid.live

For detailed configuration, troubleshooting, and advanced usage, see the complete configuration guide.