claritelab

Claritelab Mermaid Diagrams for Confluence: help

Contact: support@claritelab.com. We aim to reply within 2 business days.

Insert a diagram

1. Edit a Confluence page.
2. Type /mermaid and choose Mermaid Diagram.
3. The editor opens with an example. Replace it with your Mermaid code, or pick a template.
4. Click Save, then publish the page.

To change a diagram later, edit the page, select the diagram and click the pencil (edit) icon.

The editor

• Code on the left, live preview on the right. The preview updates as you type.
• Errors are shown under the preview, with the line number when Mermaid reports it. The last valid diagram stays visible.
• Template: inserts an example of a diagram type.
• Display: diagram only (default), code only, or diagram and code.
• Size: actual size, shrunk if the page is too narrow (default), or always full width.
• Theme: automatic (follows Confluence light or dark theme), or a fixed Mermaid theme: default, neutral, forest, dark, base.
• You can always save, even if the code has an error. Readers will then see the error message.

Reading a diagram

Move the mouse over a diagram to show its toolbar:

• − and +: zoom out and in. You can also hold Ctrl (Cmd on a Mac) and use the mouse wheel.
• Fit: back to the default view. Double-clicking the diagram does the same.
• Full screen: opens the diagram in a large window. There, the mouse wheel zooms directly.
• SVG and PNG: download the diagram. PNG is exported at twice the diagram's natural size.
• Copy code: copies the Mermaid code to the clipboard.

Drag the diagram with the mouse to move it. Keyboard: click the diagram, then +, - and 0 (fit).

PDF and Word export

In PDF exports, the diagram is included as a vector image. Word exports contain the same image; how it is displayed depends on your version of Word. The image is created when the diagram is saved in the editor, so diagrams saved before an update of the app may need to be opened and saved once. If a diagram is very large, or has an error, its Mermaid code is exported instead.

Supported diagrams

The app uses Mermaid 12.3: flowchart, sequence, class, state, entity relationship, Gantt, pie, mind map, timeline, Git graph, user journey, quadrant, XY chart, Sankey, block, architecture, kanban, requirement, and the other types supported by this Mermaid version. Some of these types are still in beta in Mermaid. See the Mermaid documentation for the syntax.

Layout: the app uses the classic Mermaid layout engine. To use the ELK engine on a diagram, add layout: elk to its configuration.

Language

The app interface is in English, or in French when your Confluence language is French.

Troubleshooting

• "Empty diagram" message: the macro has no code yet. Edit it and add Mermaid code.
• A large diagram looks small: it is shrunk to fit the page. Use zoom or full screen, or choose a vertical layout (flowchart TD).
• The diagram does not appear in a PDF: open the diagram in the editor and save it once, then export again.
• Something else: write to support@claritelab.com with the Mermaid code, your browser and a screenshot.

Privacy

The app stores nothing outside your Confluence site and calls no outside service. See the privacy policy.