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
```

Current fence limits

For predictable editor behavior, use a root-level triple-backtick fence with mermaid immediately after the opening fence and an exact ``` closing line. Indented fences, tilde fences, longer closing runs, and other CommonMark/Obsidian fence variants are not a current compatibility promise. The broader shared fence contract is documented as target work until the editor scanners and Mermaid overlay are aligned and validated together.

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. The published reader is a separate renderer, so editor rendering should not be treated as proof of published-reader parity.