UI guide
Getting around the graph.
The graph is laid out as a swimlane per module, with columns per layer (endpoint → controller → service → repository). It's a dependency-free SVG renderer embedded in the library.
Interactions
| Action | What it does |
|---|---|
| Drag a node | Nudge a single box; its edges follow. |
| Drag a lane | Move a whole module (band + all its nodes) together. |
| Click a lane header | Collapse the module into one box; click again (or the box) to expand. |
| Click a node | Open its definition in your editor (vscode / cursor). |
| Hover a node | Highlight its neighbors; dim everything else. |
| Scroll | Zoom toward the cursor. |
| Drag the background | Pan. |
Toolbar
Top-right: Fit (frame the whole graph), Expand all / Collapse all modules, and zoom + / −.
Edges
- Solid grey arrows are call edges (function → function).
- Dashed amber arrows are route edges (endpoint → handler).
Data endpoint
The UI fetches its graph from {BasePath}/data as JSON — handy if you want to
build your own visualization or assert on the structure in a test
(av.Graph() returns the same data in Go).