Adding Diagrams and visualizations in your Azure DevOps wiki using Mermaid

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.

Adding Diagram and visualizations in your Azure DevOps wiki using Mermaid
Mermaid Diagrams Reference Images

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

Adding Diagram and visualizations in your Azure DevOps wiki using Mermaid
Insert Mermaid Diagram

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

Adding Diagram and visualizations in your Azure DevOps wiki using Mermaid
Default Mermaid 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 :

Adding Diagram and visualizations in your Azure DevOps wiki using Mermaid

The following will be the rendered output on the Wiki Page.

Adding Diagram and visualizations in your Azure DevOps wiki using Mermaid

You can take the help of Mermaid Live Editor generates a real-time Mermaid diagram and then the code block to your wiki pages for faster results.

Adding Diagram and visualizations in your Azure DevOps wiki using Mermaid

Overall, this is a fantastic addition to the wiki and a great help for all the documentation purposes. Do explore!

P.S: Some of the charts mentioned as per release notes still showing as unsupported. Hopefully, over a few weeks, it will available.

DON'T MISS OUT!
Subscribe To Newsletter For your Daily Development Tips and Tricks  

 Best Tips & Tricks on Microsoft Technology Platform 

Invalid email address
We promise not to spam you. You can unsubscribe at any time.
Abhijit Jana

Abhijit runs the Daily .NET Tips. He started this site with a vision to have a single knowledge base of .NET tips and tricks and share post that can quickly help any developers . He is a Former Microsoft ASP.NET MVP, CodeProject MVP, Mentor, Speaker, Author, Technology Evangelist and presently working as a .NET Consultant. He blogs at http://abhijitjana.net , you can follow him @AbhijitJana . He is the author of book Kinect for Windows SDK Programming Guide.

3 Comments to “Adding Diagrams and visualizations in your Azure DevOps wiki using Mermaid”

Post Comment