"Understand your codebase before reading every file."
A developer tool that analyzes source code and generates interactive dependency graphs, helping developers understand large codebases faster.
Instead of manually tracing dependencies like this:
UserService → AuthService → TokenManager
Developers can explore architecture visually through an interactive graph interface.
The tool scans project files, extracts relationships between modules, services, classes, and functions, and renders them in an explorable web-based visualization.
| Feature | Description |
|---|---|
| Dependency Visualization | Analyze imports and module references across your project |
| Call Graph Generation | Track function-to-function relationships and execution flow |
| Circular Dependency Detection | Detect and report dependency loops before they cause issues |
| Dead Code Detection | Identify unused files and modules |
| Impact Analysis | Select a node and see all affected components |
| Architecture Validation | Define and enforce architectural rules across your team |
# Run against current directory
npx codeviz
# Run against a specific source directory
npx codeviz src
# Generate an interactive HTML report
npx codeviz --htmlThe HTML report outputs to:
report/
├── index.html
├── assets/
└── graph.json
Open report/index.html directly in a browser — no server needed.
The tool follows a linear pipeline from source to visualization:
Project Source
↓
File Scanner
↓
AST Parser
↓
Dependency Extractor
↓
Graph Builder
↓
Visualization Engine
The SVG diagram above is automatically regenerated on every push using GitHub Actions + Mermaid CLI.
| Version | Languages |
|---|---|
| v1 | JavaScript, TypeScript |
| v2 | Python |
| v3 | Java, Go, Rust |
TypeScript is supported first because the TypeScript Compiler API provides reliable AST parsing out of the box.
- Language — TypeScript
- Parsing — TypeScript Compiler API
- CLI — Commander.js
- Build — tsup
- Testing — Vitest
- Linting — ESLint
- Visualization — React Flow
- Phase 1 — MVP · File scanning, AST parsing, dependency extraction, terminal output
- Phase 2 — Interactive Visualization · Cytoscape.js integration, search, zoom/pan, node inspection, impact analysis
- Phase 3 — Advanced Analysis · Circular dependency detection, dead code detection, architecture validation
- Phase 4 — Ecosystem · VS Code extension, GitHub Action, CI/CD integration
- Individual developers — understanding unfamiliar projects, learning architecture, refactoring
- Development teams — onboarding new members, code reviews, architecture discussions
- Open source contributors — navigating large repositories quickly
Requires Node.js 20 or newer (Corepack is bundled with Node).
git clone https://github.com/Arhitekton/GitCodeVisualizer.git
cd GitCodeVisualizer
npm install # Corepack pins npm 10.9.2 automatically
npm run build
npm testThe packageManager field pins the npm version. On npm install, a preinstall script enables Corepack and, if your global npm differs, re-runs the install with the pinned release automatically — no manual npx needed.
Contributions are welcome. Please open an issue first to discuss what you'd like to change.