An advanced Visual Studio Code extension designed to enhance the editing and preview experience for Markdown files intended for Azure DevOps Wikis.
Key Features
Rich Preview: Faithful rendering of both standard Markdown and Azure DevOps–specific Markdown.
Advanced Diagram Support: Native rendering of Mermaid diagrams (flowcharts, sequence, Gantt, etc.) with automatic, responsive sizing. If you need to publish Mermaid diagrams to an older DevOps Wiki, they are automatically converted into PNG files supported by legacy wikis.
Animated SVGs and References: Converts animated with id paths, .svg files found in Markdown into GIFs, which are supported and viewable in Azure DevOps Wikis.
Multiple Visual Themes: Instantly switch the preview between styles:
GitHub (Light and Dark)
VS Code (Light and Dark)
Dracula (with corrected syntax colors)
Solarized Light
Zoom Control: Adjust the preview size independently of the editor.
Interactive TOC: Sidebar with an automatically generated table of contents for quick navigation.
Syntax Highlighting: Code blocks with correct colors based on the language and the selected theme.
Export to PDF: Generates a PDF that closely mirrors the preview: SVGs (including animated) render correctly as images, and code blocks remain fully visible with proper formatting and no clipping.
Fluid Layout: The preview makes full use of the window’s available width.
Usage
Open any .md file, click the extension’s preview icon in the editor title bar, or use the command palette.
Saving and Export Options
Modern save: Converts referenced SVGs to GIFs for Azure DevOps compatibility while retaining a reference to the original SVG files. Mermaid diagrams are kept using the Azure DevOps block syntax (e.g., ::: mermaid ... :::).
Legacy save: Exports all Mermaid diagrams as PNG files while preserving a reference to their original Mermaid source code.
Non-destructive by design: Both conversion paths preserve original assets and references; nothing is deleted or overwritten.
Important
Generated assets are written to a .attachments folder (the standard location used by Azure DevOps Wikis). If that folder is not present in your workspace, the preview and conversions still work. For conversions to run, SVGs must exist as individual files and be referenced from the Markdown (i.e., linked images), not embedded inline.
