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.
| Code Block |
|---|
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:
| Code Block |
|---|
%%{
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.
...
Introduction
This macro can be used to add various diagrams in Mermaid syntax into a Confluence page by typing /mermaid and add a Mermaid Diagram using a special syntax defined by the Mermaid Diagram Syntax.
The macro can be used to generate the following diagram types
Sequence Diagram
User Journey
Class Diagram
Mindmaps
Component Diagram
State Diagram
Object Diagram
Flowcharts
And more charts supported by Mermaid
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