3D Graph Viewer

The same checker-resolved graph the MCP tools answer from, rendered as a navigable 3D ontology. Every node is a module or a declaration (module, class, interface, function, method, type, enum, variable); every edge is a resolved relationship the compiler reported.

The examples below are the benchmark fixture repositories, from VS Code down to Zod. Drag to orbit, scroll to zoom, hover a node for its name, kind, and file.

Click a node to focus it: its neighborhood lights up, the rest dims, and an info panel shows the declaration, its file, and its edges by family, with an “isolate 2 hops” button that re-lays out just that neighborhood.

The explorer sidebar goes further. The Files tab is a directory tree of the graph, and the Symbols tab finds a declaration by name and flies the camera to it. Both spotlight in place rather than removing anything, and only the explicit isolate changes what is drawn.

Run the viewer

npx @ttsc/graph view

view builds your project’s graph, reduces it, and opens this viewer in your browser from a local port. Nothing leaves your machine.

It resolves the project from the working directory and tsconfig.json, and --cwd, --tsconfig, --port, --max-nodes, and --no-open override that. Like the MCP server, it needs ttsc installed so the native ttscgraph binary is present.

Export the graph as JSON

npx @ttsc/graph dump --tsconfig tsconfig.json > graph.json

dump prints the whole graph as JSON: every node and edge the build resolved, with none of the per-response caps the MCP tool applies. It is the same export the MCP server loads at startup, so what you dump is exactly what the agent queries.

That file is what “Load your own JSON” above accepts. The viewer reduces it client-side before rendering, by the rules in What is left out, and takes an already-reduced payload as-is.

What the colors mean

Nodes are colored by declaration kind and sized by how many other declarations connect to them, so the load-bearing symbols stand out.

Edges are colored by family. The graph itself distinguishes finer relationship kinds (the full set is typed in ITtscGraphEdge.ts); the viewer folds them into five so the picture stays readable:

• value-call: a runtime use. Covers calls, instantiates (new T()), renders (a JSX component), and accesses (a property read or write).
• type-ref: a type-position reference (a parameter, return, property, or alias type).
• doc-ref: a declaration’s documentation naming a symbol through an inline link.
• heritage: an extends, implements, or overrides relationship.
• exports: a module to a declaration its export table resolves to, which is what says the symbol is public on that surface.

Every kind a dump carries folds onto one of those five, so no edge is drawn without a name beside it.

What is left out

The viewer is a projection, not the whole graph. Reduction happens before rendering (in the browser for an uploaded dump, in Node for view), in this order:

• External code is dropped. Anything in node_modules or a .d.ts lib is not your code; the graph keeps it only as a boundary, and the viewer drops the boundary leaves.
• Git-ignored generated code is dropped. A Prisma client or other codegen emitted as .ts would bury the authored graph under thousands of look-alike nodes.
• Only the best-connected declarations survive a cap. A project larger than the node budget (1,200 nodes for an uploaded dump) keeps its highest-degree nodes, so the hubs stay and the leaves go.
• Orphans are pruned. A node left with no surviving edge is removed.

The node and edge count in the panel header is what survived, not the raw graph. For the complete data, use dump and read the JSON directly.