Confluence Mermaid diagram: add, edit, and export

To add a Mermaid diagram in Confluence, insert the Text Diagram (Mermaid) element from the insert menu, enter Mermaid text, and choose Save. BrightDesk Text Diagrams opens a full-screen editor with text on one side and a live preview on the other.

Steps at a glance

Edit the Confluence page.
Open the insert menu and search for Text Diagram (Mermaid).
Type Mermaid text, pick a template, or paste text you already have.
Check the live preview, then choose Save.
Publish the page.

A small example to paste

```mermaid
flowchart TD
  Req[New request] --> T{Urgent?}
  T -- Yes --> Now[Fix this sprint]
  T -- No --> Back[Add to backlog]
  Now --> Rev[Code review]
  Rev --> Ship((Released))
```

The fences around this example are fine to paste as they are.

How do you add a Mermaid diagram to a Confluence page?

A Mermaid diagram goes on a Confluence page through the Text Diagram (Mermaid) element. Open the insert menu and choose that element to open the full-screen editor. Type Mermaid diagram text or paste text you already have. The preview appears beside the text and redraws as you type. When the drawing is ready, choose Save to put the diagram on the page. BrightDesk Text Diagrams is launching soon and is currently being prepared for Marketplace review.

How do you edit a saved Confluence Mermaid diagram?

A saved Confluence Mermaid diagram can be changed by editing the Text Diagram (Mermaid) element. The full-screen editor gives you text on one side and a live preview on the other. Change the Mermaid text to change the drawing, then choose Save to put the revised diagram on the page. If the text contains a mistake, the app shows the first lines of the error message instead of a broken picture. Check the text and watch the preview as you make corrections.

Which Mermaid diagram types and templates can you use?

Mermaid diagram types include flowcharts, sequence, class, state, entity relationship, Gantt, mind maps, timelines, and pie charts. BrightDesk Text Diagrams uses the open-source Mermaid syntax and also supports other Mermaid types. Nine starter templates give you text to begin with: Flowchart, Sequence, Class, State, Entity relationship, Gantt, Mind map, Timeline, and Pie chart. Choose a template or paste existing Mermaid text, then change the text while checking the live preview. The preview redraws as you type.

How do Confluence diagram downloads and storage work?

Confluence diagram downloads are available as SVG or PNG files. PNG downloads use twice the size and a white background. Diagram text is stored only in the customer’s Confluence page, and diagrams are drawn in the user’s browser. BrightDesk Text Diagrams runs entirely on Atlassian’s Forge cloud platform. No data is sent to BrightDesk servers or any outside service. BrightDesk has no servers and collects no analytics or personal data. The app also follows Confluence light and dark mode.

Text Diagrams is being prepared for Marketplace review. Email us and we'll tell you when it can be installed.

Last updated 12 November 2026.