Mermaid Viewer: Preview and Export Diagrams

Paste code, open an .mmd file or click on any page: a mermaid viewer with live preview, zoom and mermaid to PNG or SVG export.

Mermaid Viewer turns diagram code into a picture you can read, zoom and export. Paste the code, open a file, or click the icon on a page that already shows such code. This mermaid viewer draws the chart right in your browser and saves it as a sharp PNG or a clean SVG. 🧭 How the Mermaid Viewer works 1. Click the extension icon. A viewer tab opens next to the page you are reading. 2. Paste code on the left or drop a file onto the tab. The mermaid preview redraws as you type. 3. Scroll to zoom, drag to move, press Fit to see the whole chart. 4. Press Export for a PNG or an SVG, or copy the image into a doc. 📄 Render mermaid diagrams from the page you are on AI chat answers and wiki pages often show diagram code as plain text. Click the icon on that page and the extension reads it once, finds every block and lists them above the editor, one click per diagram. It spots blocks labeled as mermaid, unlabeled blocks that start with a keyword such as flowchart, and fenced blocks inside raw Markdown. The page stays untouched, and the extension does not sit on any site. 🖱️ Want to pick the code yourself? Select it, right-click and choose View selection to open it in the mermaid preview. 📂 An mmd file viewer for your own files Open file and drag and drop both take .mmd files and Markdown notes. From a note the viewer pulls out every diagram block, so a long design doc turns into a short list. It is the mermaid preview you get in a code editor, only one click away in Chrome. 🖼️ Export mermaid diagram images that hold up in slides ▸ PNG up to 4x size, on the theme background or transparent ▸ SVG with real text that design tools can edit ▸ Copy the picture straight to the clipboard ▸ Copy the SVG code, or the source as a Markdown block ▸ Exported files are named after the diagram When a huge chart at 4x is bigger than the browser can draw, the export uses the largest size that fits and says which. That keeps mermaid to png reliable even for big system maps, and mermaid to svg keeps every line crisp at any zoom. 🎨 Themes for the tab and for the chart The mermaid viewer follows your system light or dark mode, or you can switch it by hand. Charts get five themes of their own, including a dark one for late sessions. The sheet you see in the mermaid diagram viewer is exactly what goes into the image. 💾 Your diagrams stay with you • Save a diagram under a name and it goes into My diagrams, up to 300 of them • Edits to a saved diagram are kept on their own • An unsaved draft survives a closed tab • Opening something new moves an edited draft to My diagrams first • Find a saved chart by name in the mermaid viewer 🔒 What stays on your computer Everything happens inside one browser tab. There is no account and no server. The viewer has no analytics and makes no network requests. Saved diagrams live only in your browser, and code found on a page sits in session memory until the viewer picks it up. The drawing library is the official open source package, bundled inside, so this mermaid viewer extension keeps working offline. ❓ Questions and answers Q: Which diagrams can it draw? A: The ones the library supports, from flowcharts and sequence diagrams to the newer chart types. If the code has a mistake, the editor marks the line and the last working version stays on screen. Q: Is this a full mermaid editor? A: It is a quick editor with line numbers and clear error messages, plus examples to start from. You write the diagram as text; there is no drawing with the mouse. Q: How do I get an SVG? A: Press Export, then Download SVG. Tick Transparent background first if you want no sheet behind the drawing. Q: Can it read a page I opened from my disk? A: Chrome keeps extensions away from local pages unless you allow it. Use Open file instead, or turn on Allow access to file URLs in the extension details. Q: How is it different from a mermaid previewer that runs on every site? A: Nothing runs until you click, so pages load as usual and login forms keep working. The mermaid viewer extension has no access to sites you never asked about. Q: Why use a mermaid chrome extension instead of a website? A: One click on the page you are already reading, and your code never leaves your computer. A mermaid viewer extension also keeps your saved charts in one place. This extension is independent and is not affiliated with or endorsed by Mermaid Chart Inc. or the open source project behind the format.