Documentation

Sharp Mermaid — Diagrams for Confluence

Getting started

In a Confluence page, type /Mermaid or use the + insert menu
Choose Sharp Mermaid Diagram
Paste or type your Mermaid source on the left; the preview updates as you type
Click Save diagram — or Cancel to leave without saving. If you have unsaved edits, Cancel asks once before discarding them.

Editing an existing diagram

Select the diagram, then click the pencil icon in the toolbar that appears beneath it.

The icon at the top-left of the macro is a drag handle for moving the diagram around the page, not an edit button.

Viewing controls

Control	What it does
− / +	Zoom out and in
Reset	Back to 100% and re-centred
Drag	Pan around
Ctrl (or Cmd) + scroll	Zoom
Double-click	Zoom in

Supported diagram types

Everything Mermaid 11 supports: flowcharts, sequence, class, state, entity-relationship, user journey, Gantt, pie, quadrant, requirement, gitgraph, mindmap, timeline, sankey, XY chart, block, packet, architecture and kanban.

Example

graph TD
  Browser --> LoadBalancer
  LoadBalancer --> API
  API --> Database
  API --> Cache

Limits

About 1,200 lines per diagram. Beyond that Mermaid's layout engine becomes unreliable, so Sharp Mermaid declines to render and tells you the size rather than freezing your page. Split very large diagrams into several smaller ones.
Confluence Cloud only. Data Center is not supported.

Size on page

In the editor, Size on page controls how big the diagram rests at for everyone reading it. It is saved with the diagram.

Setting	What it does
Fit to page (default)	As large as the diagram can be while staying fully visible — filling the page width where there is room, and staying within the visible area for tall diagrams.
Large (75%)	Three quarters of that size.
Medium (50%)	Half of it.
Small (25%)	A quarter — for a diagram that illustrates a point rather than being the point.
Actual size	Mermaid's natural size, scaled down only if it will not fit.

The live preview in the editor always shows the diagram as large as its pane allows, so you can read it while checking it. It deliberately does not shrink with this setting — that pane is narrower than the page column, so a smaller render there would not be the true size. To see the real size, save and look at the diagram in the page.

This is saved as a setting rather than a fixed width, so it is recomputed against each reader's own column — it stays correct with the sidebar open or closed, on a split screen and on a phone. Zoom, by contrast, is temporary and personal: it changes what you see now and nothing for anyone else.

The viewing area grows as you zoom

There is no separate expand button. As you zoom in, the viewing area grows with the diagram so there is more of it on screen, up to a maximum height — after that, drag to pan. A diagram narrower than the page is shown at its natural size with no empty space around it.

Theme

The diagram follows your Confluence colour mode automatically. There is no setting to change.

Troubleshooting

"Diagram error" with a parse message

A syntax problem in the Mermaid source. The message names the line. The Mermaid live editor is useful for checking syntax.

Diagram is blank on first open

The Mermaid renderer loads on demand and can take a few seconds on the first diagram in a session. Give it a moment before assuming something is wrong.

Diagram too large

See Limits above.

Support

support@inklineapps.com