Installation

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

1. Log into your Jira 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 Jira” and select it.

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

Usage

Mermaid Charts & Diagrams for Jira provides an app that allows you to add beautiful diagrams defined with a textual descriptions. A documentation of the textual description can be found here https://mermaid.js.org/. To add a diagram to an issue, select the app as shown in the screenshot below.

Open

This should add a new section to the issue looking as follows:

Open

To define the diagram code, click the “Edit diagram” button and enter the textual description (Mermaid code) of the diagram in the editor and click “Submit”:

After saving the Mermaid code, the rendered version of the diagram is shown. On this view, you can click the download icon to download the diagram as PNG image.

The button “Add to description” saves the diagram as image attachment and adds this image to the issue’s description. Please note: The generated image is a "snapshot" of the diagram, i.e. after updating the Mermaid code, you have to click the button again and remove the old image from the description if you want to reflect the Mermaid diagram updates also in the issue's description.

JQL support

The Mermaid code can by queried via JQL by using the property “mermaidCode”. To search issues with a Mermaid diagram containing a keywords use the ~ operator as follows:

The property “mermaidCount” can be used to query for issues that contain or do not contain any Mermaid diagram. To find issues with a Mermaid diagram use

and to find issues that do not have any Mermaid diagram use

The property “mermaidCount” can be also used to query for issues by the number of Mermaid diagrams as follows (the example finds issues with two or more diagrams):

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