Where Does Mermaid Render Natively? Tool Support in 2026

Mermaid is text. Whether that text turns into a diagram depends on the program showing it. GitHub does it. Notion does it. Confluence does not, and neither does the Markdown preview built into VS Code.

This is the list we check before putting a diagram somewhere. "Native" means a fenced mermaid block renders with no setup. "Plugin" means a supported, documented add-on does it. "No" means you need an image or a link.

The fenced block every tool looks for

Across every tool in the table, the syntax is the same: a fenced code block with the language tag mermaid, lowercase.

```mermaid
flowchart LR
    Write[Write Mermaid] --> Commit[Commit to repo]
    Commit --> Render[GitHub renders it]
```

Tool support table

Tools we could not confirm are left out rather than guessed. If your tool is missing, paste the block above into it. Either a diagram appears or it does not.

Code hosting and wikis

GitHub added Mermaid in 2022 and it now works everywhere Markdown does: READMEs, issue bodies, pull request descriptions, discussion threads, and wikis. GitLab and the Gitea family match it. Azure DevOps wikis render a subset; if a type fails there, check the type guide for an older equivalent (a flowchart instead of a block diagram, for instance).

Bitbucket is the notable gap. For a Bitbucket README, commit a PNG next to the Markdown and reference it with a normal image tag. Keep the .mmd source in the repo so the next person can edit it.

Note-taking apps

Notion renders Mermaid inside a code block once you set the block's language to Mermaid. You get a toggle for code, preview, or both side by side. Obsidian, Joplin, Typora, and Logseq all render fenced blocks in their preview or reading modes without any plugin.

The shared limitation: these apps use whatever Mermaid version they shipped with, and you cannot pick the theme or adjust layout spacing. When the default look is not good enough, render in MermanDraw, pick one of the seven themes, and paste the exported image into the note.

Documentation generators

Static site generators need one plugin, and in most cases it is a first-party one.

// docusaurus.config.js
module.exports = {
  markdown: { mermaid: true },
  themes: ['@docusaurus/theme-mermaid'],
};

# mkdocs.yml
markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

VitePress, Astro, and Hugo each have community plugins or a documented render-hook recipe. The approach is the same in all three: intercept the fenced block at build time and either inject the Mermaid script or pre-render to SVG. Pre-rendering is faster for readers and does not depend on client JavaScript.

What to do where it does not render

Confluence, Jira, Google Docs, Office, and chat tools fall into this group. Decide between two options.

flowchart LR
    Source[Markdown file] --> Host{Host renders Mermaid?}
    Host -->|Yes| Native[Native diagram]
    Host -->|No| Image[Export PNG or SVG]
    Image --> Embed[Embed the image]

• Embed an image. Export SVG for Word, PowerPoint, and Keynote (scales cleanly). Export PNG for Google Docs, Google Slides, Slack, and email. The editor's PNG export is 2× resolution so it stays sharp on high-density screens.
• Share a link. The Share button creates a page with the live diagram and an Open Graph preview image, so Slack and Teams show a thumbnail. Anyone can open it and edit a copy; no account needed. Links stay alive as long as someone views them at least once every 180 days.

For Confluence specifically there are Marketplace macro apps that render Mermaid inside a page. The Confluence and Jira post walks through the macro route and the image route.

Version differences

"Native" does not mean "identical". Each host bundles a specific Mermaid release and upgrades on its own schedule. Three things vary:

• Diagram types. architecture-beta, block-beta, sankey-beta, and xychart-beta arrived in Mermaid 10 and 11. A host on an older version shows a parse error.
• Syntax. Markdown strings in labels (["`**bold**`"]), new flowchart shapes, and stateDiagram-v2 features depend on version.
• Appearance. Default fonts, colors, and spacing differ. A diagram that fits on one screen in GitHub may wrap differently in Notion.

If a diagram fails on a host but renders in the editor, it is almost always one of the first two. The common errors post covers the case where the code itself is wrong.

FAQ

Related

• How to add Mermaid diagrams to a GitHub README
• How to export Mermaid to PNG and SVG — for every tool in the "No" column.
• Mermaid cheatsheet — all 19 diagram types with copy-paste examples.