Diagrams

Note

Here you'll learn how to work with the new Wiki editor. For more information about markup in the old editor, see Markup guide (old editor).

To add a diagram, chart, or graph to a page, you can use one of the supported text markup languages:

Mermaid

You can add a diagram created with Mermaid to the page.

Visual editor

Markdown markup

On the toolbar, click Mermaid.

You can also use the quick access menu: type / and select a command from the list.
In the right-hand field, define your diagram using the Mermaid markup language.
Click Save.
To edit an existing diagram, click → Edit in the top right corner of the diagram.

To embed a Mermaid diagram on the page, add code in the following format:


 ```mermaid
 sequenceDiagram
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice
 ```

Draw.io is an online tool for creating diagrams.

Visual editor

Markdown markup

On the toolbar, click Draw.io.

You can also use the quick access menu: type / and select a command from the list.
Draw a diagram. With Draw.io, you can add, delete, modify, and freehand sketch elements.
- To add an element, select it on the left panel. Once it appears in the center of the canvas, you can move and edit it.
- You can also switch to drawing mode. To do this, click the button in the left panel. Hold the left mouse button down to draw freehand on the canvas.
Click Save.
To adjust the diagram size, click → Settings in the top right corner of the diagram and set the new width and height in pixels.
To edit an existing diagram, click → Edit in the top right corner of the diagram.

The function isn't supported in the Markdown markup mode.

You can add PlantUML-supported diagrams to the page.

For more information about the PlantUML diagram markup language, see the PlantUML Language Reference Guide.

Visual editor

Markdown markup

On the toolbar, click PlantUML.

You can also use the quick access menu: type / and select a command from the list.
In the right-hand field, define your diagram using the PlantUML library markup language.
Click Save.
To edit an existing diagram, click → Edit in the top right corner of the diagram.

To place a diagram on a page, add code in the following format:

{% diagram %}

@startuml
Bob->Alice:Hello
@enduml

{% enddiagram %}