Share Interactive Architecture Diagrams With Your Team

What you're losing with screenshots

Claude Code, Cursor, and other AI tools generate architecture diagrams as self-contained HTML files with D3.js, Mermaid.js, or custom SVG and JavaScript. These diagrams have properties that screenshots destroy:

Hover tooltips showing component descriptions, dependencies, and metadata
Click interactions for drilling into subsystems or expanding details
Zoom and pan for navigating large system diagrams
Animated transitions showing data flows and request paths
Collapsible nodes for managing complexity in large architectures

A screenshot of an interactive architecture diagram is a static image of an application. The information it contains is a fraction of the original.

One command

dsp publish ./architecture.html --name "system-architecture"

Your PM, VP, and the security lead click the URL, authenticate with their company email, and see the full interactive diagram, not a JPEG approximation of it.

Common tools and their output

Tool	Output	Command
Claude Code (D3/Mermaid)	`./architecture.html`	`dsp publish ./architecture.html`
Mermaid CLI	`./diagram.html`	`dsp publish ./diagram.html`
draw.io HTML export	`./diagram.html`	`dsp publish ./diagram.html`
Structurizr Lite	`./site/`	`dsp publish ./site/`
Excalidraw HTML export	`./drawing.html`	`dsp publish ./drawing.html`

When the diagram changes

BASE_VERSION=$(dsp get 8f3kx9 | jq -r .currentVersion)
dsp publish ./architecture.html --id 8f3kx9 --base-version "$BASE_VERSION"

--id <shortId> is the update path: same URL, new content. --base-version tells display.dev which version you edited from, so a teammate's newer publish cannot be overwritten silently. Publishing again without --id creates a fresh artifact with a new URL, which is rarely what you want for a living diagram. Grab the shortId from the first publish and update in place.

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 work 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 in a separate directory, publish the whole directory: dsp publish ./diagram-dir/.

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. The link opens the full interactive diagram in a new browser tab.