Which Tools Support Mermaid Natively? A Checked List

TL;DR Six of the nine tools below render Mermaid with nothing installed: GitHub, GitLab, Notion, Obsidian, VS Code and the Azure DevOps wiki. Confluence, Slack and Google Docs do not. But "native" turns out to be a weaker promise than it sounds — the Azure DevOps wiki rejects the flowchart keyword outright, self-managed GitLab fails silently on a header misconfiguration, and Notion gives you exactly one theme. The catches are the useful part of this page.

The list

How this was checked

Each row was read from the vendor's own documentation on the publication date of this post, not from memory or from other people's listicles. Support status changes — Notion's arrived in 2022, VS Code's in 2026 — so a list like this is a snapshot, and one that says when it was taken is worth more than one that doesn't.

Where a vendor documents nothing, that is recorded as a finding rather than smoothed over. It is also, as it turns out, the single best predictor of whether people are confused about a tool.

The tools that do support it

GitHub

GitHub is the cleanest of the set. Diagram rendering is available in Issues, Discussions, pull requests, wikis and Markdown files — effectively everywhere you write. GitHub also renders GeoJSON, TopoJSON and ASCII STL from fenced blocks, which almost nobody knows.

GitLab

GitLab renders mermaid blocks in Markdown, and GitLab.com tracks Mermaid 10. The one to watch is self-hosting: GitLab's docs warn administrators to serve Cross-Origin-Resource-Policy: cross-origin rather than same-site or same-origin, because the wrong value makes diagrams fail to render with no error. If Mermaid works on gitlab.com and not on your instance, start there.

Notion

Notion renders ```mermaid blocks and has a /mermaid shortcut, shipped in August 2022. The oddity is documentation: Notion's help-centre page on code blocks never mentions Mermaid, and the confirmations live in the developer docs and an old release note. What you get is one fixed theme with no overrides and no export — the details are in our Notion write-up.

Obsidian

Obsidian renders a mermaid code block, with one documented limitation: internal links you put inside a diagram don't show up in the Graph view. Everything else behaves as you'd expect from a local-first editor.

VS Code

VS Code is the newest entry, and the one where common knowledge is out of date. In 1.121, Matt Bierner's Markdown Preview Mermaid Support extension was merged into VS Code as a built-in extension called Mermaid Markdown Features, covering the Markdown preview, Markdown cells in notebooks, and chats. If you last checked before that release, "VS Code needs an extension" was correct and now isn't.

Azure DevOps wiki

Azure DevOps wiki supports eleven diagram types — sequence, Gantt, flowchart, class, state, user journey, pie, requirements, gitgraph, ER and timeline — via either ::: mermaid container syntax or a standard fenced block. It also carries the sharpest catch on this page. Microsoft documents "limited syntax support", and the list of what's unsupported includes most HTML tags, Font Awesome, LongArrow ---->, and the flowchart keyword itself: you have to write graph instead. Paste a modern Mermaid flowchart into an Azure DevOps wiki and it will not render, which looks exactly like "Mermaid is broken" rather than "one keyword is unsupported".

The tools that don't

Confluence

Confluence needs an app, and which one you can use depends on hosting. Atlassian's documentation for the Code Block macro lists the languages it will syntax-highlight and says nothing about Mermaid, because there is nothing to say — the macro highlights text, it does not draw. The docs never tell you Mermaid is unsupported; they simply never mention it, which is why people paste a block, get coloured text, and go looking for a setting that does not exist.

Everything that works is an app, and the shortlist splits by hosting:

The Atlassian Labs Forge app is the cheapest route on Cloud: Apache 2.0, free, renders Mermaid from ordinary code blocks, covers the full diagram range. Two caveats before you read "Atlassian ships this" into that. It is a labs project, not an Atlassian product — atlassian-labs is where Atlassian publishes experiments, and installing it is not the same as enabling a supported feature. And Forge is Atlassian's cloud platform, so there is no Data Center or Server path here at all.

Mermaid Macros, by 9ByNight, gives you a /Mermaid command that renders inline as interactive SVG. Version 3 is free forever for teams of any size; version 4 moved to a subscription that stays free at ten users or fewer. Cloud only, rendering entirely client-side — which matters if a security review objects to diagram source leaving the tenant.

Mermaid Charts & Diagrams, by weweave, is the one to look at off Cloud: its listing covers Confluence Cloud plus Server 8.0.0–10.2.14 and Data Center 8.0.0–10.2.15. Paid, with a trial. If you are on Data Center and want in-page rendering, this is effectively the category.

The part that actually stalls is none of the above. Every one of these needs an admin to approve an installation — a Slack message in a small company, a security review and a procurement cycle in a regulated one. A hot-linked image needs no app, no admin, and behaves identically on Cloud, Data Center and Server. Marketplace pricing and version ranges move, so treat the specifics here as checked on this post's date.

Slack

Nothing renders, and the usual workaround will not save you either. Slack has two surfaces where someone might reasonably expect this to work. Message formatting lists Code block next to bold and strikethrough — a text style, no language selector. The canvas element list is longer (headings, tables, quote blocks, several kinds of unfurl, code block and code span) and still never mentions Mermaid.

The trap here is the workaround, not the answer. For Notion and Confluence the good move is a hot-linked SVG — render once, host it, embed the URL, edits propagate. Reasonable people will tell you to do the same in Slack.

Slack does not display SVG at all. Uploads accept GIF, PNG, JPG, JPEG, HEIC and HEIF; Block Kit image elements narrow that to png, jpeg, jpg and gif. SVG is on neither list, so an SVG posts as a file attachment nobody can see without downloading it. Build the pipeline first and you find this out at the end.

Two more constraints before you generate anything. An image only previews inline if it is under 25,000 pixels on the longest side and under 45 million pixels total, so a wide diagram exported at 4× can silently stop previewing. And PNG is raster — the diagram is legible at exactly the resolution you exported it at.

There is a nastier interaction if your labels are not Latin. Server-side PNG rasterisation commonly runs on Linux images with no CJK font installed, and a missing font fails quietly: Chinese, Japanese and Korean labels come out as tofu boxes. The standard advice when that happens is "export SVG instead" — the one option Slack has removed. Check the PNG before automating anything that posts unattended.

What does work: the Mermaid Preview app (Jakub Mikulas, free) registers a /mermaid command, renders your source to PNG and uploads it. Note what that is — rendering elsewhere and posting the image, wrapped in a slash command. It is the only shape a solution can take here; no app can make Slack itself render Mermaid.

Worth saying plainly: if a diagram matters enough that people will come back to it, Slack is the wrong home. Channels scroll, and there is no live-updating image path because that needs a URL in a format Slack renders. Put the diagram where your docs are, post a PNG as the notification, and link to the real one underneath.

Google Docs

Google Docs has code blocks and has expanded the programming languages they cover, but they are syntax highlighting. No Google documentation mentions Mermaid, and there is no diagram-from-text feature to find.

"Native" is doing less work than it looks like

Read the catch column again and the pattern is hard to miss. Of the six tools that support Mermaid natively:

• one rejects the keyword most modern diagrams start with (Azure DevOps)
• one fails silently on a server header (self-managed GitLab)
• one gives you a single theme you cannot change (Notion)
• one only started this year (VS Code)

Native rendering answers "will a diagram appear". It does not answer "will my diagram appear", "will it look like the rest of our documentation", or "can I get it out again as a file". Those are the questions that actually decide whether diagrams-as-code sticks in a team, and no tool on this list answers all three.

That is also why the same diagram tends to look different in every place you put it. Each renderer ships its own version of Mermaid, its own theme, and its own subset of the syntax.

If your tool is a ❌ — or a ✅ with a catch

The reliable escape hatch is the same one every time: render the diagram somewhere you control, and put an image in the tool.

• Where SVG works (Notion, Confluence, most docs sites) — host the SVG at a URL and embed the URL, so edits propagate without re-uploading.
• Where it doesn't (Slack) — export PNG, and check it if your labels are non-Latin.
• Everywhere — this also fixes the consistency problem, because one renderer produces every copy.

Wrap-up

If you only remember one row, make it Azure DevOps: it is the tool most likely to convince you Mermaid is broken when the actual problem is a single unsupported keyword. And if you are evaluating a tool not on this list, the fastest tell is not whether it renders — it is whether the vendor documents that it renders. On the evidence here, silence in the docs is what produces years of people asking the same question.