Mermaid Diagrams

Markdown Macro+ for Confluence renders Mermaid diagrams. You write the diagram as text inside your Markdown, and the macro draws it in the preview and on the published page. The diagram source stays in the macro, so anyone who can edit the page can change it later.

Add a diagram

1. Type /markdown on a Confluence page and insert Markdown Macro+.
2. In the left pane, start a fenced code block with mermaid as the language.
3. Write the diagram, close the block, and check the preview on the right.
4. Save the macro, then publish the page.

```mermaid
flowchart LR
    A[Pull request] --> B{Tests pass?}
    B -- Yes --> C[Merge]
    B -- No --> D[Fix and push]
    D --> B
```

Sequence diagram

```mermaid
sequenceDiagram
    participant User
    participant API
    participant DB
    User->>API: POST /orders
    API->>DB: Insert order
    DB-->>API: Order ID
    API-->>User: 201 Created
```

Mix diagrams with the rest of your Markdown

A diagram is one block in the page, so it sits next to headings, tables, code blocks and math. A runbook can open with a flowchart of the process and follow it with the commands for each step.

Syntax

Diagrams use standard Mermaid syntax. The Mermaid documentation lists every diagram type and option. Check new diagrams in the preview pane before you save.

Tips

1. Keep one diagram per code block.
2. Use short node labels and put the detail in the text around the diagram.
3. LR (left to right) suits wide pages; TD (top down) suits long processes.
4. Paste diagrams from a repository README as they are: the same ```mermaid block works here.