Dashboard & Canvas
The Dashboard is where you view and organize all of your generated architectural maps. The Canvas is the interactive viewer that renders your APIs as a node graph.
The Canvas Viewer
When you upload a map via the CLI, you are redirected to the Canvas Viewer. This viewer features a beautiful, hardware-accelerated graph powered by React Flow and Dagre.
- ◈Node Colors: Backend API routes are highlighted in green, frontend callers in blue, and external services (like Stripe or database queries) in gray.
- ◈Method Badges: HTTP methods are distinctly badged for quick visual scanning (e.g. GET is green, POST is blue, DELETE is red).
- ◈Node Details: Clicking on any node opens the Detail Panel on the right side, showing exact file paths, line numbers, and extracted metadata.
Example of a Frontend Caller node generated by the CLI.
Project Management & Privacy
The Dashboard provides full control over your saved maps. By default, maps uploaded using an API key are strictly Private, meaning only you can access them.
Project Options Menu
Every project card features an options menu (⋮) in the top right corner. Clicking this reveals:
- ◈Rename: Easily change the auto-generated name to something descriptive (e.g. "Payments Service v2").
- ◈Delete: Permanently delete the map from Trace servers.
- ◈Share: Opens the Access Manager to control who can view your architecture.
The Access Manager
Opening the Share modal gives you a unified hub to manage your project's privacy settings:
General Access
Only invited people can view this map.
From the Access Manager, you can securely invite coworkers by their email address, instantly revoke their access, or toggle the entire project to Public so anyone with the link can view it.
Command Palette (Ctrl + K)
For large repositories, visually hunting for a specific endpoint can be tedious. Press ⌘K or Ctrl + K anywhere on the Canvas to open the search palette.
Typing instantly filters all nodes across your entire graph. Selecting a node from the palette and pressing Enter will automatically Isolate the view to just that path.
Node Isolation
Isolation mode is one of Trace's most powerful features. When you isolate a node (either via the Command Palette or the "Isolate Node View" button in the Detail Panel), the canvas strips away all noise and only shows the selected node and its direct incoming and outgoing connections.
Case Study: Debugging Payments
Imagine an issue is reported with the /api/checkout route. Instead of sifting through a massive graph with hundreds of nodes, you hit ⌘K, type "checkout", and hit Enter.
Instantly, the view collapses. You now only see the Frontend Callers (e.g. CheckoutForm.tsx) pointing into your route, and the External Services (e.g. Stripe API) branching out of it. This pinpoint visibility lets you identify precisely where the data is coming from and where it is failing, without the distraction of the rest of your app. Press Esc when you're done to return to the full graph.