Interactive dependency graph explorer for TypeScript workspaces.
Tangled shows the import graph of your workspace as a folder/file map. Step into folders to see the graph at each level. Dependencies sit to the left, dependents to the right.
Features
One card per folder or file under the current path, plus one external card for everything that leaves the view (npm packages and files outside the path).
Each card shows total imports and total exports. Expand a list to see where they come from; edges re-anchor to the matching row.
Three count modes: statement (one import declaration), symbol (unique target + symbol), file (unique source + target file pair).
Type-only edges are dashed. Pairs with runtime imports both ways are red. Rest on a card to focus its edges, hover an edge for the top file pairs.
Click an import or export row to jump to the import statement. Rows with several statements expand into a list.
A cycles pill appears in the toolbar when cards of the current view depend on each other in loops. One click copies a repair prompt for an AI assistant listing every mutual dependency, the statements behind it, and a small set of cuts that breaks the longer loops.
Drag cards, pan, zoom. Layout and viewport are saved per view.
Incremental rescans on save, create, delete, rename. Config changes (tsconfig.json, package.json) trigger a full rebuild.
Resolution uses the TypeScript compiler's own resolveModuleName, so paths aliases, baseUrl, workspace packages (workspace:* symlinks) and exports maps all work.
Commands
Command
Action
Tangled: Open
Opens the graph at the workspace root or the last viewed path.
Tangled: Open Here
Opens the graph at the folder of the active editor or Explorer selection.
Tangled: Refresh
Incremental rebuild.
Tangled: Rebuild
Deletes the cache and scans everything again.
Tangled: Reset Layout
Forgets dragged node positions for the current view.
Tangled: Reset View
Returns pan and zoom to the defaults.
Tangled: Expand Spacing / Shrink Spacing
Changes the gaps between cards for the current view.
Tangled: Screenshot Full View / Screenshot Current View
Copies a PNG of the graph to the clipboard.
Tangled: Copy Cycle Repair Prompt
Copies a prompt describing the circular dependencies among the current view's cards.
Tangled: Count Mode
Switches between statement, symbol and file counting.
Settings
tangled.countMode, tangled.rescanOnSave, tangled.fallbackExtensions, tangled.skipDirectories. The extension keeps a config.json in its global storage as the source of truth; changing a VS Code setting writes to it.
Development
npm install
npm test # scanner + view model tests against test/fixture
npm run cli -- <root> [path] [--mode symbol] [--files] [--cycles] # print a view, or the cycle prompt
npm run bench # webview benchmark in headless Chromium against generated repos (see bench/)
npm run package # builds tangled-<version>.vsix
npm run install-local # package + code --install-extension
