Mermaid Diagrams & Flowcharts

Write a diagram as plain text in a Confluence page and see it rendered as clean, scalable SVG — themed to match your site, readable at any size, and rendered entirely inside your own browser.

Getting started

1. Install the app from the Atlassian Marketplace.
2. On any Confluence page, type /mermaid and choose Mermaid Diagram.
3. The editor opens with a working two-node flowchart already rendering. Edit it, or pick a diagram type from the Insert menu, and save.

There is no template to choose and no setup step. The macro is valid and savable the moment it is inserted.

Supported diagram types

Flowcharts, sequence diagrams, class diagrams, state diagrams, entity relationship diagrams (ERD), Gantt charts, pie charts, user journey diagrams, mindmaps, timelines, Git graphs, quadrant charts, requirement diagrams, C4 context diagrams, Sankey diagrams, XY charts, block diagrams, packet diagrams, Kanban boards, architecture diagrams, radar charts and treemaps.

Diagram syntax is Mermaid, an open-source project we are not affiliated with. Their documentation is the reference for the syntax itself.

The editor

• Live preview updates about a third of a second after you stop typing.
• Click a shape to jump to its source. Clicking a box, edge or subgraph in the preview moves the cursor to the line that declares it and highlights it.
• Errors tell you where. A syntax error shows the line number and marks it in the gutter, and your last working diagram stays on screen while you fix it.
• Paste from anywhere. If you copy a diagram that includes the Markdown ```mermaid fence, it is stripped automatically.
• Unsaved work is recoverable. If the dialog closes with changes in it, reopening offers them back for the next hour.

Display options

• Theme Match Confluence (follows light/dark automatically), or pick a fixed theme.
• Layout Standard, or ELK for denser graphs. Both are bundled — nothing is fetched.
• Width Natural size (never enlarged beyond how it was laid out) or Fill width.
• Alignment Left, centre or right.
• Alt text A description read by screen readers in place of the diagram.
• Click to zoom Opens a fullscreen viewer with pan and zoom from 0.25× to 8×.

Very tall diagrams get a bounded, draggable viewport on the page instead of stretching down it. Scrolling still scrolls the page — hold Ctrl to zoom.

Exporting

Any diagram can be downloaded as SVG or PNG (at 1×, 2× or 3×), and its source copied, from the toolbar that appears when you hover over it.

Your diagrams keep working

Each diagram records the Mermaid version it was authored against and renders with that version. When a new major version of Mermaid arrives, upgrading is per-diagram and opt-in. An update to this app will not silently redraw diagrams you have already published.

Permissions and data

Your diagram source is stored in the Confluence page itself, as part of the macro you are editing. That means it is versioned in page history, searchable, and copied, moved, exported and deleted along with the page — exactly like anything else you write.

Rendering happens in your browser. The app makes no outbound network requests of any kind; the diagram engine is bundled into it rather than fetched. There is no account to create, no external service, and no server of ours involved at any point.

Full detail is in our privacy policy.

Limits

• Diagram source is capped at 256 KB, with a warning well before that.
• A render that takes longer than five seconds is stopped and reported.
• HTML inside diagram labels is rendered as plain text rather than as markup. This is deliberate: it removes an entire class of security problem that has affected diagram renderers before.
• Clickable links inside diagrams are not enabled, for the same reason.

Pricing

Current pricing is shown on the Atlassian Marketplace listing.

Help

Email support@woodcotesystems.com.