Mermaid Zoomable Previewer in VS Code
Monday, December 22, 2025
Up to this point, I had my diagram in a regular markdown file. The problem is when the diagram got bigger, the previewer can't zoom in. Reading the extension doc, it does support pan and zoom. However, I wasn't able to access that feature.
After playing around a little, I figured out the way to do it. The previewer supports only .mmd file. So, here are the steps I did:
- Move mermaid diagram to mmd file.
- Open the mmd file in VS code.
- Click
CTRL + Shift + Pand search for MermaidChart: PreviewDiagram
By default, it has no key binding, so I bind mine to ALT + SHIFT + M for quick access.