CodeTerrain

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

1. Open a TypeScript, JavaScript, or React project in VSCode.
2. Click inside any function or component name.
3. 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

Supported Languages

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)