Usage

Search…
Usage
Render UML Diagrams Macro
The Render UML Diagrams macro (https://mermaid-js.github.io/mermaid/#/) uses Mermaid to render UML diagrams. It allows you to define UML diagrams in plain-text format just like Markdown.
For a live editor to draft your diagrams, please try https://mermaidjs.github.io/mermaid-live-editor.
In the Confluence editor, open the Select macro dialog. The macro name is Render UML Diagrams.
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
Alternatively, type / (slash) and select the macro.
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
A dialog will appear. Type the content of the UML diagram into the macro editor. Here is an example:
1
sequenceDiagram
2
    participant Alice
3
    participant Bob
4
    Alice->>John: Hello John, how are you?
5
    loop Healthcheck
6
        John->>John: Fight against hypochondria
7
    end
8
    Note right of John: Rational thoughts <br/>prevail!
9
    John-->>Alice: Great!
10
    John->>Bob: How about you?
11
    Bob-->>John: Jolly good!
Copied!
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
While editing, you can click Show preview to see the result. You can also click Full Screen Editor to open the Mermaid editor that will help you design new diagrams easily.
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
Save the page, and the UML diagram will be rendered.
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
Render Graphviz Diagrams Macro
The Graphviz layout programs (https://www.graphviz.org/) take descriptions of graphs in a simple text language, and make diagrams in useful formats, such as images and SVG for web pages; PDF or Postscript for inclusion in other documents; or display in an interactive graph browser. Graphviz has many useful features for concrete diagrams, such as options for colors, fonts, tabular node layouts, line styles, hyperlinks, and custom shapes.
You can find more Graphviz examples here.
In the Confluence editor, open the Select macro dialog. The macro name is Render Graphviz Diagrams.
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
Select the macro, then click Insert.
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
Type the content of the Graphviz diagram into the macro editor. Here is an example:
1
graph {
2
  a -- b;
3
  b -- c;
4
  a -- c;
5
  d -- c;
6
  e -- c;
7
  e -- a;
8
}
Copied!
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
Save the page, and the Graphviz diagram will be rendered.
Mermaid UML Diagrams and Graphviz Diagrams for Confluence Cloud
Examples
Flowchart
Flowcharts can be rendered with Mermaid. See more https://mermaid-js.github.io/mermaid/#/flowchart.
Input
Render
Sequence diagram
Sequence diagrams can be rendered with Mermaid. See more https://mermaid-js.github.io/mermaid/#/sequenceDiagram.
Input
Render
Class diagram
Class diagrams can be rendered with Mermaid. See more https://mermaid-js.github.io/mermaid/#/classDiagram.
Input
Render
State diagram
State diagrams can be rendered with Mermaid. See more https://mermaid-js.github.io/mermaid/#/stateDiagram.
Input
Render
Entity Relationship diagram
Entity Relationship diagrams can be rendered with Mermaid. See more https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram.
Input
Render
User Journey
User Journey can be rendered with Mermaid. See more https://mermaid-js.github.io/mermaid/#/user-journey.
Render
Input
Gantt chart
Gantt charts can be rendered with Mermaid. See more https://mermaid-js.github.io/mermaid/#/gantt.
Input
Render
Pie chart
Pie charts can be rendered with Mermaid. See more https://mermaid-js.github.io/mermaid/#/pie.
Input
Render
Graphviz
This diagram is rendered with Graphviz.
Input
Render