Context Graph VS Code Extension

Understand unfamiliar codebases through interactive architecture, dependency, and call-flow graphs—directly inside VS Code.

What is Context Graph?

Context Graph analyzes your project and builds an interactive graph of modules, symbols, and the relationships between them.

Use it to understand a codebase's overall architecture, trace dependencies and call paths, inspect how components connect across files and packages, and jump between the graph and source code without leaving VS Code.

Context Graph supports Python, JavaScript, TypeScript, JSX, TSX, Svelte, Vue, and Astro source files.

Context Graph analyzes your project locally. Source code is not uploaded to an external service; generated graph data is cached on your machine.

For implementation details, supported language semantics, development commands, and the complete system architecture, see the root README.

Key Features

Architecture Overview

Start with a module-level view of the codebase instead of immediately displaying every symbol.

• See dependencies between modules and packages.
• Group modules by detected package boundaries, dependency communities, or a hybrid of both.
• Use Connectivity placement to inspect coupling without implying an architectural layer model.
• Drill down into classes, functions, imports, and other symbol-level details when needed.

Call Flow

Explore a static execution-oriented view of the project.

• Follow function and method calls across files.
• See component composition through renders relationships.
• Trace statically resolvable frontend requests into supported server routes.
• Use execution stages and ownership lanes to follow behavior across application layers.

Call Flow represents relationships that can be inferred statically from the source code; it is not a runtime trace.

Interactive Graph Exploration

• Pan, zoom, select, and inspect graph elements.
• Use Connectivity in Architecture and Symbol Detail, or Staged/Connectivity in Call Flow.
• Filter visible node and relationship types.
• Search for modules and symbols.
• Hover over nodes for source previews.
• Keep selected and focused nodes or edges available through graph-area badges.
• See off-screen direct endpoints while hovering or selecting Call Flow edges.
• Inspect relationship evidence and symbol details.

Code Navigation

Move directly between the graph and your source code.

• Open files and symbols from graph nodes.
• Use View in Graph CodeLens actions on supported declarations.
• Open a file-focused graph from the Context Graph sidebar.
• Generate graphs from Explorer folders and Command Palette actions.

Graph Analysis

Use built-in analysis tools to investigate structure and relationships.

• Total/incoming/outgoing degree, betweenness, harmonic centrality, and PageRank over local resolved symbols.
• Downstream-dependency and upstream-dependent Personalized PageRank.
• HITS over local execution relationships, with optional graph coloring.
• Shortest paths between symbols.
• Dependency tracing and change-impact blast-radius analysis.
• Package, dependency-community, and hybrid architecture grouping, plus bounded experimental symbol similarity.

Automatic Updates

Context Graph can monitor supported project files and refresh generated graphs as the code changes.

Automatic updates can be enabled or disabled in the extension settings.

Getting Started

1. Open a supported project

   Open a folder or workspace containing Python, JavaScript, TypeScript, JSX, TSX, Svelte, Vue, or Astro source files.

2. Open Context Graph

   Select the Context Graph icon from the Activity Bar, or run a Context Graph command from the Command Palette.

3. Generate a graph

   Use Generate Graph from the Context Graph interface, right-click a folder in the Explorer and select Generate Context Graph, or run the corresponding Command Palette action.

4. Explore the codebase

   Switch between Architecture, Symbol Detail, and Call Flow views. Search, filter, group, and inspect the graph to move from the overall system structure down to individual symbols.

5. Navigate back to code

   Select graph nodes to inspect them or open their source location. Supported symbols can also display a View in Graph CodeLens above the declaration.

6. Keep the graph current

   When automatic updates are enabled, Context Graph watches supported source and project-configuration files and refreshes the graph as the project changes.

Supported Analysis

Context Graph currently understands:

• Python modules, classes, functions, imports, inheritance, and calls.
• JavaScript and TypeScript modules, functions, classes, imports, exports, inheritance, and calls.
• JSX and TSX component composition.
• Svelte, Vue, and Astro component documents.
• JavaScript/TypeScript project aliases and module resolution from tsconfig.json and jsconfig.json.
• Literal dynamic imports and supported import.meta.glob dependencies.
• Statically resolvable fetch calls into SvelteKit server routes and Next.js App Router handlers.

Static analysis cannot determine every relationship created dynamically at runtime. Context Graph keeps unresolved relationships distinct rather than guessing when the source does not provide enough evidence.

Why Use Context Graph?

Context Graph is intended to help you:

• Understand an unfamiliar repository faster.
• See how packages, modules, and symbols fit together.
• Trace dependencies across application layers.
• Follow static call paths from UI code into server code.
• Find highly connected or architecturally important code.
• Navigate large projects without repeatedly searching through files.
• Investigate coupling before refactoring.

More Information

See the main Context Graph README for:

• Complete architecture and implementation details.
• Supported parsing and resolution behavior.
• Graph projections, grouping, and layout algorithms.
• Worker and browser-development architecture.
• Development, testing, building, and packaging instructions.
• Current limitations and troubleshooting.