How to Build Interactive Architecture Diagrams in Chat
For Solution architects and technical leads · Based on MCP Apps Interactive UI Builder (VS Code)
// TL;DR
Solution architects and technical leads can use MCP Apps Interactive UI Builder to generate and edit system architecture diagrams from natural language prompts, rendered directly inside VS Code's chat window. Instead of receiving ASCII art or static images, users get interactive Excalidraw-based diagrams in a sandboxed iFrame. They can drag nodes, edit labels, add connections, and update the diagram live—all inside the chat. The bidirectional callback loop persists changes on the MCP server, and the pattern can be templated via a skill file.
Why should architects use MCP Apps for diagrams?
When architects ask an LLM to generate an architecture diagram, the result is typically ASCII art, a Mermaid code block, or a static image link. ASCII art is imprecise and hard to modify. Mermaid requires rendering in a separate tool. Image links force a browser context switch. None of these allow real-time editing.
MCP Apps change this fundamentally. By building an MCP server that returns diagram node data alongside a UI resource reference pointing to an interactive Excalidraw component, architects get editable diagrams rendered directly in the chat window. They can drag nodes, resize components, edit labels, draw new connections, and see the results immediately—without leaving VS Code.
How do you build a diagram MCP App with Excalidraw?
Define your MCP server tool to accept natural language descriptions of system architectures. The tool should parse the description into structured diagram data—nodes (services, databases, queues), edges (connections, data flows), and metadata (labels, colors, groupings).
Build the bundled HTML Resource using an Excalidraw-based component. Excalidraw's library can be embedded in a self-contained HTML file. The component consumes the structured diagram data and renders it as an interactive canvas. Bundle everything with Vite or Webpack into a single HTML file.
Wire the Link by including the UI resource reference in the tool's response. Set the invoker mode to 'model and app' so the LLM generates the initial diagram, and the user can interact with it via the iFrame. The callback loop is essential: when the user drags a node or edits a label, the app sends the updated diagram state back to the MCP server, which persists the changes and can return additional context (e.g., related services, suggested patterns).
Register the server in VS Code, then prompt GitHub Copilot with something like 'draw an architecture diagram for our microservices system.' The LLM calls the tool, and VS Code renders the interactive Excalidraw diagram in the chat.
How do you handle complex diagrams with many components?
For large architectures, implement progressive rendering. Return a high-level view initially—major services and primary connections. When the user clicks a service group, the app calls back to the MCP server for detailed sub-architecture data and re-renders with the expanded view. This keeps the initial render clean and allows architects to explore depth on demand.
You can also implement zoom levels: clicking 'zoom into authentication service' triggers a callback that returns detailed auth flow data, rendered as a focused sub-diagram within the same iFrame.
What are common mistakes architects make with diagram MCP Apps?
The most common mistake is building the diagram as a one-way static render. If the user can't drag, edit, or interact with the diagram, they'll ask the LLM to regenerate it from scratch for every change—which is slow and frustrating. Always implement the callback loop.
Another mistake is not persisting diagram state on the server. If the user modifies the diagram but the changes aren't sent back to the MCP server, the modifications are lost when the iFrame is refreshed or a new prompt is sent. Use the callback loop to persist state after every user interaction.
What's the next step?
Encode your Excalidraw-based diagram MCP App into a skill file. This lets you scaffold new diagram types—sequence diagrams, data flow diagrams, network topologies—from the same template. Share the skill file with your architecture team so anyone can generate interactive diagrams from natural language prompts in their VS Code chat.
// FREQUENTLY ASKED QUESTIONS
Can I export diagrams generated in the MCP App?
The MCP App renders inside a sandboxed iFrame, so direct file system access is not available. However, you can implement an export function in your MCP server: the app sends the current diagram state to the server via the callback loop, and the server generates an exportable file (SVG, PNG, or Excalidraw JSON) that the LLM can reference or save. The export happens server-side.
Can the LLM modify a diagram after the user has edited it?
Yes, if the invoker mode is set to 'model and app.' The user can edit the diagram manually in the iFrame, and then ask the LLM via chat to add a new component. The LLM calls the tool again, the server generates updated diagram data incorporating both the user's edits and the new component, and the iFrame re-renders. This hybrid editing flow requires persisting diagram state on the server.
Does this work with Mermaid or only Excalidraw?
You can use any diagramming library that runs in the browser. Excalidraw is ideal for freeform, editable diagrams. Mermaid can be embedded for structured diagrams (sequence, flowchart) but offers less interactive editing. D3.js works for custom visualizations. The key requirement is that the library can be bundled into a single self-contained HTML file and rendered inside the sandboxed iFrame.