# Usage
## Mermaid UML Diagrams Macro
The **Render Mermaid UML Diagrams** macro () 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 .
In the Confluence editor, open the **Select macro** dialog. The macro name is **Render Mermaid UML Diagrams**.
Alternatively, type / (**slash**) and select the macro.
A dialog will appear. Type the content of the UML diagram into the macro editor. Here is an example:
```
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
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.
Save the page, and the UML diagram will be rendered.
## PlantUML Diagrams Macro
The **Render PlantUML Diagrams** macro () uses PlantUML 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 .
In the Confluence editor, open the **Select macro** dialog. The macro name is **Render PlantUML Diagrams**.
UML for Confluence
A dialog will appear. Type the content of the UML diagram into the macro editor. Here is an example:
```plant-uml
@startuml C4_Elements
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
Person(personAlias, "Label", "Optional Description")
Container(containerAlias, "Label", "Technology", "Optional Description")
System(systemAlias, "Label", "Optional Description")
Rel(personAlias, containerAlias, "Label", "Optional Technology")
@enduml
```
You can find more examples here . The PDF guideline can be downloaded here .
Save the macro, and the UML diagram will be rendered.
UML for Confluence
## Graphviz Diagrams Macro
The Graphviz layout programs () 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](https://graphs.grevian.org/example).
In the Confluence editor, open the **Select macro** dialog. The macro name is **Render Graphviz Diagrams**.
Select the macro, then click **Insert**.
Type the content of the Graphviz diagram into the macro editor. Here is an example:
```
graph {
a -- b;
b -- c;
a -- c;
d -- c;
e -- c;
e -- a;
}
```
Save the page, and the Graphviz diagram will be rendered.
## Examples
### Flowchart
Flowcharts can be rendered with Mermaid. See more .
### Sequence diagram
Sequence diagrams can be rendered with Mermaid. See more .
### Class diagram
Class diagrams can be rendered with Mermaid. See more .
### State diagram
State diagrams can be rendered with Mermaid. See more .
### Entity Relationship diagram
Entity Relationship diagrams can be rendered with Mermaid. See more .
### User Journey
User Journey can be rendered with Mermaid. See more .
### Gantt chart
Gantt charts can be rendered with Mermaid. See more .
### Pie chart
Pie charts can be rendered with Mermaid. See more .
### Graphviz
This diagram is rendered with Graphviz.
