Insert a Mermaid diagram in Confluence

To insert a Mermaid diagram in Confluence with Capable Diagrams, edit the page, type /diagram, choose Diagram (Capable) and pick Mermaid. Write or paste your Mermaid source and the preview redraws as you type. Select Save and publish the page, and the diagram renders for everyone who can read it.

#Before you start

Capable Diagrams is installed on your site and you can edit the page.
Mermaid has not been turned off by your administrator. If it is missing from the picker, see Turn diagram languages on or off.

#Steps

Edit the page and put the cursor where the diagram should go.
Type /diagram and choose Diagram (Capable).
In the library picker, choose Mermaid. It is under Software and architecture.
Replace the starter diagram with your own Mermaid source. The preview redraws as you type.
Give the diagram a title in the title field above the editor.
Select Save, then publish the page.

Without editing the page first: select Capable in the byline under the page title, type mermaid in Search capabilities, pick Mermaid under Diagram libraries (or a Mermaid template under Templates), write your diagram and select Insert.

#If it does not work

A blank diagram or an error usually means a syntax problem. Mermaid is sensitive to indentation and to the first line, such as flowchart TD or sequenceDiagram. See Diagram does not render.
Save stays greyed out until the diagram has a title and some source.
If /diagram shows nothing, the app may not be available in this space. See Troubleshooting.

Mermaid

What Mermaid draws, and its syntax.

Mermaid examples

Working Mermaid you can paste.

Mermaid visual editor

Click instead of type.

Insert a diagram

Every way to put a diagram on a page.

A few lines of text, and the diagram draws itself.