Setup dependency chart visualization tool

[devill]

Problem

Understanding the architecture and dependencies in RefakTS is challenging without visual representation. Currently, there's no easy way to:

1. Visualize file dependencies and import relationships
2. Understand class relationships and their interactions
3. Identify architectural patterns and potential issues
4. Group related components by directory structure
5. Spot dependency hotspots or overly connected components

Proposed Solution

Create a dependency chart visualization tool that can:

Core Features

• File-level dependency mapping - Show import/export relationships
• Class-level relationship mapping - Show inheritance, composition, usage
• Directory-based grouping - Visual organization by folder structure
• Interactive navigation - Clickable nodes, zoom, filter capabilities

Example Output Formats

• SVG/HTML for web viewing
• DOT format for Graphviz integration
• JSON for programmatic analysis
• ASCII for terminal viewing

Grouping Capabilities

src/
├── core/                    [Core Group]
│   ├── commands/           [Commands Subgroup]
│   ├── services/           [Services Subgroup]  
│   └── ast/               [AST Subgroup]
├── command-line-parser/    [CLI Group]
└── tests/                  [Test Group]

Implementation Approach

Option 1: RefakTS Command

# Generate dependency chart for current project
refakts dependency-chart src/ --output deps.svg
refakts dependency-chart src/ --format dot --group-by directory
refakts dependency-chart src/core/ --show-classes --interactive

Option 2: Standalone Tool

// Analyze TypeScript project dependencies
const analyzer = new DependencyAnalyzer(project);
const chart = analyzer.createChart({
  groupBy: 'directory',
  includeClasses: true,
  format: 'svg'
});

Visual Design Concepts

File Dependencies

• Nodes: Files
• Edges: Import relationships
• Groups: Directory boundaries
• Colors: File types (commands, services, tests)

Class Dependencies

• Nodes: Classes/interfaces
• Edges: Inheritance, composition, usage
• Groups: File or namespace boundaries
• Shapes: Different for classes, interfaces, types

Technical Implementation

Dependencies Analysis

• Parse TypeScript AST to extract import/export statements
• Analyze class relationships (extends, implements, uses)
• Build dependency graph data structure
• Apply grouping logic based on file paths

Visualization Engine

• D3.js for interactive web charts
• Graphviz for static high-quality layouts
• ASCII rendering for terminal output
• Force-directed layout for automatic positioning

Use Cases

1. Architecture review - Understand overall system structure
2. Refactoring planning - Identify tightly coupled areas
3. New developer onboarding - Visual overview of codebase
4. Dependency analysis - Find circular dependencies or hotspots
5. Documentation - Generate architectural diagrams

Example Commands

# Basic file dependency chart
refakts dependency-chart src/

# Class-level analysis with grouping  
refakts dependency-chart src/ --classes --group-by directory

# Interactive web chart
refakts dependency-chart src/ --interactive --output deps.html

# Focus on specific area
refakts dependency-chart src/core/services/ --depth 2

# ASCII output for CI/docs
refakts dependency-chart src/ --format ascii

Integration with Quality Checks

This tool could also help identify:

• Circular dependencies (related to separate circular dependency issue)
• Architectural violations
• Overly complex dependency patterns
• Isolated components that might be unused

Priority

Medium - Valuable for architecture understanding and planning, but not blocking current development.

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com