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, create a code block with the language set to mermaid in the Jira editor:

```mermaid

flowchart LR

A[Start] --> B[Process]

B --> C{Decision}

C -->|Yes| D[Done]

C -->|No| B

```

Supported Diagram Types

Flowcharts
Sequence Diagrams
Class Diagrams
State Diagrams
ER Diagrams
Gantt Charts
Pie Charts
Git Graphs
Mindmaps
Timelines
Quadrant Charts
Requirement Diagrams
C4 Diagrams
Sankey Diagrams
Block Diagrams
Architecture Diagrams
Kanban
XY Charts

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 code block language is set to "mermaid" (not "text" or blank). Check the Mermaid syntax using the Mermaid Live Editor to validate your diagram.

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:

9ByNight

Email: contact@9bynight.com

Hours: Monday–Friday, 9am–5pm EST