A simple, fast, and local VS Code extension to preview your Mermaid diagrams and save them as high-quality SVG or JPG files directly from the editor.
Features
Live Preview: Instantly preview .mmd or .mermaid files with real-time rendering.
Pan & Zoom: Support for zooming (scroll) and panning (drag) large diagrams.
Save to SVG / JPG: Click the floating Save SVG or Save JPG button in the preview window to export your diagrams. The JPG export uses high-resolution (3x) rendering to ensure crisp images.
Error Feedback: Catch and display Mermaid syntax errors clearly within the preview window.
Usage
Open a file with the .mmd or .mermaid extension (or change the Language Mode to mermaid).
Right-click inside the editor or use the Preview (magnifying glass) icon in the top right corner to open the preview.
Edit your Mermaid code and watch the diagram update automatically.
Click Save SVG or Save JPG inside the preview window (bottom left) to save the rendered output to your disk.
Acknowledgements & Copyright
This extension relies on the powerful open-source library Mermaid.js.
This extension uses Mermaid.js for rendering diagrams. Mermaid.js is created by Knut Sveidqvist and contributors, and is used under the terms of the MIT License. All rights to Mermaid.js remain with its original authors.
This extension does not claim any ownership over Mermaid or its associated intellectual property.
