Select your diagram, then click in the Edit (pencil) button

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.

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.

Next steps

Documentation

How to update an existing diagram?

Export your page

Our support channel