Visualize and explore your project's dependency graph directly within VS Code. Understand codebase's structure, relationships between modules, identify potential issues, and navigate your project more efficiently. Currently supports Python projects and targeted metrics, with more languages and featu
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Visualize and explore your Python codebase with interactive dependency graphs—right inside VS Code.
What is Context Graph?
Context Graph helps you visualize and explore your project's dependency graph directly within VS Code. Understand codebase's structure, relationships between modules, identify potential issues, and navigate your project more efficiently. Currently supports Python projects and targeted metrics, with more languages and features coming soon.
Context Graph does not store or transmit any of your code or data.
Key Features
Automatic Dependency Graphs:
Parse Python projects to extract modules, classes, functions, and their relationships (imports, calls, inheritance).
Clustering and similarity analysis for code structure insights.
Shortest path and dependency tracing between symbols.
Interactive Visualization:
D3.js-powered, animated force-directed layout.
Pan, zoom, drag, and select nodes/edges.
Hover for symbol previews, click for details.
Filter and focus on specific node types or clusters.
Seamless Navigation:
Jump to code directly from the graph.
Open files and symbols in VS Code with a click.
Real-Time Updates:
Graphs update as your code changes.
Works with Any Python Project:
Analyze any folder or workspace—no configuration required.
Getting Started
After installing the Context Graph extension:
Open a Python Project:
Open any folder or workspace containing Python code.
Interact with the panel
From either the activity bar or top editor bar, click the Context Graph icon to open the main graph panel.
Generate a Graph:
Open Context Graph view from the activity bar or top editor bar when in a file.
Use the "Generate Graph" button in the sidebar
Or Right-click a folder in the Explorer and select "Generate Context Graph".
Or use the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and search for Context Graph commands.
Explore and Analyze:
Pan, zoom, and select nodes/edges.
Click nodes for details about symbols and their relationships or open code directly in VS Code.
Run analytics and explore more options in the panel's sidebar.
Keep Your Graph Updated:
Context Graph automatically updates as you edit your code, ensuring you always have an up-to-date view of your project.
This can be configured in the settings.
Sync the graph with your code: Click the Context Graph icon in the activity bar to open a view that shows a subgraph of the current file you're working on.
Use CodeLens: Hover over Python symbols in your code to see a "View in Graph" option that takes you directly to that symbol in the graph.
Use the command palette (Ctrl+Shift+P) and type context-graph for additional commands (of actions that can be triggered from the palette or webview).
Why Use Context Graph?
Quickly understand unfamiliar codebases
Discover hidden dependencies and architecture issues
Improve code navigation and onboarding
Analyze and refactor large projects with confidence
