Free browser extension for rendering Mermaid diagrams in Confluence & Jira - looking for feedback
I created Atlassian Mermaid Viewer, a browser extension (free, open source) that renders Mermaid diagrams directly from Mermaid code-snippet blocks in Confluence and Jira pages. It works on Chrome, Edge & Firefox.
This lets you keep the Mermaid code as the single source of truth instead of maintaining both the Mermaid code and exported images (JPG / PNG). Whenever a diagram changes, you simply update the Mermaid code. There is no need to regenerate and replace images, which avoids a tedious workflow and eliminates the risk of the rendered diagram drifting out of sync with the source.
The extension works entirely in the browser, so it does not require any Confluence or Jira server plugins, administrator privileges, or changes to your Atlassian instance.
Write the code & update:
It auto-rendered:
Install from your preferred browser store:
- Chrome: Chrome Web Store
- Edge: Microsoft Edge Add-ons
- Firefox: Firefox Add-ons
- Source code: GitHub Repository
The default Mermaid configuration is:
- look: 'handDrawn'
- theme: 'default'
- securityLevel: 'strict' (i.e., HTML tags in labels are disabled)
If you want to change these settings:
- Create an `AMVCENTRAL` space.
- Create a `config` page in that space.
- Create a code snippet block containing the modified settings (JSON).
This central configuration applies to all users in the Atlassian organization.
Enhancing AI-Generated Content with Mermaid
If you want AI assistants such as ChatGPT and Claude to generate Mermaid diagrams directly as part of Confluence and Jira content. Use the following instruction to the AI's custom instructions:
When you edit Confluence/Jira items: Feel free to use mermaid code in Confluence code-snippet blocks (no specified language) - I use browser add-on that auto-renders the code.
A note for Atlassian organization administrators:
`securityLevel: 'strict'` is recommended because it treats Mermaid diagrams as untrusted input, reducing the potential XSS attack surface. As part of this, HTML is disabled, preventing embedded HTML from becoming active DOM elements that could execute scripts or load external resources.
The main trade-off is the loss of HTML-based formatting, such as bold and italic text. In practice, this is usually a minor limitation, since line breaks and other common formatting can still be achieved using Mermaid's native syntax.
I would appreciate feedback from the Atlassian community:
Compatibility issues
Missing features
Additional Atlassian products to support