https://github.com/zentch-q/depviz-dependency-visualizer
Function call & call stack diagrams for VS Code (Python/TS/JS). Architecture/UML, PlantUML export.
https://github.com/zentch-q/depviz-dependency-visualizer
architecture-diagram architecture-diagrams architecture-diagrams-generation call-stack code-map code-visualization code-visualization-tool dependency-graph dependency-graph-analysis function-call function-call-graph plantuml plantuml-diagrams uml uml-diagram vscode-extension
Last synced: 7 months ago
JSON representation
Function call & call stack diagrams for VS Code (Python/TS/JS). Architecture/UML, PlantUML export.
- Host: GitHub
- URL: https://github.com/zentch-q/depviz-dependency-visualizer
- Owner: ZENTCH-Q
- License: mit
- Created: 2025-10-03T00:54:47.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-23T00:04:18.000Z (8 months ago)
- Last Synced: 2025-10-23T02:18:02.899Z (8 months ago)
- Topics: architecture-diagram, architecture-diagrams, architecture-diagrams-generation, call-stack, code-map, code-visualization, code-visualization-tool, dependency-graph, dependency-graph-analysis, function-call, function-call-graph, plantuml, plantuml-diagrams, uml, uml-diagram, vscode-extension
- Language: JavaScript
- Homepage:
- Size: 377 KB
- Stars: 48
- Watchers: 1
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# DepViz — Call Graphs for VS Code (
Interactive **code maps** in **VS Code**. See **who calls what**, how modules → classes → functions connect, with **call** (solid, arrowed) and **import** (dashed) edges. **Python / TypeScript / JavaScript**. Export stuff.
## Why bother
- **Answer “what breaks if I touch X?”** in seconds.
- **Jump** to code (Go to Definition / Peek References).
- **Slice impact** inbound/outbound to see blast radius.
- **Export** PNG / SVG / JSON / snapshot (`.dv`).
## Install
- VS Code → Extensions → search **DepViz** → install.
- Or `code --install-extension depviz-*.vsix` if you like pain.
## Quick start
1. `DepViz: Open` (Command Palette) → empty canvas.
2. **Drag files/folders** in, or `DepViz: Import`.
3. Pan (mouse), zoom (wheel), right-click canvas for actions.
4. Click legend to toggle **call/import** visibility.
## Features (you’ll use)
- **Import** from Explorer / drag & drop.
- **See** modules, classes, functions; **edges**: call ✅, import ✅.
- **Arrange**: folders (Ctrl/Cmd+Shift+A) or balanced grid (…+B).
- **Search labels** (Ctrl/Cmd+F) with live highlighting.
- **Impact slices**: right-click node → Outbound / Inbound / Clear.
- **Export**: PNG / SVG / JSON / `.dv` snapshot.
- **Snapshots**: open `.dv` as a custom editor; Ctrl/Cmd+S saves.
## Shortcuts (remember two)
- **Arrange by folders**: Ctrl/Cmd+Shift+A
- **Balanced grid**: Ctrl/Cmd+Shift+B
- **Search**: Ctrl/Cmd+F
- **Toggle help**: Ctrl/Cmd+/
- **Clear slice**: Ctrl/Cmd+Shift+S
- **Undo/Redo**: Ctrl/Cmd+Z / Shift+Z or Y
- **Zoom**: `+` / `-`, **Pan**: arrows
## Drag rules (no surprises)
- **Functions** and **classes** drag.
- Drop near their **home** (module/class) to re-dock; otherwise they float.
- Cards won’t overlap: collisions get nudged.
- Right-click anything for context actions.
## Settings (because projects are messy)
```jsonc
// Settings → “DepViz”
"depviz.maxFiles": 2000, // hard cap per import
"depviz.maxFileSizeMB": 1.5, // skip huge files
"depviz.includeGlobs": ["**/*"], // what to scan
"depviz.excludeGlobs": [ // what to ignore
"**/.git/**", "**/node_modules/**", "**/__pycache__/**"
]
```
## Parsing (don’t @ me)
- Uses VS Code symbols when available; falls back to a heuristic parser.
- Handles Python + TS/JS. Calls = best-effort: name-based, scope-aware enough to be useful.
- Imports detected from `import`/`from…import`/`require`.
- Yes, dynamic/reflective nonsense will fool it. Bring tests, not tears.
## Known limits / gotchas
- Not a typechecker. If two functions share a name, it picks the closest import/module match.
- Huge repos: tune `maxFiles`, `maxFileSizeMB`, and globs.
- Impact slice summary (copy file list) appears when opened via the main panel; the `.dv` custom editor is view-only for that part.
## Export
Right-click canvas → **Export** → PNG / SVG / JSON / `.dv`.
SVG includes styles; PNG renders the current viewport.
## Uninstall note
It won’t touch your code. It only reads files and writes snapshots you save.
---
**TL;DR:** drag code in, see who calls who, slice blast radius, export receipts.
This extension is a prototype I'm working on to make it robust and reliable. stay tune :)