Montag, 24. Mai 2021

Usage of SVG diagrams in Azure DevOps Wiki

Yes, there is support for Mermaid diagrams in Azure DevOps Wiki. But unfortunately it is only possible to use 3 of the types. And still, if all of them were supported, this would still be far away from flexible diagrams like the ones that can be created in Visio or Inkscape. 

I used to love Draw.io in Confluence. It is browser based and allows inline editing of the diagrams in the Confluence page. So I was looking for something similar to this. And I found my solution. 

Just use Draw.io in Azure DevOps!

Though there is no inline editor available, it is still possible to clone the whole Wiki to a local Git repo. And VSCode has Draw.io support. These are the steps needed to use Draw.io in your DevOps Wiki:


  • Install VSCode (https://code.visualstudio.com/)
  • Add the "Draw.io  Integration" plugin by Henning Dietrichs to VSCode
  • Clone the wiki to your local machine, Wiki (three dots) -> clone wiki
  • Open with VSCode, create new Draw.io  file or edit existing one
  • Use the .drawio.svg file extension, this file can be viewed in Wiki and edited in VSCode
  • After the changes have been done, commit the changes to the wiki



DevOps Wiki usually stores all images in the .attachments folder. But actually images can be placed everywhere in folders. So to add your new image to markdown source, add something like

![image.svg](/project1/folder/subfolder/step-processing.drawio.svg )

or if you prefer the standard way

![image.svg](/.attachments/step-processing.drawio.svg )