Mermaid Integrations

Use Mermaid diagrams in your favorite tools and platforms.

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.

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.

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.