Skip to content
MermaidViewer
Log inOpen editor

Using Mermaid in Notion, Obsidian, Confluence and VS Code

How to add Mermaid diagrams to Notion, Obsidian, Confluence, VS Code, Docusaurus and other tools — native support, plugins, and when to embed or export instead.

6 min readUpdated

Mermaid works in most tools developers and teams already use. Here's how to use it in the most popular ones — and what to do when a tool doesn't support it.

Notion

Type /code, choose Mermaid as the language and paste your diagram. Switch the block view to Preview or Split to see it rendered. Notion's Mermaid version can lag behind the latest release, so test new diagram types first.

Obsidian

Obsidian renders ```mermaid code blocks in reading and live preview modes out of the box — perfect for knowledge bases and study notes.

Confluence

Confluence Cloud needs a marketplace app for Mermaid. Alternatively, publish a diagram from MermaidViewer and embed its share link with an iframe macro, or export an SVG/PNG and attach it.

VS Code

VS Code's built-in Markdown preview supports Mermaid through extensions such as "Markdown Preview Mermaid Support". For a faster loop with AI help and exports, keep MermaidViewer open side by side.

Docs frameworks

  • Docusaurus — enable @docusaurus/theme-mermaid.
  • MkDocs Material — supports Mermaid in superfences code blocks.
  • VitePress / Astro / Next.js — use a Mermaid plugin or render client-side with the mermaid package.

Embedding MermaidViewer diagrams anywhere

Signed-in users can make a diagram public and copy an embed code (an iframe). The embed always shows the latest saved version, so updating the diagram updates every page that embeds it.