v1.2.0 Latest Release

Dependency Analysis
Documentation

Visualize, understand, and navigate complex code dependencies with ease. Explore our comprehensive guides to make the most of the extension.

Getting Started

Installation, prerequisites, and basic setup to begin using the extension

Dependency View

Learn how to visualize and navigate your code dependencies

Configuration

Customize the extension to fit your specific project needs

Troubleshooting

Solutions to common issues and how to get support

Introduction#

CodeGraph is an advanced Visual Studio Code extension that revolutionizes how developers understand and navigate their codebase. By providing real-time visualization and analysis of code dependencies, it makes it easier to understand complex project structures and relationships.

🔍Visual Insights

Transform your code into interactive visual graphs for better understanding and navigation.

⚡Real-time Analysis

Get instant feedback on code dependencies and relationships as you write code.

🚀Improved Productivity

Navigate complex codebases with ease and identify potential issues before they become problems.

👥Team Collaboration

Share and explain code relationships with your team more effectively.

Dependency visualization preview

The interactive dependency graph visualizes connections between files, modules, and functions to help you understand your codebase structure.

Getting Started#

Quick Installation

  1. Open Visual Studio Code
  2. Navigate to the Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
  3. Search for "CodeGraph" and click Install
  4. Reload VS Code when prompted

Prerequisites

CodeGraph works with most programming languages and project types, but for optimal performance, ensure you have:

  • Visual Studio Code v1.60 or higher
  • A structured project with clear file relationships

Configuration

You can customize CodeGraph by creating a configuration file in your project root:

{
  "ignoreDirs": ["node_modules", "dist"],
  "analysisModes": ["imports", "exports", "calls"],
  "refreshRate": "onSave"
}

Dependency View#

The Dependency View is the core feature of CodeGraph, providing a visual representation of your code's dependency structure.

Generation

CodeGraph automatically generates a dependency graph based on your code structure. You can trigger a generation manually by:

  1. Opening the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
  2. Typing "CodeGraph: Generate Dependency View"
  3. Press Enter to start the analysis

Navigation

Navigate the graph using these controls:

  • Zoom: Mouse wheel or pinch gesture
  • Pan: Click and drag on the background
  • Select a node: Click on any file node
  • View file: Double-click on a node

Graph Features#

Node Types

CodeGraph visualizes different elements of your codebase as distinct node types:

File Nodes

Represent individual files in your project. Color-coded by file type.

Module Nodes

Represent importable modules or packages. Typically shown as larger nodes.

Function Nodes

Represent individual functions or methods when detailed analysis is enabled.

Connection Edges

Lines connecting nodes, indicating dependencies or relationships.

Usage Guide#

Basic Usage

After installation, CodeGraph will automatically analyze your project and create a dependency graph. To view the graph:

  1. Click the CodeGraph icon in the activity bar
  2. Select "Open Dependency View"from the context menu

Advanced Features

CodeGraph offers several advanced features for power users:

// Example: Custom analysis configuration
{
  "depth": 3,              // Maximum depth of dependency traversal
  "includeExternals": true, // Include external dependencies
  "focusFiles": [          // Files to focus the analysis on
    "src/main.ts",
    "src/components/**/*.tsx"
  ]
}

Configuration#

Settings

CodeGraph can be configured through the VS Code settings panel or by creating a.codegraph.jsonfile in your project root.

Customization Options

OptionTypeDefaultDescription
autoRefreshbooleantrueAutomatically refresh the graph when files change
layoutstring"force"Graph layout algorithm (force, tree, radial)
depthnumber5Maximum dependency depth to display

Troubleshooting#

Common Issues

Missing Dependencies

If some dependencies are not showing in the graph, check that they are properly imported in your code.

Solution:

  1. Verify import statements are correct
  2. Check that the files exist in the expected locations
  3. Try regenerating the dependency graph

Performance Issues

Large projects may experience performance issues when generating or displaying the dependency graph.

Solution:

  1. Limit the analysis depth in settings
  2. Exclude large library directories
  3. Focus the analysis on specific directories

Support

If you encounter issues not covered in the documentation, you can: