Guide · Mermaid in Confluence
How to Embed Mermaid Diagrams in Confluence
Confluence has no built-in Mermaid rendering. Marketplace apps can add it, but they cost money per user and need a site admin to install — a blocker on most company wikis. The zero-permission alternative: render the Mermaid diagram in your browser, export a high-resolution PNG, and upload it to the page like any other image. It works in every Confluence plan, Cloud or Data Center.
No signup · No watermark · No Marketplace app · No admin approval needed
Does Confluence render Mermaid natively?
Out of the box, Confluence Cloud and Data Center do not render Mermaid syntax. Paid Marketplace apps (such as Mermaid diagram macros) add live rendering, but they require admin installation, per-user licensing, and they keep the diagram locked to that app. An exported PNG needs none of that: anyone who can edit a page can add the diagram, and it displays for every viewer regardless of which apps the site has.
Add a Mermaid diagram to a Confluence page
- 1
Paste your Mermaid code
Drop your architecture flow, sequence diagram, or ERD code into the converter below. Rendering happens locally in your browser — internal system designs never leave your machine.
- 2
Style it for the wiki
Clean Docs on white matches Confluence's document look. For architecture pages that get screenshot into slides later, consider exporting a second transparent copy.
- 3
Export a PNG at 2x
A 2x PNG keeps node labels sharp when readers zoom or when the page is exported to PDF. PNG previews reliably inline in Confluence, unlike SVG attachments.
- 4
Upload to the page
Drag the PNG into the Confluence editor, or use the image/attachment insert. Add the Mermaid source in a code block below the image so teammates can regenerate it.
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.
Export controls activate after your diagram renders locally.
Which format works best in Confluence?
PNG displays inline in every Confluence plan and PDF export. 2x scale keeps dense architecture diagrams readable without zooming.
Confluence stores SVG uploads as attachments and inline preview varies by configuration. Stick to PNG unless you control the site settings.
Paste the Mermaid code in a code block under the image. Anyone can copy it back into the converter, update the diagram, and replace the PNG.
FAQ
Questions about this workflow
Can Confluence render Mermaid without a Marketplace app?+
No. Confluence has no built-in Mermaid engine. Either install a paid Marketplace app (requires a site admin) or insert the diagram as an exported PNG image, which works on every plan with no installation.
Why not just use a Mermaid Marketplace app?+
Apps add per-user cost, need admin approval that many teams cannot get, and tie your diagrams to that specific app. A PNG plus the Mermaid source in a code block is portable and free.
Do SVG files work in Confluence?+
SVG uploads become attachments and whether they preview inline depends on the site's configuration and security settings. PNG is the format that displays reliably for every viewer.
How do teammates edit a diagram that was inserted as an image?+
Keep the Mermaid source in a code block next to the image. A teammate copies the code into the converter, makes the change, exports a new PNG, and replaces the attachment on the page.