Viewer
Mermaid Viewer
Open a .mmd file, a README or any Markdown note and read every Mermaid diagram in it. Zoom in, drag to pan, go full screen, and send a view link that opens the same diagram for someone else.
No signup · Rendered in your browser · Nothing is uploaded
How to view a Mermaid diagram online
- Step 1Open or paste
Drag a .mmd, .mermaid or .md file onto the code box, click Open a file, or paste Mermaid code straight from a README or an AI answer.
- Step 2Read the diagrams
Every diagram renders below, in order. Zoom from 50% to 300%, drag with the mouse to pan, or go full screen for a large one.
- Step 3Share or export
Copy view link to send the diagram itself — the code travels in the link. Open in editor to restyle it and export PNG, SVG or PDF.
What the viewer opens
A bare .mmd or .mermaid file, or Mermaid code pasted on its own, shows as one diagram.
A Markdown document — README, Obsidian note, docs page — shows every ```mermaid or ~~~mermaid block, in order.
A view link, including a mermaid.live link with its #pako: part, opens with the diagram up front and the code tucked away.
Diagram types it shows
The viewer runs Mermaid 11.15.0 in your browser, so it draws what Mermaid draws: flowcharts, sequence diagrams, class, state and ER diagrams, Gantt charts, pie charts, mindmaps, timelines, user journeys, Git graphs, quadrant charts, C4 diagrams, Sankey, XY charts, block, architecture and requirement diagrams. A bare file is recognised by its first word — flowchart, sequenceDiagram and so on; inside a Markdown fence, any Mermaid type works.
Viewer, editor or Mermaid Live Editor?
For reading. Opens whole files, shows every diagram at once, and shares read-only view links. Best when someone hands you a .mmd file or a README.
For styling and export. Edit the code with a live preview, choose a theme, and download PNG, SVG, JPG, WebP or PDF without a watermark.
The official editor from the Mermaid project. View links from this page open there too, because both use the same #pako: link format.
Other places Mermaid diagrams render
When the diagram already lives in one of these tools, you may not need a separate viewer at all.
- GitHub and GitLab render
```mermaidblocks in Markdown files, issues and pull requests. Mermaid in GitHub - Notion previews a code block set to Mermaid. Mermaid in Notion
- Obsidian draws Mermaid blocks in reading view with no plugin.
- Confluence needs a Mermaid app or an image. Mermaid in Confluence
- VS Code shows Mermaid in the Markdown preview once a Mermaid extension is installed.
- Anywhere else — email, a file from a colleague, an AI answer — paste it here, or send a view link so the other person sees the diagram without installing anything.
Related
FAQ
What is a Mermaid viewer?
A Mermaid viewer turns Mermaid code — the plain-text diagram syntax used in READMEs, docs and AI answers — into the diagram it describes, so you can read it without installing anything. This Mermaid Viewer is read-first: it shows every diagram in a file, lets you zoom and go full screen, and shares a view link.
What is a .mmd file?
A .mmd file (sometimes .mermaid) is a plain-text file that holds Mermaid diagram code, such as a flowchart or sequence diagram. Any text editor opens it as code; to see the drawing, open it in a Mermaid viewer like this one, which renders it in your browser.
How do I open a .mmd file online?
Drag the .mmd or .mermaid file onto the Mermaid Viewer, or click Open a file. The file is read in your browser and the diagram appears straight away; it is never uploaded to a server.
What happens when a Markdown file has several Mermaid diagrams?
The Mermaid Viewer shows every ```mermaid and ~~~mermaid block in the document, one after another, each titled with the nearest heading above it. A block that fails to render shows its error without hiding the others.
What is stored in a Mermaid Viewer link?
The diagram code itself, compressed into the part of the link after the #. Browsers never send that part to a server, so the diagram is not stored anywhere — whoever opens the link renders it in their own browser.
Can the Mermaid Viewer open a mermaid.live link?
Yes. View links use the same #pako: format as the official Mermaid Live Editor, so you can replace the mermaid.live address with mermaidonline.org/mermaid-viewer and keep everything after the #. Links from the viewer also open in mermaid.live.
How do I read a large Mermaid diagram?
Zoom up to 300%, drag the diagram with the mouse to pan, or switch to full screen so the diagram gets the whole display. On touch screens, scroll with your finger to move around a zoomed diagram.
Can I view Mermaid code from ChatGPT, Claude or another AI tool?
Yes. Copy the Mermaid block from the answer — with or without its ```mermaid fence — and paste it into the Mermaid Viewer. If the AI wrote invalid syntax, the viewer shows Mermaid's error for that block, and the Mermaid Syntax Checker or the editor's AI fix can repair it.
Can I view Mermaid diagrams on a phone?
Yes. On a phone, use Open a file to pick a .mmd or .md file, or paste the code. Zoom with the buttons and scroll with your finger to move around. Full screen appears only in browsers that allow it, so it is hidden on iPhone.
How do I save a diagram from the Mermaid Viewer as PNG or SVG?
Click Open in editor on the diagram. It opens in the Mermaid Online editor with the same code, where you can pick a style and export PNG, SVG, JPG, WebP or PDF without a watermark. For several diagrams in one Markdown file, the Markdown export page lets you pick each one.
Is the Mermaid Viewer free?
Yes. Opening files, viewing every diagram, zoom, full screen and view links are free and need no account. Nothing is uploaded, so there is no file size plan to buy.
Why does a Mermaid diagram not render in the viewer?
Usually a syntax error: the viewer shows the message Mermaid reports for that block. Paste the code into the Mermaid Syntax Checker for a line-by-line explanation, or open it in the editor to fix it.
Does my Mermaid code get uploaded?
For the core editor and export workflow, Mermaid code is processed locally in your browser and is not uploaded to our server.
Is Mermaid Online affiliated with Mermaid.js or Mermaid Chart?
No. This is an independent tool and is not affiliated with Mermaid.js, Mermaid Chart, or their maintainers.