How to view Mermaid diagrams in a Markdown file

Short answer: Mermaid diagrams are text inside a code block labelled mermaid. Markdown itself doesn’t draw them; the tool showing the file has to. GitHub, VS Code’s built-in preview, Obsidian and Typora draw them. Many other viewers, ours included, show the code instead.

Updated 15 October 2026. Support details follow each tool’s documentation.

View a diagram

Check the fence
The diagram must be in a fenced code block labelled mermaid: a line with ```mermaid, the diagram source, then ```.
Open it in a tool that draws Mermaid
Push the file to GitHub, or open it in VS Code and press Ctrl+Shift+V (⇧⌘V on a Mac).
Debug a single diagram
If it still shows as code or as an error, paste the block’s contents into the Mermaid Live Editor at mermaid.live to see the error message.

Where Mermaid is drawn

GitHub draws Mermaid, along with GeoJSON, TopoJSON and ASCII STL blocks, in Markdown files.
VS Code. Its built-in Markdown preview draws mermaid blocks, with no extension needed.
Obsidian draws them too (Obsidian help).
Typora draws Mermaid flowcharts, sequence diagrams, Gantt charts and more as you type.
Mermaid Live Editor shows one diagram at a time as you edit it in the browser, which is handy for fixing a diagram that won’t render.

For PDFs, the Markdown PDF extension for VS Code draws Mermaid blocks during export; by default it loads the Mermaid library from a CDN.

Why it shows as code

The tool doesn’t support Mermaid. Then the block falls back to an ordinary code block. Your diagram isn’t broken; it just isn’t drawn there.
The label is wrong. It must be exactly mermaid after the opening fence.
The diagram has an error. Supporting tools usually show an error message rather than the code. Test it in Mermaid Live.

Quire Markdown doesn’t draw diagrams

Quire Markdown is our extension, free on the Chrome Web Store. We want to be clear about this one: it doesn’t render Mermaid or other diagrams, or math. A mermaid block appears as its source in a code block, with a Copy button, so you can paste it into Mermaid Live.

It is still useful for reading everything around the diagram: the heading outline, find, tables, task lists and highlighted code, in a viewer that never changes your file. It opens UTF-8 files up to 2 MB, and images appear as blocked references. If your document is mostly diagrams, use GitHub or VS Code instead.

Quire Markdown showing a rendered document with a heading outline on the left — Quire Markdown with its outline of headings.

Questions

Does Chrome draw Mermaid diagrams in .md files?

No. Chrome shows a .md file as plain text, so a Mermaid block is just text. You need a tool that renders Markdown and supports Mermaid.

Is Mermaid part of Markdown?

No. It is a separate diagram language. Markdown only carries it inside a code block, and each tool decides whether to draw it.

More guides

All guides · Quire homepage