[{"data":1,"prerenderedAt":83},["ShallowReactive",2],{"/2025/12/22-mermaid-zoomable-previewer-in-vs-code":3},{"id":4,"title":5,"body":6,"date":74,"description":71,"extension":75,"meta":76,"navigation":77,"path":78,"robots":79,"seo":80,"stem":81,"__hash__":82},"posts/2025/12/22 mermaid-zoomable-previewer-in-vs-code.md","22 Mermaid Zoomable Previewer In Vs Code",{"type":7,"value":8,"toc":70},"minimark",[9,18,21,25,27,39,61,63],[10,11,13],"post-title",{":date":12},"date",[14,15,17],"h1",{"id":16},"mermaid-zoomable-previewer-in-vs-code","Mermaid Zoomable Previewer in VS Code",[19,20],"br",{},[22,23,24],"p",{},"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.",[19,26],{},[22,28,29,30,38],{},"After playing around a little, I figured out the way to do it. The previewer supports only ",[31,32,37],"code",{"className":33},[34,35,36],"bg-gray-200","p-2","rounded",".mmd"," file. So, here are the steps I did:",[40,41,42,46,49],"ol",{},[43,44,45],"li",{},"Move mermaid diagram to mmd file.",[43,47,48],{},"Open the mmd file in VS code.",[43,50,51,52,56,57],{},"Click ",[31,53,55],{"className":54},[34,35,36],"CTRL + Shift + P"," and search for ",[58,59,60],"strong",{},"MermaidChart: PreviewDiagram",[19,62],{},[22,64,65,66,69],{},"By default, it has no key binding, so I bind mine to ",[31,67,68],{},"ALT + SHIFT + M"," for quick access.",{"title":71,"searchDepth":72,"depth":72,"links":73},"",2,[],"2025-12-22T00:00:00.000Z","md",{},true,"/2025/12/22-mermaid-zoomable-previewer-in-vs-code",null,{"title":5,"description":71},"2025/12/22 mermaid-zoomable-previewer-in-vs-code","Oy0U4503_XkG6g7_JVaqXDp9QybyigXnzLR1HmHAloc",1785167452087]