LLM Code Map - VSCode Extension

A VSCode extension that graphically visualizes code dependencies and structure for TypeScript/JavaScript.

Features

• Analyzes dependencies at function, class, and method levels
• Interactive D3.js graph rendered inside the VSCode sidebar
• Click any node to jump to that file (with cursor positioned at the symbol)
• Language Model Tool API integration so AI agents can drive the visualization

Trying Locally

Method 1: Development Mode (Recommended)

This is the easiest method during development.

1. Install dependencies

npm install

2. Compile TypeScript

npm run compile

3. Launch the Extension Development Host

• Open this project in VSCode
• Press F5, or
• Select "Run Extension" from the Debug panel (Cmd+Shift+D) and run it

4. A new VSCode window opens

• This window is the Extension Development Host
• The extension runs in this window

5. Use the extension

• The "LLM Code Map" view appears in the Explorer sidebar
• Click the refresh button to run code analysis

Method 2: Package and Install a .vsix

Use this method if you want to try it in a production-like environment.

1. Install vsce (first time only)

npm install -g @vscode/vsce

2. Create a .vsix file

vsce package

This produces codemap-<version>.vsix.

3. Install in VSCode

• Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
• Select "Extensions: Install from VSIX..."
• Pick the .vsix file

4. Enable the extension

• Find "LLM Code Map" in the Extensions panel and enable it
• Reload VSCode

Usage

Manually generate a code map

1. Open the "LLM Code Map" view in the sidebar
2. Click the refresh button
3. The graph is displayed

Drive it from an AI agent

Mention it in chat:

• "Visualize the dependencies of this project"
• "Display the code structure using #codemap"

Language Model Tool API

The extension contributes a tool named codemap_analyze that an LLM can call directly. There are two ways to use it:

Fast path: pass nodes + edges directly

When the calling LLM has already analyzed the code, it can hand the graph in as-is and skip a full workspace scan:

{
  "nodes": [
    { "id": "file:src/server.ts", "label": "server.ts", "type": "file" },
    {
      "id": "function:src/server.ts:listRooms",
      "label": "listRooms",
      "type": "function",
      "filePath": "src/server.ts"
    }
  ],
  "edges": [
    {
      "source": "file:src/server.ts",
      "target": "function:src/server.ts:listRooms",
      "type": "reference",
      "label": "contains"
    }
  ]
}

Discovery path: pass hints, let the extension scan

If the LLM only knows file/function/class names, it can pass hints and let the extension parse and filter:

Parameter	Type	Purpose
workspacePath	string	Absolute path of the workspace to analyze (defaults to current).
filePattern	string	Glob to restrict analysis (defaults to **/*.{ts,tsx,js,jsx}).
targetFile	string	Single file to focus on.
relatedFiles	string[]	Additional files to keep in the graph (relative paths or basenames).
relatedFunctions	Array<{ name; filePath? }>	Functions to include and BFS-expand connections from.
relatedClasses	Array<{ name; filePath? }>	Classes to include (with their methods).
focusNodes	string[]	Specific node IDs (file:..., function:...:name, etc.) to focus on.
nodes / edges	see above	Direct spec — when supplied, skips the discovery filtering entirely.

Node ID format

• file:<absolute-or-relative-path>
• function:<path>:<name>
• class:<path>:<name>
• method:<path>:<className>.<methodName>

Edge types

• import (file → file)
• export (file → file)
• call (function → function)
• extends (class → class)
• implements (class → interface)
• reference (file → contained function/class/method)

Development

Architecture

TypeScriptAnalyzer  ──►  DependencyExtractor  ──►  CodemapViewProvider  ──►  Webview (D3.js)
   (TS Compiler API)       (build nodes/edges)       (post graph data)         (force-directed)

• analyzer/TypeScriptAnalyzer.ts — walks each source file with the TS Compiler API and extracts functions, classes, methods, imports, exports.
• analyzer/DependencyExtractor.ts — turns the raw analysis into GraphNode[] + GraphEdge[]. Also handles LLM-context filtering and the direct createGraphFromLLMSpec fast path.
• visualizer/CodemapViewProvider.ts — WebviewViewProvider for the sidebar. Renders D3.js inline and bridges messages between the host and webview.
• visualizer/graphDataTransformer.ts — single source of truth for node/edge colors and the GraphData → D3 shape conversion.
• tools/codemapTool.ts — implements the codemap_analyze Language Model Tool.
• utils/logger.ts — wrapper around vscode.window.createOutputChannel('LLM Code Map').

File structure

codemap/
├── src/
│   ├── extension.ts              # Entry point
│   ├── analyzer/                 # TS analysis + graph extraction
│   ├── visualizer/               # WebviewViewProvider + D3 transform
│   ├── tools/                    # Language Model Tool
│   └── utils/                    # Logger, file/path helpers
├── media/                        # d3.v7.min.js shipped to the webview
└── out/                          # Compiled output

Commands

• npm run compile — compile TypeScript
• npm run watch — compile in watch mode
• npm run lint — run ESLint (flat config)
• npm run format / npm run format:check — Prettier write / check

Logs

Extension-host logs are written to the LLM Code Map channel in the Output panel (View → Output). Webview-side logs still go to the webview's console — use the Developer Tools window opened from the Extension Development Host.

Known limitations

• Only TypeScript/JavaScript files are parsed (.ts, .tsx, .js, .jsx).
• The graph is rendered inline as part of the webview HTML, so very large workspaces (thousands of nodes) will be slow to lay out.
• Call edges use a simplified caller-attribution heuristic (any function node in the same file) — accurate enclosing-function detection is not implemented yet.
• import resolution uses suffix matching against discovered files and may miss aliased paths (e.g. tsconfig paths mappings).

Troubleshooting

Extension not displayed

• Reload VSCode (Cmd+R or Ctrl+R)
• Check the Explorer sidebar
• Check for errors in the LLM Code Map output channel

Graph not displayed

• Verify a workspace is open
• Verify TypeScript/JavaScript files exist
• Click the refresh button

License

MIT