Mdx_(examples)Examples
Mermaid Diagrams
Create flowcharts, sequence diagrams, and other visual diagrams with Mermaid
Mermaid Diagrams
Mermaid is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
Flowchart Example
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Debug]
D --> B
C --> E[End]
Sequence Diagram
sequenceDiagram
participant User
participant API
participant Database
User->>API: Request data
API->>Database: Query
Database-->>API: Return results
API-->>User: Response
Class Diagram
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+String breed
+bark()
}
class Cat {
+String color
+meow()
}
Animal <|-- Dog
Animal <|-- Cat
State Diagram
stateDiagram-v2
[*] --> Idle
Idle --> Processing: Start
Processing --> Success: Complete
Processing --> Error: Fail
Success --> [*]
Error --> Idle: Retry
Gantt Chart
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Planning
Research :a1, 2024-01-01, 7d
Design :a2, after a1, 5d
section Development
Implementation :b1, after a2, 14d
Testing :b2, after b1, 7d
section Deployment
Deploy :c1, after b2, 2d
Git Graph
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
Features
- Automatic Rendering: Mermaid code blocks are automatically converted to diagrams
- Theme Support: Diagrams adapt to light and dark themes
- Multiple Types: Supports flowcharts, sequence diagrams, class diagrams, state diagrams, and more
- Easy Syntax: Write diagrams using simple text-based syntax
Usage
Simply use a code block with the mermaid language tag:
```mermaid
graph LR
A[Start] --> B[End]
```The diagram will be automatically rendered in your documentation.