How to replace mermaid diagrams with images, keeping them in markdown format to provide easy preview in TFS/Azure DevOps Server?

The company I work in decided to store requirements in markdown format, in order to achieve simplicity, reference-ability, and previewing in TFS/Azure DevOps Server directly. Question is in previewing part in TFS/Azure Dev Ops Server. As I've found, it supports: HTML-tags, math formulas, images resizing, mentioning pull-requests, users, work-items and so on. But mermaid diagrams are not supported, though they are very useful to my mind to get common understanding of complex processes in shortest time.

I've installed pandoc, and that's a process: autogenerate HTML file for every updated md file in REPO Problem is that TFS/Azure DevOps Server won't accept previewing BASE64-encoded images, built-in in HMTL by pandoc.

So I've decided to do something like that:

• for every updated md file create copy with postfix (***_IMG.md)
  • for every mermaid diagram
    • generate PNG image
    • save PNG image to a image folder
    • replace mermaid diagram with link to generated image
• save altered md file

Could one possibley specify a list of software to reach this solution? I have not found answer on what instrument should I use, python I guess? But may be there some other alternatives?

It is easier than you think. The TFS/Azure DevOps Server Wiki is backed by a Git repository, so your process maybe something like:

• git pull
• scan repo files to find mermaid diagrams
• generate JPG and replace the snippet with link to image
• git commit
• git push

It can be easily automated in a Pipeline and maybe an extension like Git Tools for Azure DevOps may make the job even simpler.