Quick Start

1. Paste Mermaid into a comment

Add a comment to an issue with a code block set to mermaid:

flowchart TD
    A[Retry arrives] --> B{Idempotency key seen?}
    B -->|Yes| C[Return the first result]
    B -->|No| D[Charge the card]

Expand Mermaid diagrams on the right of the issue. The comment's diagram is there, with a button that takes you back to the comment.

2. Add a diagram from the editor

In the Mermaid diagrams section, click +.
Click Templates and pick Sequence, then change it to fit your issue.
Use the toolbar above the preview to pick a theme, the hand-drawn look or a direction.
Click Save diagram.

3. Choose how to see them

With more than one diagram, the button next to + switches between:

Tabs: one diagram at a time (the default)
List: all of them, one under another
Grid: thumbnails; click one to open it full size

Your choice is remembered in your browser and applies on every issue.

4. Look closer

Hover over a diagram to show its toolbar: zoom, Open large, Edit, Delete, Download PNG and the Mermaid code. Open large shows the diagram full size and steps through the rest with the arrow keys.

5. Add your brand colours (admins)

Open Jira settings → Apps → Mermaid diagram themes and create a theme. It appears in every editor's Theme menu. See Colour themes.

Documentation