Clickable Diagrams for Confluence

SVG, draw.io, Mermaid and PlantUML diagrams with every link inside them working.

Confluence renders a diagram as a flat picture. The links inside it are dead, and nobody can click a box to reach the page behind it. This app brings those links back — and reads four diagram formats, not one.

Getting started

Attach your diagram to a Confluence page, the same way you attach any file.
Edit the page, type /Clickable SVG and pick the macro.
Publish. The diagram appears with its links working.

If the page has several diagrams, the macro shows the first one. Open the macro settings to pick a specific file.

Which diagrams it reads

Format	File	How it is shown
SVG	`.svg`	Displayed as-is, after unsafe content is stripped. Works with anything that exports SVG: Illustrator, Inkscape, Figma, Visio, Lucidchart.
draw.io	`.drawio`, `.drawio.svg`	Read directly and drawn by the app. You do not have to export anything — keep drawing in draw.io as usual.
Mermaid	`.mmd`, `.mermaid`	The diagram is written as text; the app draws the picture. Flowcharts (`graph` and `flowchart`) in all four directions.
PlantUML	`.puml`, `.plantuml`, `.iuml`	Also written as text. Relationship diagrams: components, deployment, simple graphs. Shapes follow the keyword — `database` becomes a cylinder, `cloud` a cloud, `actor` an oval.

For Mermaid, links are set the usual way, with a click line: click A "https://example.com". A link to a page inside your own Confluence works too.

In PlantUML, links are set with a url line: url of PAY is [[https://example.com]].

Not drawn yet: sequence diagrams in either format, and Mermaid class, state, Gantt and pie charts. These are laid out along a time axis rather than as boxes and arrows, which is a different job. The app says so plainly instead of showing a broken picture.

Linking shapes to Confluence pages

You can link a shape to a Confluence page from the macro settings, without editing the diagram file at all. Open the settings, find the shape in the list, search for the page and pick it.

Why this matters. A link set this way points at the page itself, not at its address. Rename the page or move it to another space — the diagram keeps working. A URL written inside the file would break silently, and nobody would notice for months.

Which shapes appear in the list

shapes that are already links in the file;
shapes that have an id — most diagram editors add one automatically;
shapes with a title — the title is used as the name in the list.

In draw.io, right-click a shape → Edit Tooltip to give it a title. In Illustrator or Inkscape, name the layer or object.

If a linked page is deleted

The diagram still displays. That shape keeps whatever link it had in the file, and nothing breaks — one missing page never takes the whole diagram down.

Finding things in a large diagram

A service map with fifty boxes is unreadable by eye. Type a word into the search field above the diagram: matching shapes get outlined, everything else fades, and the diagram scrolls to the match. The arrows step between matches.

Search works on every format, including diagrams you did not make yourself. There is also a full-screen button — page macros are narrow, and architecture diagrams are not.

Safety

SVG is not only a picture format — a file can carry scripts inside it. That is exactly why Confluence refuses to render SVG files live and shows them as flat images.

This app removes every dangerous element before the diagram is displayed:

scripts of any kind;
event handlers such as onclick or onload;
links that execute code (javascript:);
embedded HTML and external content;
styles that pull resources from other servers — these can be used to track who opened your diagram, and when.

When something is removed, the app says so under the diagram — you always know that what you see differs from the file.

For draw.io and Mermaid the question does not arise: the picture is drawn from scratch by the app, so there is nothing to inherit.

Where your data goes

Nowhere. The diagram is downloaded and processed inside your own browser, on your own Confluence site. The app has no servers of its own and never contacts any external service. It carries the Runs on Atlassian badge, which means Atlassian verifies this at the platform level.

Replacing an app that is going away

Atlassian is retiring the Connect platform. Apps built on it can no longer be updated, and during 2026–2027 they stop working. If your diagram app is one of them, these pages explain what breaks and what to do:

Replacing SVG out Last updated in February 2023. What it did, what is lost, how to move. Replacing a Mermaid app Several Mermaid apps for Confluence were abandoned in 2024. Replacing a PlantUML app The main PlantUML apps for Confluence have been untouched since 2022. Connect end of life, in plain words What the deadline actually means for a Confluence admin.

Known limits

Files larger than 6 MB are not displayed — such diagrams are slow in any browser.
Animation inside SVG is removed: it is one of the ways to hide harmful code.
Fonts embedded from external servers are not loaded; the diagram falls back to system fonts.
Mermaid: flowcharts only, for now.
PlantUML: relationship diagrams only — components, deployment and similar.

Support

Write to support@horizonventures.app. Please include your Confluence site address and, if possible, the file that misbehaves — it makes finding the cause much faster. We answer within one business day.