Mermaid Diagrams Example
• 2 min read
Mermaid Diagrams Example
This page demonstrates how to use Mermaid diagrams directly in your MDX files using fenced code blocks.
Flowchart Example
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Debug]
C --> E[Enjoy]
D --> B
Sequence Diagram Example
sequenceDiagram
participant User
participant System
participant Database
User->>System: Request data
System->>Database: Query data
Database-->>System: Return results
System-->>User: Display data
Note over User,System: User interaction
Class Diagram Example
classDiagram
class Animal {
+name: string
+age: int
+makeSound()
}
class Dog {
+breed: string
+bark()
}
class Cat {
+color: string
+meow()
}
Animal <|-- Dog
Animal <|-- Cat
Gantt Chart Example
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Planning
Requirements :a1, 2023-01-01, 30d
Design :a2, after a1, 20d
section Development
Implementation :b1, after a2, 60d
Testing :b2, after b1, 15d
section Deployment
Release :c1, after b2, 5d
Training :c2, after c1, 10d
Timeline Diagram Example
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Git Graph Example
gitGraph
commit id: "1"
commit id: "2"
branch nice_feature
checkout nice_feature
commit id: "3"
checkout main
commit id: "4"
checkout nice_feature
branch very_nice_feature
checkout very_nice_feature
commit id: "5"
checkout main
commit id: "6"
checkout nice_feature
commit id: "7"
checkout main
merge nice_feature id: "customID" tag: "customTag" type: REVERSE
checkout very_nice_feature
commit id: "8"
checkout main
commit id: "9"
Source : Mermaid Git Graph
How It Works
Mermaid diagrams are now rendered directly from MDX code blocks with the mermaid language tag. This approach:
- Makes your content more maintainable - no need to use custom components
- Ensures compatibility with standard Markdown tooling and preview systems
- Automatically renders with the appropriate theme based on your site’s light/dark mode
To add a diagram, simply use a div with the mermaid class:
<div class="mermaid">
graph TD
A[Start] --> B[End]
</div>