Insert the diagram

There are two ways to insert the diagram into the Confluence page

1. From the toolbar

• Click on the + icon in the top toolbar of the page

• Type into the add-on search box with “Mermaid Diagram“

• Click in the item highlighted in the green box

2. With slash(/) shortcut

• Type /mermaid

• Click in the green box

After inserted, the add-on will look like

For updating the diagram and getting more about the Mermaid Diagram features. You can go through the next sections.

Update the diagram

How to update the diagrams?

Select the add-on to show the toolbar then click on the pencil button

After clicked you will see the configuration panel shown up from right:

You can choose any theme that you want. We supported the built-in themes including: default, base, neutral, dark, and forest.

The add-ons allows to config the output diagram render size including: Auto (max width: 100%) which is default, Large (max width: 992px), Medium (max width: 768px), Small (max width: 576px), X-Small (Max width: 256px). This field is very useful for configuring the diagram size especially when exporting your page.

Then, update the code block. You can copy and paste the sample code below to the Code box.

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

After pasted, click outside the Code box or close the configuration panel to see the generated diagram.

You can also overwrite the theme by code, for example:

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#BB2528',
      'primaryTextColor': '#fff',
      'primaryBorderColor': '#7C0000',
      'lineColor': '#F8B229',
      'secondaryColor': '#006100',
      'tertiaryColor': '#fff'
    }
  }
}%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end

When done, you can preview and publish your page at any time.

Learn more about the mermaid diagram and syntax?

You take a look at the https://mermaid.js.org/intro/n00b-syntaxReference.html document. All supported diagram are listed there with details. You can also use the Live Editor to write your code, then copy and paste it to the add-on configuration Code.

Export your page

Mermaid Diagram is supported to work with exporters including the native PDF Exporter.

You can click at more actions in the top toolbar and choose Export, then select the export type that you want.

Our support channel

You can reach us anytime at Gluebin Softs Portal for any information regarding our product user guide and issues during using our applications.