How to make a diagram clickable in Confluence Cloud
People have been asking this on the Atlassian community for more than a decade, and the answer splits cleanly in two. It is a two-minute job if the diagram was drawn inside Confluence, and it is a different problem entirely if the diagram arrived as a file.
Short answer. If the diagram lives in a diagramming app such as draw.io or Gliffy, select a shape and add a link to it: both support links on shapes, pointing at a Confluence page, an external URL or another diagram. If the diagram is a plain image, Confluence can make the whole image one link, but not different parts of it. If the diagram is an SVG file you attached, the links inside it will not work on the page.
draw.io: select the shape, Edit Link
Open the diagram in the editor, click the shape, then right-click and choose Edit Link. The same command sits in the Arrange tab of the format panel on the right, and the keyboard shortcut is Alt+Shift+L.
The dialog offers more than a plain URL. A web link opens in a new browser tab. Page Content lists the headings of the Confluence page the diagram sits on, so a box can jump the reader to a section further down. That list is generated from the published page, so if it comes up empty, publish the page first and reopen the dialog.
Readers get a hint for free: hovering a linked shape outlines it, so people discover the diagram is navigable without being told.
Gliffy: link the shape or the text inside it
Gliffy does the same job from its link toolbar, on a shape or on a piece of text, pointing at a web address, a Confluence page, an attachment or another Gliffy diagram.
One detail from their documentation is worth copying as a house rule, because it prevents a class of dead links. When linking to a Confluence page, use the Search option in the Insert Link window rather than pasting the address from the browser. Gliffy then stores the short Atlassian link, the ugly /x/ZygVQ kind, which keeps pointing at the same page after it is renamed or moved to another space. A pasted URL contains the page title and breaks the day somebody rewrites it.
A plain image gets one link, not several
If what you have is a PNG of a diagram, select it in the editor and use the link icon in the floating toolbar. That turns the picture into a link, the whole picture, as one target. It is the right tool for a banner or an icon that should open one place.
What it cannot do is give each box its own destination. Confluence Cloud has no hotspot editor for regions of an image, so an architecture map saved as a PNG stays a picture of a map.
Why an attached SVG loses its links
This is the case that sends people looking for an answer, because an SVG genuinely does contain links. You exported it from Figma, Visio, Inkscape, Graphviz or an architecture tool, the file opens in a browser and every box works. Attach it to a Confluence page and it becomes a flat picture.
The reason is how the file is displayed. Confluence Cloud shows an attached SVG through its media viewer as a rendered picture, not as live markup inside the page. The separate suggestion to allow SVG tags in a page storage format, CONFCLOUD-36336, "Allow SVG in Storage Format", has been open since January 2015 and is still marked Gathering Interest.
The confusing part, worth knowing before you plan around it. The ticket most people find is CONFCLOUD-1762, "Embedding of SVG", opened in 2004 and carrying 367 votes, and it was closed as Fixed on 10 September 2024. That looks like the answer, and it is not. What shipped was the new SVG rendering engine announced in October 2023, which addressed SVG 1.2 support, text dropping out and poor rendering of Mermaid diagrams. Better viewing, not interactivity. The product manager's note at the time also asked people to reattach existing SVG files so the new engine would redraw them, which is good advice if your diagram looks wrong and beside the point if your problem is that clicking does nothing.
The arithmetic, if you are deciding whether to redraw
There is a free way out of the SVG case. draw.io imports SVG files, along with VSDX from Visio, Lucidchart files and PNG, through File → Import from → Device or by dragging the file onto the canvas. Import the diagram, add the links inside draw.io, and you have a clickable diagram with no extra app.
Work out whether that is a one-off or a habit. Adding a link to a shape takes twenty to thirty seconds once you know where the dialog is, so a forty-box service map costs fifteen to twenty minutes. Paid once, that is nothing. The question is what happens on the next export.
If the diagram is drawn by a human and changes twice a year, import it and forget this article. If the SVG is generated, by Graphviz, Structurizr, a Mermaid or PlantUML build step, or any pipeline that redraws the picture from the system it describes, then every regeneration produces a file with the links already in it and no links in your Confluence copy. You are back to fifteen minutes of clicking, on a schedule. That is the case where redrawing is the wrong answer, because you are hand-maintaining something a machine already produced correctly.
What to do about the exports
Whatever route you take, do not let clicking a box be the only way to reach the page behind it. Diagrams come out of a PDF export as pictures, and a printed runbook whose navigation lived in the diagram is a runbook with no navigation. Put the important destinations in a list under the picture as well. It costs one line, and it also makes those links visible to search, which pixels are not.
Disclosure: I build Clickable SVG, an app for exactly the last case, an SVG that already has its links and needs them working on a Confluence page without being redrawn. If your diagram does not exist yet, or exists once and never changes, draw it in draw.io or Gliffy and link the shapes there. That is free, it is the path the Atlassian ecosystem is built around, and you will not need my app. If your case is simpler, take the simpler option.
Frequently asked
Can a shape link to a heading on a different page?
Link to the page and add the anchor to the address yourself. The heading picker in the editor works on the page the diagram sits on, which covers the common case of a diagram acting as a table of contents for a long document.
Is there a way to keep one diagram and use it on several pages?
Both diagramming apps support reusing a diagram across pages rather than copying it, which matters more than it sounds. A copied diagram is a diagram that will be updated in one place and stale in three.
What about diagrams generated from code?
Text-based diagrams are the strongest option when the picture has to track a system that keeps changing, since the build redraws it. Decide in advance how the links get in, because that is the part the generator usually does and the page usually loses.
Does any of this depend on the Confluence plan?
The behaviour described here is about how diagrams and attachments are displayed, not about plan tiers. App pricing is a separate question and changes over time, so check the current listing of whichever diagramming app you are considering.
Related: the four ways to keep diagrams in Confluence, compared, and why Confluence Cloud turns your SVG into a flat image.