mavsankar presents a new VS Code extension to preview Mermaid diagrams in Markdown files for Azure DevOps documentation. Discover how this tool streamlines documentation and diagram workflows.

Introduction

If you’re documenting software projects in Azure DevOps and use Markdown with Mermaid diagrams, you may have noticed that VS Code does not natively preview Mermaid diagrams within markdown files. This limitation can make diagram authoring and revisions cumbersome.

Solution: Markdown Mermaid Viewer Extension

To improve this workflow, I developed a VS Code extension that enables inline rendering of Mermaid diagrams as you edit your Markdown. With this tool, there’s no need to rely on external diagramming tools or browser plugins—everything happens directly in your coding environment.

Azure DevOps and Mermaid Support

Azure DevOps wikis and markdown files do support Mermaid diagram syntax, and Microsoft provides official guidance for using Mermaid in documentation:

With this extension, you can:

  • Preview diagrams as you write Markdown in VS Code
  • Validate Mermaid syntax and make real-time updates
  • Enhance documentation quality and reduce iteration time

Community Feedback

Feedback on the extension is welcome to help refine features and address edge cases other Azure DevOps and VS Code users may encounter.

Author: mavsankar

For questions, bug reports, and feedback, connect via the Visual Studio Marketplace or the provided Reddit thread.

This post appeared first on “Reddit Azure DevOps”. Read the entire article here