Mermaid Online
ToolsSign in+10

Guide · Mermaid in Confluence

How to Add Mermaid Diagrams to Confluence

Confluence — Cloud and Data Center — has no built-in Mermaid macro, so diagram code pasted into a page renders as text. Marketplace apps add one, but they are priced per user and need a space or site admin to install. The zero-install route is to render the code in your browser and paste the exported image straight into the page, which works in every Confluence instance and costs nothing.

No signup · No app install · No watermark · Local browser rendering

Does Confluence support Mermaid natively?

No — no built-in macro

Neither Confluence Cloud nor Data Center ships a Mermaid macro. The Atlassian Marketplace has several Mermaid apps, and draw.io's Confluence app can also insert Mermaid code — all of them need an admin install and most are billed per user. Pasting an exported PNG or SVG needs none of that: any page author can do it, in any space, today.

Add a Mermaid diagram to a Confluence page

  1. 1

    Paste your Mermaid code

    Drop your diagram code into the converter below. It renders locally in your browser — nothing is uploaded, which matters for internal architecture docs behind your firewall.

  2. 2

    Match your space's look

    Confluence pages are white, so the white background with the Clean Docs style reads like a native figure. If your space uses a dark theme, switch to GitHub Dark so labels stay readable.

  3. 3

    Export PNG at 2x — or SVG

    A 2x PNG stays sharp when readers zoom the page or print it. Confluence Cloud also displays SVG attachments, which scale cleanly for large architecture diagrams.

  4. 4

    Drop it into the page

    Drag the exported file into the Confluence editor — it attaches automatically and displays inline. Or use Insert → Files and images, then resize in place and add alt text so screen readers can describe the diagram.

Export your diagram here

Paste your Mermaid code below, pick a style, and download the image. Everything renders locally in your browser — no signup, no watermark.

Paste or edit Mermaid code
Replace the sample below, or load another example.
Load example
Paste Mermaid code here. Preview and export load locally in your browser.
Live previewSample preview · Clean Docs

Write

Preview

Export

Docs Asset

Render & export

Export controls activate after your diagram renders locally.

Flowchart
Mode
Default renderNative MermaidOptimized exportStyled download
Export style
Clean DocsGitHub READMEGitHub DarkTransparent DocsWarm Editorial✦ ProWhiteboard Sketch✦ ProAurora Noir✦ ProBlueprint✦ ProChampagne✦ ProEmerald Suite✦ ProEditorial✦ Pro
Scale
1x2x4x
Or exact width, e.g. 1200px wide
Output: White · comfortable padding
Size: calculated after render
Filename: mermaid-flowchart-white-2x.png

Which export works best in Confluence?

PNG at 2x — the default

Displays in every Confluence version and stays sharp when readers zoom or the page is exported to PDF. The safe choice for space-wide style guides.

SVG — for large diagrams

Confluence Cloud displays SVG attachments at any zoom level without blur, which suits wide architecture and flow diagrams that readers will pan and expand.

Skip JPG for diagrams

JPG compression softens thin connector lines and small labels. PNG gives the same size with none of the artifacts.

Mermaid in NotionMermaid in WordMermaid in GitHubMermaid to PNG converterMermaid syntax checker

FAQ

Questions about this workflow

Does Confluence support Mermaid diagrams?+

Not natively. Confluence Cloud and Data Center have no built-in Mermaid macro — you either install a Marketplace app or insert an exported image. The image route needs no app and no admin.

How do I add a Mermaid diagram to Confluence?+

Paste your code into the converter on this page, export a 2x PNG or SVG, then drag the file into the Confluence editor. It attaches to the page and displays inline — the whole workflow takes under a minute.

Is there a free Confluence Mermaid app?+

Marketplace Mermaid apps are typically billed per user, and some offer limited free tiers. If you just need diagrams in pages rather than live-editable macros inside Confluence, exporting an image costs nothing, installs nothing, and works in every space.

Is there a Mermaid macro for Confluence?+

No native one. Macros come from Marketplace apps, which render Mermaid code inside the page and usually need a paid license for your whole site. The app-free alternative is a PNG or SVG image, which any page author can paste.

Does this work in Confluence Cloud and Data Center?+

Yes. Both lack a native Mermaid macro, and both display pasted PNG and SVG images, so the export-and-insert workflow works identically in each.

How do I update a diagram after the page is published?+

Keep the Mermaid code — or this editor's Share link, which carries the whole diagram. Edit the code, re-export the image, then upload it in Confluence as a new version of the same attachment: every page referencing that attachment picks up the new image.

PNG or SVG for Confluence pages?+

PNG at 2x is the dependable default. SVG is worth it for large architecture diagrams — Confluence Cloud renders it at any zoom without blur.

Is my diagram code uploaded anywhere?+

No. Rendering happens locally in your browser, so internal diagrams behind your firewall never leave your machine.