PeakDevs

For Confluence Cloud

Mermaid diagrams that draw as you type

Write Mermaid in a window with a live preview, and save. The diagram sits on your Confluence page, fitted to the width, in your colours, in light and dark. Nothing leaves Confluence.

  • Draws with Mermaid 12
  • No account, no outside calls
  • Exports to PDF
  • Free at launch

The Atlassian Marketplace listing opens at launch.

The editing window: Mermaid text with four classDef colours on the left, and the coloured order-handling flowchart it draws on the right

How it works

  1. Type /Mermaid. Insert the macro on any page, and the editing window opens.
  2. Write, and watch it draw. The text on the left, the drawing on the right, drawn again each time you pause.
  3. Save. The text goes on the page as a code block, so page history and search keep it.

Big diagrams fit the page

A wide diagram is scaled to the page's width, never below a readable size. Zoom in with the buttons, the keys or Ctrl and the mouse wheel, and drag to move around. Zoom and full screen

The whole diagram
A large order flow in four parts, from the web shop through payments and the order service to delivery, fitted to the page's width
Zoomed in
The same diagram zoomed in on its payments part, with the label of the Zoom in button showing beside the zoom buttons

Full screen for the biggest diagrams

One button opens the diagram over the whole screen, with the same zoom buttons. Escape brings you back.

The order flow open in full screen and zoomed in, with the zoom buttons and the button that leaves full screen at the top right

See the diagram while you write it

The editing window shows your text and the drawing side by side, and draws again each time you pause. Getting started

The editing window with a sequence diagram's text on the left and the numbered sequence diagram it draws on the right

Your colours, in light and dark

classDef, class, style and linkStyle draw as you wrote them. Diagrams follow Confluence's theme and keep your colours readable, and one setting keeps a diagram light. Colours and dark mode

Light theme
A release flow with green, blue, red and purple boxes set by classDef, a thicker border set by style and a red link set by linkStyle, in the light theme
Dark theme
The same coloured release flow in Confluence's dark theme, with its colours kept and light lines and labels

A clear error, never a blank box

A mistake shows the line it is on, a plain sentence about what is wrong, and your text with that line marked. Mermaid's own message is one click away. Error messages

An error panel: line 3, a bracket here is never closed, with the diagram text below and line 3 marked

Diagrams in your PDF exports

Confluence's PDF export prints your diagrams, also big diagrams and pages with many diagrams. A Word export shows the diagram text. PDF and Word export

A PDF page with a title, a short paragraph, a release flow and a large order flow, as the app prints them

Your text stays on your page

The diagram text is a code block on the page, so page history and search keep it. Already have Mermaid code blocks? An empty macro draws the one on the page, with no retyping. Code blocks already on the page

Your Confluence page holds the diagram text as a code block; the app reads it and draws the diagram on the same page YOUR CONFLUENCE PAGE Code block flowchart TD Plan --> Build Build --> Ship Kept by page history Found by search Readable without the app draws Plan Build Ship

Draws with Mermaid 12

Flowcharts and sequence diagrams, and also state, class and entity relationship diagrams and Gantt charts, all drawn by a current Mermaid. Limits

State diagram
A state diagram of a document going from draft through review to published and archived
Class diagram
A class diagram of a customer, an order and its lines
Entity relationship diagram
An entity relationship diagram of customers, orders, lines, products and invoices
Gantt chart
A Gantt chart of a release plan with design, build, tests, review and a release milestone

Nothing leaves Confluence

The app runs on Atlassian Forge, Atlassian's own platform for apps. It reads only the page a diagram is on, and it has no permission to store data or to contact any address outside Confluence.

  • No account. Nobody signs in to anything.
  • No storage. The diagram text is in your page, nowhere else.
  • No outside calls. The app's permissions allow none.
  • No script from text. Diagram text cannot run as script.

Security and data

Inside Confluence Cloud: your page and the app on Atlassian Forge, which may read the page. Calls to an outside server, a sign-in account or an outside store are blocked. CONFLUENCE CLOUD Your page diagram text Mermaid app on Forge Permission: read the page No permission to store data No permission to reach any outside address Outside server Sign-in account Outside store

Price

Free at launch. A paid plan for larger sites follows, announced 60 days ahead. Sites of up to 10 users stay free for good.

The Atlassian Marketplace listing opens at launch.

Help

Start here

Using diagrams

  • Zoom and full screenHow a Mermaid diagram is sized on the page, and how to zoom, move and view it full screen, by mouse, trackpad, touch or keyboard.
  • Colours and dark modeWhich Mermaid colour statements draw as written, how diagrams follow Confluence's dark theme, and how to keep one diagram light.
  • PDF and Word exportWhat a Mermaid diagram looks like in a Confluence PDF or Word export, and what happens to tall diagrams and pages with many diagrams.
  • A diagram is missing from the PDFA Confluence PDF shows a note and the diagram's text instead of the drawing. Why it happens, and how to fix it in five steps with pictures.
  • When a diagram does not drawWhat each message of the Mermaid macro means, and what to do about it.
  • LimitsHow large a Mermaid diagram can be, why nothing loads from outside Confluence, and what the app does not support.

For Confluence admins

Support and policies