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

  1. Use fenced code blocks (````mermaid`) instead of Liquid tags
  2. Test diagrams at Mermaid Live Editor first
  3. Keep diagrams simple for better readability
  4. 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

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