The Architecture Diagram Is Now an Interactive Canvas
The topology view used to be a static Mermaid render that kept erroring out on perfectly valid input. It is now a pan / zoom / drag canvas built on React Flow with dagre auto-layout — interactive, dark-mode aware, and stable across every diagram we have thrown at it.
Topology, Reborn
The Architecture Diagram page in Hookbase shows you exactly how your webhooks flow — sources → routes → destinations — in one picture. As your org grows past the point of fitting the topology in your head, that page is the fastest way to answer "what is wired to what."
Until today, the page was a Mermaid render. And while Mermaid is fine for static diagrams in READMEs, in our dashboard it kept tripping over itself: cryptic render errors like char is not defined on perfectly legal input, label parsing breaking on names with special characters, and zero ability to pan or zoom once your topology grew past a screen.
Today's update rebuilds the page on top of React Flow with dagre auto-layout. Same data, same node shapes — but the canvas is now interactive.
What's New
- Pan and zoom. Wheel to zoom, drag to pan. A minimap in the corner keeps the full topology in view even when you are zoomed in on one route.
- Drag to reposition. Dagre auto-lays the diagram out left-to-right by default. If you want to fix a particular crossing or pull a node out of the pile, just grab and move it.
- Dark-mode aware. Controls, edges, background, minimap — all theme-correct. No more dark text on dark buttons.
- Live edge styling. Active routes show a subtle traveling-dot animation. Inactive routes are dashed and muted. Circuit-broken routes turn red. Failover destinations get a dashed amber edge labeled
failover. - No more render errors. Custom React components per node type means we control rendering end-to-end. No third-party parser surprises.
Under the Hood
The diagram API is unchanged: same GET /organizations/:orgId/diagram endpoint, same structured graph response. We dropped the Mermaid-string field from the response — nothing on the frontend uses it after the rewrite — and the mermaid package is gone from the bundle entirely. That's roughly 600 KB shaved off the diagram page's first load.
On the frontend, the new component is about 250 lines of React Flow plus a thin dagre wrapper. The node components reuse the same Tailwind-styled card primitives as the rest of the dashboard, so the look matches everything else.
Try It
Open your org's Architecture Diagram page (under Inbound in the sidebar). It auto-loads, dagre lays it out, and you can immediately pan, zoom, and drag any node. Use the controls bottom-left to fit the view, or the minimap to navigate when you have many sources or destinations.
If you have feedback — a different default layout direction, different node shapes, persistent custom layouts per org — let us know in the in-app feedback form. We are happy to iterate.