Once you’ve analyzed a codebase, it’s time to explore it visually. This tutorial covers all the navigation and interaction features.
Starting the Visualization Make sure both servers are running:
# Terminal 1: API Server npx @dotenvx/dotenvx run -- dotnet run --project src/adapters/driving/api # Terminal 2: Web Frontend cd src/adapters/driving/web && pnpm dev
Open http://localhost:5173 in your browser.
Interface Overview The interface consists of four main areas:
Area Location Purpose 3D Graph Center Interactive code visualization Main Toolbar Top View controls, layout, settings Selection Toolbar Top (appears on selection) Selection mode controls Left Sidebar Left Search, filters, layers Right Sidebar Right Node details, connections
Main Toolbar The main toolbar provides global controls for the visualization.
From left to right:
Icon Control Description Restart Layout Recalculate node positions from scratch Undo/Redo Step through view history Zoom Out/In Adjust view zoom level Labels Toggle node labels visibility Brightness Adjust overall graph brightness GPU Tweaks Fine-tune layout algorithm parameters Sidebar Toggles Show/hide left and right panels
When you select nodes, the selection toolbar appears with mode controls.
From left to right:
Icon Control Description 1Selection Count Number of selected nodes Selection Mode Current mode (pointer = new selection) Add Add clicked nodes to selection Subtract Remove clicked nodes from selection Intersect Keep only nodes in both selections 1Depth How many hops from selection to include Undo/Redo Step through selection history Clear Deselect all nodes
Selection Modes Icon Mode Description New Click replaces current selection Add Click adds to current selection Subtract Click removes from selection
Selection Depth Control how many hops from your selection to include:
Depth 1 : Only directly connected nodesDepth 2 : Nodes within 2 hopsDepth 3+ : Wider neighborhood
Keyboard Shortcuts Shortcut Action Ctrl+ZUndo selection Ctrl+Shift+ZRedo selection EscClear selection
The left sidebar contains search and filtering tools.
Search Find nodes by name or filter by properties:
UserService # Find by name type:Interface # Filter by type namespace:MyApp.Core # Filter by namespace
Search results highlight matching nodes in the graph.
Filters Toggle visibility of node types:
Filter Effect Namespaces Show/hide namespace containers Classes Show/hide class nodes Methods Show/hide method-level detail Tests Show/hide test classes
Layers Panel Switch between different views:
Structure : Default dependency viewInheritance : Focus on class hierarchyCall Graph : Method-level call relationships
The right sidebar shows details about selected nodes.
When you click a node, the sidebar shows:
Field Description Name Class/interface/method name Type Node type (Class, Interface, etc.) File Source file path (clickable to open) Namespace Containing namespace Lines Line count
Connections View incoming and outgoing relationships:
Dependencies : What this node depends onDependents : What depends on this nodeInheritance : Parent classes/interfacesImplementations : Implementing classes
Click any connection to navigate to that node.
Attributes View all attributes on the node, including overlay data:
coverage:percent = 85.5 git:churn = 12 complexity:cyclomatic = 8
Navigation Controls Mouse Controls Action Control Rotate Left click + drag Pan Right click + drag Zoom Scroll wheel Select node Left click on node Focus node Double-click on node Deselect Click on empty space
Keyboard Controls Key Action EscapeClear selection Ctrl+ZUndo Ctrl+Shift+ZRedo
Touch Controls (Mobile/Tablet) Gesture Action One finger drag Rotate Two finger drag Pan Pinch Zoom Tap Select node Double tap Focus node
Understanding the View Node Types Nodes are colored by type:
Type Color Shape Namespace Blue Large sphere Class Green Medium sphere Interface Yellow Medium sphere Struct Orange Medium sphere Enum Purple Small sphere Method Gray Small sphere
Edge Types Edges represent relationships:
Type Style CONTAINSThin gray line DEPENDS_ONWhite line INHERITSThick blue line IMPLEMENTSDashed yellow line CALLSThin line (method-level only)
Graph Layout Automatic Layout The graph uses ForceAtlas2 layout algorithm. Nodes naturally cluster based on their connections—highly connected components group together.
Manual Positioning Drag nodes to new positions:
Click and hold on a node
Drag to desired position
Release to drop
Your manual positions are saved. Use the “Restart Layout” button to recalculate from scratch.
GPU-Accelerated Layout For large graphs (1000+ nodes), use GPU layout:
Click the GPU Tweaks button in toolbar
Adjust parameters if needed
Click “Compute Layout”
Wait for GPU computation (progress shown)
GPU layout is significantly faster for large graphs.
Reduce visible nodes with filters
Hide method-level nodes
Use isolation mode (select + filter to neighborhood)
Enable GPU layout for initial positioning
Filter by edge type
Show only strong connections
Use the layers panel to switch views
Use search with exact name
Check filters aren’t hiding it
Try type:Class or type:Interface filters
What’s Next? 
