A VSCode extension that visualizes your codebase as interactive graphs.
Features
Call Graph
Right-click any function or component → CodeTerrain: Show Call Graph from Here
Traces all outgoing calls recursively and renders them as a collapsible tree. Useful for understanding how deeply nested a function's dependencies are, or mapping out a React component tree from a root component.
Folder Map
Right-click → CodeTerrain: Show Folder Map for Current File
Renders your entire workspace folder tree with the current file highlighted. Useful for onboarding to a new project or explaining file placement to a teammate.
Installation
From source (development):
git clone <repo>
cd codeterrain
npm install
npm run build
# Press F5 in VSCode to open the Extension Development Host
From .vsix:
code --install-extension codeterrain-0.1.0.vsix
Usage
- Open a TypeScript, JavaScript, or React project in VSCode.
- Click inside any function or component name.
- Right-click → choose a CodeTerrain command.
The panel opens to the right of your editor. Use + / − to zoom, drag to pan, and click nodes in the call graph to collapse or expand subtrees.
Documentation
| Doc | What it covers |
|---|---|
| Architecture | How the four layers fit together, data flow diagram |
| Decisions | Why specific technical choices were made |
| Code Conventions | Naming, argument, and structure rules used in this codebase |
| WebView Communication | The message contract between the extension and the graph renderer |
| Getting Started | How to run, build, package, and publish |
| Roadmap | Planned features for v0.2 and beyond |
Supported Languages
| Language | Call Graph | Folder Map |
|---|---|---|
TypeScript (.ts) |
✅ | ✅ |
TypeScript React (.tsx) |
✅ | ✅ |
JavaScript (.js) |
✅ | ✅ |
JavaScript React (.jsx) |
✅ | ✅ |
Call graph support depends on the language server being active. For .js files, add a jsconfig.json to your project root.
Requirements
- VSCode 1.85+
- Node.js 18+ (for building from source)