Get started with Mermaid Diagrams

In about 5 minutes you'll install Mermaid Diagrams and add your first diagram to a Confluence page or a Jira work item.

Before you begin

• To install the app, you need to be a Confluence admin or Jira admin (or a site admin). If you aren't one, ask your admin to install it, then start at Add your first diagram.
• To add a diagram, you need permission to edit the Confluence page, or the Edit work items permission in the Jira space.

Install the app

The Confluence and Jira apps are separate Marketplace listings. Install the one for each product you use:

• Mermaid Diagrams Macro for Confluence
• Mermaid Diagrams for Jira

1. In Confluence or Jira, select Apps > Explore more apps.
2. Search for Mermaid Diagrams, then select Apportunity: Mermaid Diagrams Macro for Confluence or Apportunity: Mermaid Diagrams for Jira.
3. Select Get app (or Try it free) and follow the prompts.

When the installation finishes, the app works for everyone on the site. There is nothing to configure.

Add your first diagram

Confluence

1. Open a page and select Edit.

2. Type /mermaid and select Mermaid Diagram. You can also select Insert (+) and search for Mermaid Diagram.

   

3. In the new macro, select Create diagram. The diagram editor opens.

   

4. Under Start your diagram, select Start from a snippet, pick a diagram such as Flowchart, and select Insert.

5. Change the code on the left. The preview on the right updates as you type.

6. Select Save and close, then publish the page.

Done! Everyone who can view the page now sees your diagram. To change it later, hover over the diagram and select Edit diagram. You don't need to put the page in edit mode.

Jira

1. Open a work item.

2. Under the summary, select View app actions (the apps icon) > Mermaid Diagrams. The Mermaid Diagrams panel is added to the work item, and the diagram editor opens.

   

3. Under Start your diagram, select Start from a snippet, pick a diagram such as Swimlane Process, and select Insert.

4. Change the code on the left. The preview on the right updates as you type.

5. Select Save and close.

   

Done! Everyone who can see the work item now sees the diagram in its Mermaid Diagrams panel. To show the panel on every work item, open the panel's ••• menu and select Show for all work items.

Next steps

• Edit a diagram: the editor, errors, display sizes and saving.
• Import diagrams: bring in diagrams from Mermaid Live, .mmd files or Markdown.
• Mermaid code in your content: draw the Mermaid code blocks already on your pages and work items.
• Use cases: ideas for architecture docs, process maps and release plans.