Mermaid Diagrams in 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.

Step-by-Step Guide

1

Option 1: Install a Mermaid app from the Marketplace

Go to Confluence Settings > Find new apps > Search 'Mermaid'. Install 'Mermaid Diagrams for Confluence' or a similar app. This adds a Mermaid macro you can use in any page.

2

Option 2: Use the Mermaid macro

After installing the app, type /mermaid in the page editor to insert a Mermaid block. Paste your diagram code and it renders inline on the page.

flowchart TD
    A[Requirements] --> B[Design]
    B --> C[Implementation]
    C --> D[Testing]
    D --> E[Deployment]
3

Option 3: Embed as image (no plugin needed)

Design your diagram in our editor, export as SVG or PNG, and embed the image in Confluence using the Image macro. This works without any plugins but diagrams aren't editable in Confluence.

4

Keep diagrams in sync

For living documentation, use the Mermaid macro so diagrams are editable. For static architecture docs, export from our editor for higher quality with custom themes.

Tips

  • •Mermaid apps may require Confluence admin approval for installation
  • •Some Mermaid apps are free, others are paid — check pricing before committing
  • •SVG embeds scale better than PNG in Confluence's responsive layout
  • •For team-wide use, document the Mermaid syntax in a shared Confluence template

Design Your Diagram First

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

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.
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.
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.