Mermaid Diagrams
Enable Mermaid diagram rendering on any page by adding mermaid: true to the front matter:
---
layout: default
title: My Page
mermaid: true
---
Mermaid is loaded only on pages that opt in. Write diagrams using standard fenced code blocks with the mermaid language identifier.
Flowchart
```mermaid
flowchart LR
A[Start] --> B{Is it working?}
B -- Yes --> C[Great!]
B -- No --> D[Debug]
D --> B
```
Rendered:
flowchart LR
A[Start] --> B{Is it working?}
B -- Yes --> C[Great!]
B -- No --> D[Debug]
D --> B
Sequence diagram
```mermaid
sequenceDiagram
participant Browser
participant Server
Browser->>Server: GET /page
Server-->>Browser: 200 OK + HTML
Browser->>Server: GET /assets/style.css
Server-->>Browser: 200 OK + CSS
```
Rendered:
sequenceDiagram
participant Browser
participant Server
Browser->>Server: GET /page
Server-->>Browser: 200 OK + HTML
Browser->>Server: GET /assets/style.css
Server-->>Browser: 200 OK + CSS
Class diagram
classDiagram
class Animal {
+String name
+makeSound() void
}
class Dog {
+fetch() void
}
class Cat {
+purr() void
}
Animal <|-- Dog
Animal <|-- Cat
Pie chart
pie title Browser Share
"Chrome" : 65
"Firefox" : 15
"Safari" : 12
"Other" : 8