Dot Net

Adding Diagram 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.



Source link

Related Articles

Back to top button