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
or if you prefer the standard way
Nice post! We have tried to use similar workflow, but we found out that Azure DevOps does not render multiline texts in svg properly, which is show stopper for us.
AntwortenLöschenhttps://developercommunity.visualstudio.com/t/azure-devops-wiki-does-not-respect-line-break-in-t/935809
Have you managed to handle this problem?
The problem is Azure DevOps sanitizes the SVG before outputting it resulting in the removal of the line breaks. When you look at the source URL you will see "sanitize=true". When you download the SVG file from that URL but change to "sanitize=false" you'll see the line breaks are back.
AntwortenLöschenBut using this URL in a html tag in the Azure DevOps Wiki unfortunately gives a HTTP 200 with an empty response, so it only when directly downloading it.
I also haven't figured out a proper solution or workaround yet. Hope they'll put this issue on their priority list soon.
I have tried a lot to get around this problem. But the only solution seems to create multiple text boxes with one line each. It seems like Microsoft does not want to fix this bug.
AntwortenLöschen