Mermaid Diagrams for Jira
Setup & Usage Guide
Installation
Install Mermaid Diagrams for Jira from the Atlassian Marketplace. It auto-renders mermaid code blocks in issue descriptions and comments.
No configuration is required. The app works immediately after installation.
Working in Confluence instead? See Mermaid Macros for Confluence, the companion app that adds a Mermaid Diagram macro to the page editor.
How It Works
The Jira app automatically scans your issue descriptions and comments for Mermaid code blocks. When it finds one, it renders the diagram inline in a dedicated panel.
To add a diagram, paste your Mermaid code into a code block in the Jira editor. You don't need to set a code-block language — Atlassian's editor doesn't list mermaid as an option, and the app recognizes Mermaid automatically from the diagram type on the first line:
```mermaid
flowchart LR
A[Start] --> B[Process]
B --> C{Decision}
C -->|Yes| D[Done]
C -->|No| B
```
Supported Diagram Types
Features
Zoom & Pan
Zoom in and out and move around complex diagrams using your mouse, trackpad, or keyboard.
Export & Copy
Download or one-click copy any diagram as SVG or PNG.
Dark & Light Mode
Theme-aware rendering automatically syncs with your Jira theme, re-rendering diagrams with the correct color palette when you switch modes.
Full-Screen & Pop-Out
Open any diagram in a larger pop-out or full-screen view for a distraction-free look at complex diagrams.
View Source
Toggle between the rendered diagram and the raw Mermaid source code to inspect or copy the syntax.
Per-Diagram Error Handling
If a diagram has a syntax error, the app surfaces a clear, per-diagram message instead of breaking the panel.
Where Diagrams Appear
- •Sidebar panel: A compact preview in the right sidebar of any Jira issue. Click "Expand" for the full view.
- •Full-width panel: Below the issue description, with full zoom, pan, and export controls.
Diagrams are detected in both issue descriptions and comments, including paginated comments.
FAQ
My diagram isn't rendering. What should I check?
Make sure the first line of the code block is a valid Mermaid diagram type (e.g. flowchart TD, graph LR, sequenceDiagram). You do not need to set the code block's language to "mermaid" — Atlassian's editor doesn't offer that option, and the app detects Mermaid automatically from the content. If it still doesn't appear, validate your syntax in the Mermaid Live Editor.
Does the app modify my Jira data?
No. The app has read-only access and never creates, modifies, or deletes any content.
Does it work with Confluence?
Yes — Confluence support is a separate app called Mermaid Macros for Confluence. It adds a Mermaid Diagram macro you insert via /Mermaid in the page editor. See the Mermaid Macros for Confluence guide for setup and usage.
Is my data sent to external servers?
No. All rendering happens in your browser — your diagram source never leaves Jira. There are no external API calls, no analytics, and no tracking. See our Security Statement for details.
Support
Need help? Reach out to us: