/
Documentation

Documentation

Confluence Cloud

Please check out our YouTube video or our Live Demo to get an idea about how Mermaid Charts & Diagrams for Confluence (Cloud) works.

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

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.

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)

  • Look: Option to define the look of the rendered diagram ("hand drawn" is supported for flowcharts and state diagrams)

  • 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 โ€œMermaid diagramโ€ macro editor looks as follows:

image-20240229-160045.png

The version dropdown in the top right corner of the macro editor allows you to switch between the last 20 versions of the diagram. An โ€œUnsaved draftโ€ version is automatically added while editing the diagram, which allows you to always 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โ€ 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

Please check out our YouTube video to get an idea about how Mermaid Charts & Diagrams for Confluence (Data Center & Server) works.

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.

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).