Mermaid

The Mermaid component renders diagrams from text using the Mermaid.js library.

Usage

1<Mermaid
2  chart={`
3    graph TD
4      A[Start] --> B{Decision}
5      B -->|Yes| C[Action 1]
6      B -->|No| D[Action 2]
7  `}
8  caption="Decision flowchart"
9/>

Live Examples

Flowchart

Sequence Diagram

Class Diagram

Props

Diagram Types

Mermaid supports many diagram types:

• Flowcharts - graph TD or graph LR
• Sequence diagrams - sequenceDiagram
• Class diagrams - classDiagram
• State diagrams - stateDiagram-v2
• Entity Relationship - erDiagram
• Gantt charts - gantt
• Pie charts - pie

Theme Support

Resources

• Mermaid Documentation
• Live Editor