Documentation

Mermaid Diagrams Live Editor for Jira

Keep Mermaid diagrams on the Jira issues they describe. Several titled diagrams per issue, a live-preview editor, crisp SVG, a click-to-zoom viewer, light and dark themes, and the latest Mermaid release bundled with the app.

Get it on the Marketplace Support

Install

A Jira site administrator installs the app from the Atlassian Marketplace (Apps → Explore more apps → search “Mermaid Diagrams Live Editor”).
Open any issue. The first time, click the apps button under the issue title and choose Mermaid diagrams. The panel then stays on that issue.

Add and edit diagrams

In the Mermaid diagrams panel, click Add diagram. The editor opens with code on the left and a live preview on the right.
Give the diagram a title (optional), pick a theme (match Jira, light or dark), or start from one of the templates: flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline, git graph.
Click Save. The diagram appears in the panel for everyone who can view the issue. Use Edit and Delete on each diagram; up to 20 diagrams per issue.

Viewing

Diagrams render as SVG at the panel’s full width, so text stays sharp at any size.
Click Expand, or double-click a diagram, to open the full-screen viewer. Scroll to zoom, drag to pan, double-click to zoom in. Keyboard: + / - zoom, 0 fit to window, 1 actual size, Esc close.
With Theme set to “Match Jira”, diagrams redraw automatically when you switch Jira between light and dark mode.

Supported syntax

The app bundles the current Mermaid release and renders with it directly: all diagram types, classDef and style directives, %%{init}%% configuration and themes work as documented at mermaid.js.org. Diagrams are rendered in Mermaid’s strict mode: HTML inside labels is not interpreted and clickable links in diagrams are disabled.

Permissions

Anyone who can view an issue can see its diagrams. Anyone who can view the issue can add, edit or delete diagrams on it (the app does not add permissions of its own). The app does not record who created or edited a diagram.

Limits

Up to 20 diagrams per issue and 50 KiB of Mermaid text per diagram.
Diagrams are not included in Jira exports, printing or the Jira mobile apps.
Deleting an issue deletes its diagrams. Moving or cloning an issue does not copy them.

Where your data lives

Diagrams (issue ID, title, Mermaid source, theme and timestamps) are stored in Atlassian’s Forge hosted storage, inside your Atlassian site’s data boundary. The app has no servers of its own and sends nothing outside Atlassian. Rendering happens in your browser. See the privacy policy.

Troubleshooting

Symptom	What to check
I cannot find the panel on an issue	Click the apps button under the issue title and choose Mermaid diagrams.
“Mermaid syntax error” on the issue	Open the diagram with Edit: the preview shows the exact message. Compare at mermaid.live.
The panel shows “license inactive”	A Jira admin needs to renew the app’s subscription on the Atlassian Marketplace. Existing diagrams keep displaying.

Changelog

1.0 — First release: diagrams on issues, live editor, latest Mermaid bundled, full-screen zoom viewer, light and dark themes.