Does Notion support all Mermaid diagram types?

Notion supports most Mermaid diagram types but may not include the very latest additions. Flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, pie charts, and state diagrams all work. Newer types like sankey or packet diagrams may not be available yet.

Can I style Mermaid diagrams in Notion?

Notion uses its own Mermaid theme that matches the page's light/dark mode. You cannot customize colors directly in Notion. For custom-styled diagrams, export as PNG or SVG from our editor and embed as an image.

How do I make the diagram bigger in Notion?

Click the diagram to expand it to full width. Notion also supports toggle blocks — put your Mermaid code block inside a toggle for a clean layout.

Mermaid Diagrams in Notion

Notion supports Mermaid diagrams natively through code blocks. Type /code to create a code block, select 'Mermaid' as the language, and your diagram renders inline. No extensions needed.

Step-by-Step Guide

Create a Mermaid code block

Type /code in any Notion page to insert a code block. Click the language selector in the top-right of the block and choose 'Mermaid'. Paste or type your Mermaid code.

Write your diagram code

The code block shows a live preview of your diagram below the code. Flowcharts, sequence diagrams, ER diagrams, Gantt charts, and most Mermaid diagram types are supported.

flowchart LR
    Idea --> Design --> Build --> Ship

Toggle between code and preview

Click the diagram preview to expand it. Click the code block header to collapse back to edit mode. The diagram updates automatically as you type.

Design complex diagrams in our editor

Notion's code block has limited editing space. For complex diagrams, design in our editor with live preview, autocomplete, and error highlighting, then copy-paste the final code into Notion.

Tips

•Notion's Mermaid renderer may lag behind the latest Mermaid.js version — test newer syntax in our editor first
•You can embed diagrams in Notion database pages and templates
•Notion's dark mode can affect diagram colors — preview in both themes
•For team wikis, Mermaid diagrams stay editable by anyone with page access

Design Your Diagram First

Use our editor with live preview, autocomplete, and theming — then copy-paste into Notion.

Open Editor

Frequently Asked Questions

More Integrations

GitHub

GitHub natively renders Mermaid diagrams in markdown files, issues, pull requests, discussions, and wikis. No plugins or extensions needed — just wrap your Mermaid code in a fenced code block with the 'mermaid' language identifier.

VS Code

VS Code's built-in markdown preview renders Mermaid diagrams natively. For an even better experience, extensions like Mermaid Markdown Syntax Highlighting and Mermaid Chart add live editing, syntax highlighting, and export capabilities.

Confluence

Confluence doesn't render Mermaid natively, but several marketplace apps add support. The most popular is the 'Mermaid Diagrams for Confluence' app. Alternatively, export diagrams as SVG/PNG from our editor and embed them.

Obsidian

Obsidian renders Mermaid diagrams natively in reading view and live preview. No plugins needed. Just add a mermaid code block to any note and switch to reading mode to see the rendered diagram.

Markdown

Mermaid integrates with markdown through fenced code blocks. The syntax is universal: wrap Mermaid code in triple backticks with 'mermaid' as the language identifier. Many platforms render these blocks natively, and those that don't can use build-time plugins.