Mermaid Diagrams

Some ideas are easier to draw than to describe. A flowchart or a sequence diagram can show a process at a glance where a paragraph would take several sentences to say the same thing,and unlike a pasted image, a text-based diagram stays part of the document, versionable and editable like everything else you write. The editor supports Mermaid, a diagramming and charting tool that lets you create diagrams using text and code. You can embed flowcharts, sequence diagrams, class diagrams, and more directly in your documents.

How to create a Mermaid diagram

Use a fenced code block with the language set to mermaid. Write your diagram definition inside the code block, and it will render as a diagram in the preview.

```mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
```

Supported diagram types

• Flowcharts - use graph TD (top-down) or graph LR (left-right)
• Sequence diagrams - use sequenceDiagram
• Class diagrams - use classDiagram
• State diagrams - use stateDiagram-v2
• Gantt charts - use gantt
• Pie charts - use pie

Example: Sequence diagram

```mermaid
sequenceDiagram
    participant User
    participant API
    participant Database
    User->>API: Send request
    API->>Database: Query data
    Database-->>API: Return results
    API-->>User: Send response
```

Rendering

Mermaid diagrams render automatically in the editor preview. The editor uses a dedicated Mermaid widget that processes the diagram definition and displays the resulting graphic. If your diagram has a syntax error, the widget will show an error message instead.

Related pages

For the fenced code block syntax that Mermaid diagrams are built on, see Markdown Basics. For structured data grids, see Tables.