Wiki Mermaid Diagrams

Have you ever wanted to create some diagrams to explain the flow or sequence along with you documentation. You can use some tool like Microsoft Visio, export or screen grab the picture then paste it into the wiki. Then when it comes to updating it you have to try and find that Visio file make the change and repeat the export.

In the series of Diagrams in Azure DevOps Wiki I will be showing you how you can put diagrams along side you Wiki documentation. In this post we will be looking at the in built Mermaid Diagrams.

Lets get Started

• Flowcharts
• Sequence
• Gantt Charts

The actual wiki diagram syntax is in the same file as you wiki document. The syntax for the mermaid diagram is surrounded with the notation see below.

1
2
3

::: mermaid
<Mermaid Syntax>
:::

In the preview panel to the right of you text will display the below image. Clicking on Load diagram the mermaid syntax is used to generate the diagram.

Flow Chart Example

1
2
3
4
5
6
7
8

::: mermaid
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
:::

Generate a picture that looks like the below.

Sequence

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

::: mermaid
sequenceDiagram 
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
:::

Generate a picture that looks like the below.

Gantt Chart

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

::: mermaid
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
:::

Generate a picture that looks like the below.

Mermaid Resources

For more information about the Mermaid syntax look at . Be aware not all syntax works for these three types at the moment.

Editors for Mermaid

If you are looking at ways to create the Mermaid diagram there is a live editor at and if you like editing you Wiki in VSCode there is a extension to allow you to edit the Mermaid diagram in VSCode and preview the diagram you can find the extension at .

Please be careful in using these other editors as some of the syntax that is supported by these editor may not be supported by Azure DevOps Mermaid Generator.

Conclusion

This is a good start, hopeful more diagram types will be added.