...
Log into your Confluence instance as an admin.
Click on “Apps > Manage apps” in the header menu.
Click on “Find new apps” on the right navigation.
Search for “Mermaid Charts & Diagrams for Confluence” and select it.
Click on “Try it free” to install the app.
Usage
Macros “Mermaid diagram” and "Mermaid diagram (Remote)"
Mermaid Charts & Diagrams for Confluence provides two macros called “Mermaid diagram” and "Mermaid diagram (Remote)" that can be added to any Confluence page. Both macros can be added by clicking the “Insert” / “+” Button in the edit mode and selecting respective macro.
...
Theme: Option to define how the diagram should be rendered (“Default” automatically renders the diagram based on the users' current Confluence theme)
Allow download: Add a button to download the Mermaid diagram as image (PNG or SVG) or the Mermaid source code
Allow fullscreen: Add a button to show the Mermaid diagram in a fullscreen dialog
Allow copy to clipboard: Add a button to copy the Mermaid source code to the clipboard
Allow pan & zoom: Add buttons to pan and zoom (when viewing the Mermaid diagram)
Do not shrink to fit available width: Set Mermaid option “useMaxWidth: false” if available for the diagram type
Height: Height in pixel that are used to render the macro (leave blank to use as much height as the diagram needs)
Zoom: Optional zoom factor to resize the rendered diagram (between 1 and 100)
Export width: Optional width for the Confluence PDF export in percentage (between 1 and 100)
...
The version dropdown in the top right corner of the macro editor allows you to switch between the last 20 versions of the macrodiagram. The An “Unsaved draft” version is automatically added whenever you change a version and while editing the diagram, which allows you to switch back to the last unsaved version of the diagramalways switch between previously saved versions and your work-in-progress. This "Unsaved draft" is lost when closing the editor without saving. Please note that this versions are managed “in parallel” to the versions of the Confluence page the macro is placed on. In other words, every version of the Confluence page stores all diagram versions that existed at the time the Confluence page was created.
The “Mermaid diagram (Remote)” macro editor looks as follows and requires the option “URL” to define the remote location of the Mermaid code:
...
Use the option “Server side” “Server side” to load remote content from the server side to overcome CORS issues.
App configuration
As a Confluence administrator you can access the app’s global configuration page via the “Configure” button under “Apps > Manage apps”.
...
The app offers the following (global) settings which are applied to all Mermaid Charts & Diagrams for Confluence macros (in all spaces):
Data Protection Mode: If enabled, all data processing takes place only within the Atlassian cloud and within the user's browser. This is implemented by disabling those features where data processing on the app’s servers (managed by weweave) is required.
Hide “Data Protection Mode” errors in Confluence PDF exports: If enabled (only possible in combination with enabling “Data Protection Mode”), Confluence PDF exports do not include macros (errors). Instead, macros are just “skipped” in exports.
...
Confluence Data Center & Confluence Server
...
The Mermaid code can be added as macro body and the macro is rendered after publishing /updating the page.
...
Mermaid diagram configuration
When rendering the Mermaid code we automatically apply some Mermaid configurations for specific diagram types which are documented below.
Architecture diagram
The Iconify icon pack “logos” is included when rendering architecture diagrams and the icons are available under the prefix “logos” (see https://mermaid.js.org/syntax/architecture.html#icons).
Please note that icons included in icon packs are currently not supported when exporting the diagram (as image or Confluence page).