Adding Diagrams and visualizations in your Azure DevOps wiki using Mermaid

Every Azure DevOps Team Project supports a wiki that helps share information across teams and project documentation and enables more accessible collaboration experiences. The Azure DevOps Wiki uses Markdown (.md) Languages for content publishing. While it’s quite easy to publish content and manage project documentation on the wiki, you can enhance the documentation with several visualization and diagram in the Azure DevOps Wiki. In this post, let us learn how we can add Diagram and Visualization to Wiki documentation using Mermaid.

Adding Diagram and visualizations in your Azure DevOps wiki

Mermaid is a Javascript-based diagramming and charting tool that uses Markdown (.md). Mermaid renderer markdown syntax with complex diagrams such as state diagrams, class diagrams, etc. It helps with documentation for several technical diagrams that are aligned with the development team.

The following diagrams are now supported in Azure DevOps Wiki

Flowchart
Sequence diagrams
Gantt charts
Pie charts
Requirement diagrams
State diagrams
User Journey

Adding Mermaid Diagram To Wiki Pages

To add a new mermaid Diagram, open the Wiki Pages and Click on the “Insert Mermaid Diagram“

Once you click on “Insert Mermaid Diagram”, it will add a default markdown text for the diagram.

To add a Gantt Chart, you can use the following snippet in your wiki page

Visual Studio 2022 Tips: Did you know – You can now AutoSave Files in Visual Studio 2022?

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

This is what it looks like on the Wiki Page :