Mermaid Diagram Block
Create diagrams using Mermaid syntax. Supports flowcharts, sequence diagrams, class diagrams, state machines, and more. Rendered directly in the viewer.
The Mermaid block renders diagrams from text-based Mermaid syntax. This allows you to create and version-control diagrams using a simple markup language that gets rendered into SVG graphics.
When to Use
Block Properties
| Property | Required | Description |
|---|---|---|
| Code | Yes | The diagram definition in Mermaid syntax |
| Caption | No | Description displayed below the diagram |
| Theme | No | Visual style: default, dark, forest, or neutral |
Theme Options
Example: Flowchart
A simple decision flow using Mermaid syntax.
Example: Sequence Diagram
Showing interactions between components.
Supported Diagram Types
| Type | Use Case |
|---|---|
| flowchart | Flowcharts with nodes and edges |
| sequenceDiagram | Interaction sequences between participants |
| classDiagram | Class relationships and hierarchies |
| stateDiagram | State machines and transitions |
| erDiagram | Entity relationships for data models |
| gantt | Project timelines and schedules |
| pie | Pie charts for data visualisation |
| gitGraph | Git branch visualisation |
Mermaid vs Full Diagram Editor
| Capability | Mermaid Block | Full Diagram Editor |
|---|---|---|
| Input Method | Text-based syntax | Visual drag-and-drop |
| Positioning | Automatic layout | Precise manual positioning |
| Icons | Limited shapes | Icon libraries from Lucide, Heroicons, Bootstrap and brand collections |
| Animation | Not supported | Step-by-step presentation |
| Styling | Theme presets only | Full colour and style control |
| Best For | Quick, simple diagrams | Complex architecture diagrams |