Documentation

Mermaid Diagrams Live Editor for Confluence

Write Mermaid diagrams as text and see them rendered on your Confluence pages. Live preview while you edit, crisp SVG at full width, click-to-zoom viewer, light and dark themes, and the latest Mermaid release bundled with the app.

Get it on the Marketplace Support

Install

A Confluence site administrator installs the app from the Atlassian Marketplace (Apps → Explore more apps → search “Mermaid Diagrams Live Editor”).
Open any page in the editor, type /mermaid and choose Mermaid diagram. The editor opens with an example flowchart.

Edit a diagram

Write or paste Mermaid code on the left. The preview on the right updates as you type; syntax errors are shown above the preview with Mermaid’s own message.
Use the Templates row to start from a flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline or git graph.
Optional settings at the top: a Title shown above the diagram, the Theme (match Confluence, light or dark), Align (center or left), a Max width in pixels, and Show source under the diagram for readers who want to copy the code.
Drag the divider to resize the panes. Press Save. To edit later, select the macro on the page and click the pencil.

Viewing diagrams

Diagrams render as SVG at the page’s full width, so text stays sharp at any size.
Hover over a diagram and click Expand, or double-click it, to open the full-screen viewer. Scroll to zoom, drag to pan, double-click to zoom in. Keyboard: + / - zoom, 0 fit to window, 1 actual size, Esc close.
With Theme set to “Match Confluence”, the diagram redraws automatically when you switch Confluence between light and dark mode.

Exports (PDF and Word)

Confluence exports cannot run the browser code that draws diagrams. In exported documents the macro shows the diagram title and its Mermaid source in a code block, so the information is never lost. Rendered images in exports are planned for a later release.

Supported syntax

The app bundles the current Mermaid release and renders with it directly, so everything Mermaid supports works: all diagram types, classDef and style directives, %%{init}%% configuration, themes and comments. Mermaid’s own documentation applies: mermaid.js.org. For security, diagrams are rendered in Mermaid’s strict mode: HTML inside labels is not interpreted and clickable links in diagrams are disabled.

Limits

Up to 50 KiB of Mermaid text per diagram (roughly 600 nodes). Very large diagrams take a few seconds to lay out; the page shows “Rendering diagram…” meanwhile.
One diagram per macro. Add more macros for more diagrams.
Diagrams render in the Confluence web editor and page view. They are not available in the Confluence mobile apps.

Where your data lives

The diagram source and its settings are stored in the macro’s configuration, inside the Confluence page itself: they are versioned, copied and exported with the page. The app has no servers, stores nothing elsewhere, reads no other content and sends nothing outside Atlassian. Rendering happens in your browser. See the privacy policy.

Troubleshooting

Symptom	What to check
“Mermaid syntax error” on the page	Open the macro editor: the preview shows the exact message. Mermaid is strict about indentation and arrow syntax; try the diagram at mermaid.live to compare.
“Edge limit exceeded” or “text size exceeded”	The diagram is beyond the app’s limits. Split it into several macros.
Labels look cut off	Reload the page once. If it persists, send us the diagram source.
The macro shows “Edit this macro to add your diagram”	The macro was inserted without saving a diagram. Select it and click the pencil to open the editor.

Changelog

1.0 — First release: live editor, latest Mermaid bundled, full-screen zoom viewer, light and dark themes, exports with source.