Dependency Visualizer

🔍 Explore your TypeScript/JavaScript codebase like never before

A powerful VSCode extension that transforms code exploration by visualizing class and method-level dependencies through an intuitive, interactive graph interface. Perfect for understanding complex codebases, refactoring legacy code, and onboarding new team members.

🚀 Now with Lightning-Fast Performance:

• 90%+ Memory Reduction: Optimized for large projects
• 80%+ Faster Load Times: Active file + tabs focus by default
• Real-Time Updates: Incremental analysis as you work
• Smart Scaling: Works seamlessly from small projects to enterprise codebases

Why choose this over traditional code navigation?

• See the big picture: Understand how your classes and methods connect
• Save time: Navigate complex codebases faster than ever
• Reduce bugs: Spot dependency issues before they become problems
• Better refactoring: Visualize impact before making changes

🎬 See It In Action

Experience the power of visual code exploration - from complex dependencies to instant navigation

🚀 What Makes This Special

📊 Smart Code Analysis

Stop getting lost in complex codebases! See exactly how your classes and methods connect.

• 🎯 Multi-Level Views: Switch between method-level detail and class-level overview
• 🔍 Deep Dependency Tracking: Inheritance, method calls, property access, and composition
• 📈 Real-Time Updates: Graph updates as you navigate your code

⚡ Lightning-Fast Navigation & Performance

Navigate large codebases in seconds, not minutes.

• 🖱️ Click to Jump: One click to open any file or method
• 🎛️ Smart Filtering: Focus on what matters - open files, specific directories, or exclude tests
• 📂 Split View: Keep your code and dependency graph visible simultaneously
• ⚡ Active File Focus: Default analysis of active file + open tabs only
• 🔄 Incremental Updates: Real-time analysis as you open new files
• 🎯 Intelligent Caching: Avoid re-analyzing unchanged files

🎨 Beautiful & Intuitive Interface

Built for developers who care about user experience.

• 🖼️ Interactive Graph: Zoom, pan, and explore with smooth animations
• 🎯 Focus Mode: Double-click any node to center the analysis around it
• 💾 Save Your Setup: Create and save filter presets for different workflows
• 📱 Responsive Design: Works perfectly in any VSCode layout

🚀 Installation

1. Open VSCode Extension Marketplace
2. Search for "Dependency Visualizer" or "DepEye"
3. Click Install
4. Restart VSCode if needed

📖 Usage

Quick Start

Basic Usage

Multiple ways to start analyzing your code:

1. Command Palette: Cmd+Shift+P / Ctrl+Shift+P → Type "Show Dependency Graph"
2. Status Bar: Click the $(graph) Deps button in the bottom status bar
3. Explorer Menu: Right-click any folder in Explorer → "Show Dependency Graph"
4. Auto-Activation: Opens automatically when you open TypeScript/JavaScript files

Display Mode Configuration

Configure how the graph is displayed in VSCode settings:

• beside (default): Split view beside current editor
• active: Replace current editor tab
• newColumn: Open in new column (2nd column)

Settings Path:

VSCode Settings → Extensions → Dependency Visualizer → Display Mode

Quick Reference

🎯 New Performance Features

Smart Analysis Modes:

• Active File Only: Focus on current file's dependencies (fastest)
• Open Tabs: Analyze all open tabs and their connections
• Full Project: Complete project analysis (enable in settings)

Real-Time Updates:

• Opening new tabs triggers incremental analysis
• No need to manually refresh the graph
• Intelligent caching prevents redundant analysis

📋 Supported File Types

• TypeScript (.ts, .tsx)
• JavaScript (.js, .jsx)
• ESM & CommonJS modules

⚙️ Configuration Options

🎯 Analysis Modes

Active File Focus (Default - Recommended)

• Analyzes only active file + open tabs + direct dependencies
• 90% faster and lighter memory usage
• Perfect for daily development workflow

Full Project Scan (Optional)

{
  "dependencyVisualizer.enableFullProjectScan": true
}

• Analyzes entire project (may impact performance on large projects)
• Use for comprehensive architecture analysis

🛠️ Technology Stack

• VSCode Extension: TypeScript 4.9+ with ts-morph
• Frontend: React 18 + TypeScript (Webview)
• State Management: Zustand 4.4
• Graph Rendering: React Flow 11.10
• AST Analysis: ts-morph 17.0 (TypeScript Compiler API)

📸 Screenshots

Method-Level Dependencies

Detailed visualization of method call relationships

Class-Level Dependencies

Clear display of class inheritance and dependencies

Filtering Capabilities

Flexible filters to focus on specific parts of your project

🐛 Troubleshooting

Graph Not Displaying

• Ensure your project contains TypeScript/JavaScript files
• Check VSCode Output panel for error messages

Performance Issues (Improved in Latest Version!)

New Optimizations:

• Default Active File Mode: Only analyzes active file + open tabs (90% faster)
• Incremental Updates: Real-time analysis as you work
• Smart Caching: Avoids re-analyzing unchanged files

For Large Projects:

• Keep default enableFullProjectScan: false setting
• Use file display mode filters: "Active File Only" or "Open Tabs"
• Gradually expand scope using "Scope Control" panel
• Consider enabling full project scan only when needed for architecture analysis

Files Not Opening

• Verify file paths are correct
• Check VSCode workspace settings

Memory Usage Optimization

Before (v1.0.14 and earlier):

• Analyzed entire project by default
• High memory usage on large codebases

After (v1.0.15):

• Active file + tabs focus by default
• 90%+ memory reduction
• Works seamlessly on enterprise-scale projects

🤝 Contributing

Bug reports and feature requests are welcome via GitHub Issues.

Pull requests are also welcome!

📄 License

MIT License

🔗 Related Links

• VSCode Extension API
• React Flow Documentation
• ts-morph Documentation

📈 What's New in v1.0.14

🚀 Major Performance Overhaul:

• 90%+ Memory Reduction: Optimized for enterprise-scale projects
• 80%+ Faster Load Times: Active file focus by default
• Incremental Analysis: Real-time updates as you work
• Smart Caching: Intelligent file analysis caching

✨ New Features:

• Active File + Open Tabs analysis mode (default)
• Optional full project scanning via settings
• Real-time incremental updates when opening new files
• Enhanced performance for large codebases

📋 Migration Guide:

• No action required - new optimizations are enabled by default
• To restore previous behavior, enable enableFullProjectScan: true
• Existing filters and presets work unchanged

⭐ If you find this useful, please give it a star!