Skip to content

Quick Start

This walk-through takes about ten minutes and touches the features most teams use first.

1. Start from a template

  1. Edit a page, type /mermaid and choose Mermaid Diagram.
  2. Click Templates and pick Sequence.
  3. Rename a participant in the code. The preview updates as you type.

2. Change how it looks

In the toolbar above the preview:

  • Theme: a built-in Mermaid theme, Match Confluence, or one of your site's colour themes
  • Look: Classic or Hand-drawn
  • Direction (flowcharts): top to bottom, left to right, bottom to top or right to left

These are saved with the diagram.

3. Map a section of your space

  1. Click Insert → Page tree.
  2. Under Start from, keep This page or search for a page that has child pages.
  3. Choose a Depth and Draw as a flowchart or a mind map, then click Insert diagram.

Every box opens its page on the published diagram. See Page tree.

In a flowchart, right-click a box in the preview and choose Link to a page…. Search for the page and click Link. See Links to pages.

5. Save and publish

Click Save diagram, then publish the page. Readers can zoom, go full screen, view the code and download a PNG from the toolbar below the diagram.

6. Add your brand colours (admins)

Open Confluence settings → Mermaid Diagram settings → Themes and create a theme. It appears in every editor's Theme menu. See Colour themes.