Share Interactive Architecture Diagrams With Your Team
Claude Code, Cursor, and other AI tools generate architecture diagrams as self-contained HTML files built on D3.js, Mermaid, or custom SVG and JavaScript. On your machine the diagram is interactive. The moment you try to

Claude Code, Cursor, and other AI tools generate architecture diagrams as self-contained HTML files built on D3.js, Mermaid, or custom SVG and JavaScript. On your machine the diagram is interactive. The moment you try to share it, the interactivity is what you lose.
What you're losing with screenshots
An interactive architecture diagram has properties a screenshot destroys:
- Hover tooltips showing component descriptions, dependencies, and metadata
- Click interactions for drilling into subsystems or expanding details
- Zoom and pan for navigating a large system without losing your place
- Animated transitions showing data flows and request paths
- Collapsible nodes for managing complexity in a big architecture
A screenshot of an interactive diagram is a static image of an application. The information it carries is a fraction of the original, and it goes stale the moment the architecture changes.
One request
Claude Code generated your architecture diagram. Ask it:
"Publish ./architecture.html to Display for everyone at my company, named system-architecture."
It returns a link such as https://acme.dsp.so/0kzNYG7O-system-architecture.
Your PM, VP, and the security lead click the URL, sign in with their company Google or Microsoft account (or a one-time password on the Free plan), and see the full interactive diagram, not a JPEG approximation of it. Every hover, click, and zoom that worked locally works at the URL.
Common tools and their output
| Tool | Output | Publish |
|---|---|---|
| Claude Code (D3/Mermaid) | ./architecture.html | Ask your agent to publish the file |
| Mermaid CLI | ./diagram.html | Ask your agent to publish the file |
| draw.io HTML export | ./diagram.html | Ask your agent to publish the file |
| Structurizr Lite | ./site/ | Ask your agent to bundle it into one HTML file, then publish |
| Excalidraw HTML export | ./drawing.html | Ask your agent to publish the file |
When the diagram changes
Architecture is never done, so you want one URL that always shows the current version, not a fresh link every revision.
Claude Code updated the architecture? Ask it:
"Publish the new version of the architecture diagram to the same Display link."
The link does not change. Display records which version you edited from, so a teammate's newer publish is not overwritten silently. A publish that does not target the existing link creates a new artifact with a new URL. You rarely want this when the diagram should stay current at one address. Each revision is kept as a version in history: 10 versions on Solo, 50 on Pro.
Why this matters for architecture specifically
Architecture diagrams are read by more people than almost any other engineering artifact: the on-call engineer at 2am, the new hire in week one, the security reviewer, the VP deciding whether to fund the migration. Diagram-as-code tools like Mermaid exist precisely so the picture stays in sync with reality. Publishing to a URL that updates in place finishes that job: the diagram is versioned, current, and readable by non-engineers without a checkout, a build step, or a screenshot that's already wrong.
Getting an interactive diagram out of Claude Code
If you're starting from a description rather than an existing file, ask for a self-contained artifact so it publishes with zero configuration. A prompt like:
"Generate an interactive architecture diagram of this system as a single self-contained HTML file. Use Mermaid or D3. Inline all CSS and JavaScript, or load libraries from a public CDN. Add hover tooltips for each component and click-to-expand for subsystems."
produces one .html file with everything inlined. That's the safest shape to publish. If the agent splits assets across files, ask it to inline them into one HTML file. The same approach works from Cursor or Codex, since Display does not care what wrote the file.
FAQ
My architecture diagram is generated by Claude Code with D3.js. Will the animations work?
Yes. display.dev serves the full HTML file including all inlined JavaScript. D3 animations, event handlers, and dynamic rendering all run as if the file were served from any web server.
What if the diagram has external JavaScript dependencies?
Self-contained HTML files (all JS inlined or loaded from public CDNs like cdn.jsdelivr.net) work with zero configuration. If the diagram references local JS files, ask your agent to inline them into the HTML file, then publish that file.
Can I embed a display.dev artifact in Confluence or Notion?
Not as an iframe, since Confluence and Notion restrict iframe sources. But you can link to the display.dev URL from any page, and the link opens the full interactive diagram in a new browser tab.
Who can see the diagram once it's published?
By default, anyone with an email on your company domain, after they authenticate. On Pro you can also restrict an artifact to specific invited people, or make it public if it's meant for a wider audience. Access is per-artifact and changeable any time.
Does the link keep working after I update the architecture?
Yes. Republish with --id and the URL stays the same while the content updates. Viewers who bookmarked it always land on the current version.
Free tier. No credit card. One-time password auth for viewers on free, Google + Microsoft SSO on Pro (€49/month flat).