CloudScript.io Mermaid
CloudScript.io Mermaid lets you write Mermaid diagram code directly on a Confluence page and have it rendered as a diagram in place. It is a Confluence Cloud app built on Atlassian Forge, and each diagram is drawn in your browser when the page is viewed.
Adding a diagram
Edit a Confluence page, insert the Mermaid Diagram macro (type /Mermaid in the editor, or choose it from the macro list), then open the macro's configuration panel and enter your Mermaid code. Choose a theme, decide whether to show the diagram source beneath the diagram, then save the macro and publish the page. The diagram is rendered when the page is viewed.
To show several diagrams on one page, add a separate Mermaid Diagram macro for each one; each macro holds and renders its own diagram independently.
Configuration options
The macro's configuration panel exposes three settings. The first is the diagram source, a text box where you paste or write your Mermaid code (for example graph TD followed by your nodes and edges). The second is the theme, chosen from Default, Forest, Dark, and Neutral, which controls the diagram's colours. The third is Show source below diagram, a checkbox that, when ticked, prints the original Mermaid code in a panel underneath the rendered diagram (useful for documentation pages where readers may want to copy the source).
Supported Mermaid version
The app renders with Mermaid version 11 (11.15.0 at the time of writing). Diagram syntax therefore follows the Mermaid v11 specification; the Mermaid documentation at mermaid.js.org is the authoritative reference for syntax, and any diagram type or syntax feature available in Mermaid v11 is available here.
Supported diagram types
Because the app passes your code straight to the Mermaid rendering engine, it supports the full range of diagram types provided by Mermaid v11, which includes flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship (ER) diagrams, Gantt charts, pie charts, Git graphs, user-journey diagrams, mindmaps, and timelines, among others. If a diagram type is valid in Mermaid v11, it will render in the macro.
Layout engines (ELK)
In addition to Mermaid's default layout, the app supports the ELK layout engine for flowcharts and other node-based diagrams, which often produces tidier routing and spacing on larger, more complex diagrams. To use it, set the layout in the diagram's frontmatter, for example:
---
config:
layout: elk
---
flowchart TD
A --> B --> C
A --> CExporting your page
Diagrams are included when you use Confluence's built-in Export to PDF, so a page exported to PDF shows each diagram as it appears on the page, with no extra steps. Export to Word is coming soon and is not available in the initial release.
Coming from the previous (Connect) version
If you used the earlier version of the app, diagrams you created previously continue to work; the macro reads the diagram code stored by the older version, so existing pages keep rendering without you needing to re-enter their source.
Troubleshooting
If a macro shows the message "No diagram yet", the macro has no source code saved, so open its configuration and add your Mermaid code. If a macro shows a "Diagram error" message, the Mermaid code contains a syntax error; check the code against the Mermaid documentation, and the error text shown will indicate where the problem is. For anything else, see the Support page.
Legal
Terms and privacy specific to this app: