Confluence Cloud

Installation

As any app for Confluence Cloud, you can install the app via the Confluence admin menu.

1. Log into your Confluence instance as an admin.

2. Click on “Apps > Manage apps” in the header menu.

3. Click on “Find new apps” on the right navigation.

4. Search for “Mermaid Charts & Diagrams for Confluence” and select it.

5. Click on “Try it free” to install the app.

Usage

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.

The macro “Mermaid diagram” allows you to define the textual description (referred as Mermaid code) of the chart or diagram you would like to show on the Confluence page whereas "Mermaid diagram (Remote)" enables you to load the Mermaid code from a remote location / URL or a Mermaid Live Editor URL. More information regarding the textual representation can be found in the official documentation of the Mermaid library the Confluence app is based on.

Moreover, both macros support the following customizing options:

• 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

• 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 “Mermaid diagram” macro editor looks as follows:

The version dropdown in the top right corner of the macro editor allows you to switch between the last 20 versions of the macro. A “Unsaved draft” version is automatically added whenever you change a version and allows you to always switch back to the last unsaved version of the diagram. 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:

Use the option “Server side” to load remote content from the server side to overcome CORS issues.

Confluence Data Center & Confluence Server

Installation

As any app for Confluence Server or Confluence Data Center, you can install the app via the Confluence admin menu.

1. Log into your Confluence instance as an admin.

2. Click on “Administration (cog icon) > Manage apps” in the header menu.

3. Click on “Find new apps” in the navigation.

4. Search for “Mermaid Charts & Diagrams for Confluence” and select it.

5. Click on “Try trial” to install the app.

Usage

Mermaid Charts & Diagrams for Confluence provides a macro called “Mermaid Diagram” that can be added to any Confluence page. The macro can be added by clicking the “+” Button in the edit mode and selecting the macro.

The Mermaid code can be added as macro body and the macro is rendered after publishing /updating the page.