Interactive Architecture Diagrams in Confluence

Make architecture diagrams explorable. A static export from draw.io or Lucidchart shows boxes and arrows, but not who owns each service, what protocol connects them, or where the known risks sit. Embed a clickable version directly on the Confluence page instead — click a box or an arrow and the answer opens right there.

The diagram above is a demo. Click any service box or any data-flow arrow between them — a detail panel opens inline with owner, protocol, dependencies and risk.

The problem it solves

A static diagram image can only be looked at. Every "who owns this / what protocol / what depends on this / what's the risk" question it raises has to go somewhere else — a Slack ping to the author, a hunt through a separate wiki page, or tribal knowledge that only lives in someone's head. The answer is rarely attached to the diagram itself, so it drifts out of date without anyone noticing, and the next reader asks the same question again.

How it works

1. Create — build (or ask an AI to build) a self-contained HTML/CSS/JS site: your diagram as inline SVG plus click-to-expand detail panels, using your own architecture as the source of truth.
2. Upload — add the bundle's files to the Mini-Site macro on your Confluence page. No build step, no deploy pipeline — it's a static bundle.
3. Publish — the mini site renders inline on the page immediately. Anyone who can view the page can click through it; permissions are inherited from Confluence.

Prompt

Don't want to build it by hand? Paste this into Claude, ChatGPT, or a similar assistant, filling in your own architecture where marked.

You are building a small, self-contained, interactive architecture diagram as a static website.
It will be uploaded as-is to a Confluence page via an app called Mini Sites, so it must run with
zero build step and zero external network dependencies.

HARD REQUIREMENTS
- Output exactly three files: index.html, style.css, app.js. No other files, no package.json,
  no bundler, no framework.
- No CDN links, no Google Fonts, no external images, no analytics scripts, no fetch() calls to
  any external URL. Everything (including any icons) must be inline SVG, inline CSS, or plain text.
- The diagram itself must be inline SVG (not a static image, not <canvas> unless you also wire up
  click hit-testing) so each service box and each data-flow arrow can be a real clickable element.
- Clicking a service box OR a data-flow arrow must open/update a detail panel on the same page
  (no navigation, no alert()) showing, at minimum:
  - Owner (team or person responsible)
  - API / protocol (how it talks to other services)
  - Dependencies (other services or data stores it relies on)
  - Risk (what's fragile, unmitigated, or worth flagging about this piece)
- Must work when opened as a plain file (file://) or served via `python3 -m http.server` — so use
  relative paths only (no leading slash) for style.css and app.js.
- Keyboard-accessible: each clickable node should be reachable by Tab and activatable with Enter/Space.
- Do NOT use localStorage, sessionStorage, IndexedDB, or cookies — Mini Sites serves the bundle in
  a sandboxed iframe with an opaque origin, where all of those throw or silently no-op. Keep all
  state in plain JS variables; it's fine if it resets on reload.
- Visually polished: clear typography, consistent spacing, a real color system (not default browser
  styles), hover/focus/active states on clickable elements, and a responsive layout that doesn't
  break under ~900px width.

CONTENT
Base the diagram on this architecture:

<YOUR ARCHITECTURE HERE — paste a list of services/components, how they connect, and (if you have it)
who owns each one, what protocol/API is used between them, key dependencies, and known risks or gaps.
If you don't have all four details for every node, invent reasonable placeholders and mark them
clearly as "TBD — confirm with [likely owner]" rather than inventing false specifics.>

DELIVERABLE
Return the full contents of index.html, style.css, and app.js, each in its own labeled code block,
ready to save as three files in one folder and upload directly.

After generating: save the three files locally with the exact names above, open index.html in a browser to confirm clicking a box or arrow opens the detail panel, then add the Mini-Site macro to your Confluence page and upload all three files. Publish, and the diagram renders live, inline, on the page.

Related

• Mini Sites for Confluence — the hub page: what the app is, how the sandbox works, limits and permissions.
• ROI Calculator on Confluence — another Mini Sites scenario: a live, recalculating calculator instead of a diagram.
• ZenUML Diagrams for Confluence — a different product: sequence diagrams generated from text, versus the clickable architecture diagram you build yourself here.

Install Mini Sites for Confluence →