Share Interactive Architecture Diagrams With Your Team
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:
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
dsp publish ./architecture.html --name "system-architecture"The URL your colleagues bookmarked shows the updated diagram. No new link to share. No broken bookmarks in Notion or Confluence.
FAQ
My architecture diagram is generated by Claude Code with D3.js. Will the animations work?
Yes. Display 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 artifact in Confluence or Notion?
Not as an iframe — Confluence and Notion restrict iframe sources. But you can link to the Display URL from any page. The link opens the full interactive diagram in a new browser tab.
Free tier. No credit card. One-time password auth for viewers on free, Google + Microsoft SSO on Teams ($49/month flat).