# Zoomable map of an app's architecture > A pan-and-zoom canvas that maps how one app works, from sign-up and payment to file upload, storage and workers, with a numbered walkthrough that lights up each step. Claude Opus 5.5 built it after reading the creator's codebase. - Kind: Interactive reference - Page: https://meetreference.com/v/zoomable-canvas-app-s-architecture/ - Ready-to-use agent handoff: https://meetreference.com/v/zoomable-canvas-app-s-architecture/agent.txt - Exact prompt as plain text: https://meetreference.com/v/zoomable-canvas-app-s-architecture/prompt.txt - Authorship: AI-made, per the source - Made with: Not stated - Model: Claude Opus 5.5 - Built with: not stated - Style: Interactive explainers; architecture diagram, zoomable canvas, node graph, walkthrough, pastel, dev tools - Shared by @robinebers in X, Sep 30, 2026: https://x.com/robinebers/status/2105309987983745060 - Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it. ## Before you start Guidance from Reference, separate from the creator's instructions. 1. Read the reference and inspect the project, installed libraries, and available agent skills before writing code. Reuse suitable tools already present. 2. Prefer the creator-reported libraries and skills when they fit the task. Explain what useful additions help with, and install missing project dependencies or relevant skills from official sources when the environment and the user's existing permissions allow it. Respect the project's package manager and setup rules; do not ask again for routine setup already authorized. 3. Distinguish tools used by the creator from your own recommendations. A listed tool is not automatically required, and an empty tools or requirements list means the setup is unknown, not that nothing is needed. 4. Ask concise questions when missing inputs or choices materially affect the result: paid services, credentials, the user's assets, or a different production approach. Use existing answers and permissions; continue independent work while waiting. 5. If a useful library, skill, or service cannot be installed or used, explain an available alternative and its expected effect on quality, features, or effort. Get the user's choice before a material compromise; otherwise state the fallback and continue. Never silently simplify the result or claim to have used a tool you did not use. Requirements reported by the source: Your own codebase for Claude to read. ## Recreating this interactive reference These are the creator's published instructions, unedited. To adapt it: Keep the first paragraph and rewrite the rest for your app: replace "signs up, pays, or gets a guest pass", "R2 storage" and "modal workers" with your own flows and services. The creator says to "obviously adjust the last part". ## Prompt ```text I have a weird task for you. I want you to look at the app and create, for lack of a better word, a canvas that I can zoom in and zoom out and move around to see how our architecture actually works. A lot has changed, and I'm starting to lose an overview of everything that we're doing, especially with Model and Convex. I want you to map out in a visual way what happens when a user signs up, pays, or gets a guest pass, and then they upload a file. What happens? We create, for example, right now. That's one of the things that I really want to understand. Right now, we're still creating a chat and a project, but the chats are actually independent, I believe, and the projects, I don't even know how the fuck that works. That's already where it starts. A file is being uploaded, and then that file is being put somewhere into R2 storage, and then some modal workers are doing some things. There's a modal app, or one modal worker, but that has multiple apps. I don't really understand how that works either. I really want you to have a visualization of how this actually all works. ``` ## What it looks like Written by Reference from the video frames, not by the creator. A large, light architecture map inside a desktop app, with pastel regions for each system, function cards linked by blue arrows, and a step list on the right. - Color: White and pale grey canvas with soft yellow, lavender, mint and peach regions, dark text, and a strong royal blue for active outlines, arrows and buttons. - Type: Plain sans for headings ("Upload and prepare", "The assistant", "Front doors") and step text, monospace for function and table names such as mediaAssets.beginUpload. - Framing: Wide app window: a top bar of flow tabs (Sign up, Pay, Guest pass, Upload a file), the zoomable canvas filling most of the frame, and a narrow right panel listing numbered steps with Back and Next step buttons. - Structure: The whole map zoomed out, a zoom into the front doors and Convex region, close-ups of the web app and assistant cards, then the "Upload and prepare" flow, with cards and arrows outlined in blue one step at a time. Storyboard, nine frames spread across the video: https://meetreference.com/media/zoomable-canvas-app-s-architecture/storyboard.webp - Frame 1 at 0.6s: https://meetreference.com/media/zoomable-canvas-app-s-architecture/f1.webp - Frame 2 at 1.9s: https://meetreference.com/media/zoomable-canvas-app-s-architecture/f2.webp - Frame 3 at 3.2s: https://meetreference.com/media/zoomable-canvas-app-s-architecture/f3.webp - Frame 4 at 4.5s: https://meetreference.com/media/zoomable-canvas-app-s-architecture/f4.webp - Frame 5 at 5.8s: https://meetreference.com/media/zoomable-canvas-app-s-architecture/f5.webp - Frame 6 at 7.0s: https://meetreference.com/media/zoomable-canvas-app-s-architecture/f6.webp - Frame 7 at 8.3s: https://meetreference.com/media/zoomable-canvas-app-s-architecture/f7.webp - Frame 8 at 9.6s: https://meetreference.com/media/zoomable-canvas-app-s-architecture/f8.webp - Frame 9 at 10.9s: https://meetreference.com/media/zoomable-canvas-app-s-architecture/f9.webp ## How it was made, per the creator - Notes: The creator ran it on Opus 5.5 at high effort, against an app they had been building for two months. Clicking a major action lights up every part it touches, and "next step" explains what happens. ## Links - Watch: https://x.com/robinebers/status/2105309987983745060 - Original post: https://x.com/robinebers/status/2105309987983745060