The Diagram Canvas Is Now a Pipeline Builder

From Viewer to Builder

Back in May, the Architecture Diagram page stopped being a Mermaid render that broke on perfectly valid input and became a real canvas — pan, zoom, drag, dark-mode aware, live edge coloring for active and circuit-broken routes. That rebuild solved one problem well: it made your topology visible, no matter how many sources and destinations you had wired together. Since then, the canvas could show you your topology. Today it can change it too.

Because seeing a gap in your pipeline — a source with nowhere to go, a destination nothing points at — still meant leaving the canvas to close it. A tab for the source form, another for the destination form, a third to wire a route between them, then back to the diagram to check it looked right.

That loop closes today. You can create sources and destinations, manage routes, and restructure your whole pipeline without leaving the diagram.

What's New

• Create sources and destinations on the canvas — the same full creation dialogs used on the dedicated pages, not a cut-down version
• Manage routes inline — pause/resume plus a settings popover to edit a route's filter, transform, and schema attachments
• Right-click context menus — edit, delete, or pause/resume any node without navigating away
• Bulk actions — multi-select routes to pause, resume, or delete them together
• Full undo/redo — Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z now cover every staged change on the canvas, not just the most recent one
• Real drag tracking — nodes follow the cursor while you drag instead of teleporting from pickup point to drop point
• Fullscreen — the whole diagram card expands, not just the canvas, and every control still works

Build Without Leaving the Canvas

The new + Source and + Destination buttons on the diagram toolbar open exactly the dialogs you'd get from the dedicated sources and destinations pages: templates picker, provider picker, the same three-step Basic Info / Provider / Advanced form, secret reveal, all of it. We didn't build a lightweight stand-in that would drift from the real thing over time — we extracted the actual creation modal.

For sources, that meant pulling the existing create/edit modal out of the sources page into a shared CreateEditSourceDialog component, used by both the page and the diagram. For destinations, a new CreateDestinationDialog wraps the pre-existing shared DestinationForm the same way. Either surface calls the same component; neither one owns it.

Create a node from the canvas and it appears immediately, ready to connect — no page reload, no hunting for it in a list afterward.

Managing Routes Without Leaving Either

Routes got the same treatment. Every route node now has a pause/resume toggle right on it, and a settings icon that opens a popover for quick edits to the route's filter, transform, and schema attachments — three things that used to mean three separate page visits.

These inline edits run through the same staged-changes flow the canvas already used for rewiring connections: nothing hits the API until you hit Save changes, and everything staged is reviewable and undoable before it does. Undo/redo now actually means it — Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z step back and forward through every staged change, not just whichever one you made most recently.

Right-click any node — source, destination, or route — and you get a context menu: edit, delete, and for routes, pause/resume. Same actions the toolbar already exposed, faster path to get there.

Restructuring more than one route at a time, Ctrl/Cmd+click to multi-select and a bulk-action toolbar appears — pause, resume, or delete the whole selection at once instead of one at a time.

The Node That Teleported

While building the inline editing, we ran into a bug that had apparently been sitting in the canvas since May: dragging a node didn't actually drag it. You'd grab a node, and it would vanish from where you picked it up and reappear wherever you released the mouse — nothing in between. Functional, in the sense that the node ended up in the right place. Wrong in every other sense — basically every drag-and-drop surface on the web tracks the cursor in real time, and this one silently didn't.

The cause: node position updates were tied to the same recompute path as dagre's auto-layout — an expensive, whole-graph algorithm that has no business running on every pointermove event. The drag handler was, reasonably enough, throttled down to just the start and end position so it wouldn't hammer dagre sixty times a second. The fix wasn't to throttle harder or looser — it was to stop coupling the two in the first place. Live cursor tracking during a drag is now fully decoupled from dagre relayout: position updates are coalesced to one commit per animation frame, and nodes that aren't the one being dragged are cached so they don't re-render on every frame either. The node now follows your cursor like it should have from the start, and the rest of the canvas doesn't pay a layout tax for it.

Fullscreen, and the Bug It Uncovered

The diagram card now has a Fullscreen button, built on the browser's native Fullscreen API. It expands the whole card — title, header controls, canvas, and the traffic-color legend — not just the canvas, so search, the layout-direction toggle, the traffic toggle, and Copy JSON all keep working while you're zoomed in on your topology.

Building it surfaced a bug well outside the diagram's blast radius: with fullscreen active, any dialog, popover, dropdown, select, or tooltip anywhere in the app would silently fail to appear. Not error — just not render. Open a confirmation dialog while fullscreen and nothing happens, with no console error pointing at why.

The cause: Radix UI, the primitive library behind the app's dialogs and popovers, portals its overlays into document.body by default. document.body sits outside a fullscreened element's rendered subtree, and the browser simply doesn't paint anything portaled there while fullscreen is active. The element is still in the DOM — inspect it and it's right there — the browser just refuses to composite it onto the screen until you exit fullscreen.

The fix is a small useFullscreenElement() hook that tracks document.fullscreenElement via the fullscreenchange event, wired into every shared overlay primitive: Dialog, AlertDialog, Popover, Select, Tooltip, DropdownMenu. When a fullscreen element is active, they portal into it instead of document.body; otherwise they fall back to the normal behavior. This isn't a diagram-specific patch — it's an app-wide fix. Anything built on those shared components now behaves correctly under fullscreen, wherever it lives.

Try It

Open your org's Architecture Diagram page, under Inbound in the sidebar. The topology loads exactly like it did before — the difference is everything you can now do to it without leaving. Add a source, add a destination, drag a connection between them, right-click a route to pause it, select three more and bulk-delete them, undo the lot, then go fullscreen and do it again with more room.

If there's a workflow that still sends you back to a separate page, tell us in the in-app feedback form — closing that loop is exactly what this update was for.