A VS Code extension that generates interactive visual maps of your codebase, showing file dependencies and module relationships to help developers understand and navigate large projects.

• Interactive Dependency Graph: Visualize how files and modules connect in your project
• Smart Code Analysis: Automatically parse JavaScript/TypeScript files to extract imports, exports, and function calls
• Live Navigation: Click on any node to open the corresponding file in VS Code
• Powerful Filtering: Filter by directory, file type, or custom patterns
• Multiple Export Formats: Export your code map as PNG, SVG, or JSON
• Performance Optimized: Handles medium to large codebases efficiently with lazy loading

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Visual Code Map"
4. Click Install

git clone https://github.com/Prawal-Sharma/VisualCodeMap.git
cd VisualCodeMap
npm install
npm run compile

1. Open a project in VS Code
2. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
3. Run "Visual Code Map: Generate Code Map"
4. The interactive graph will open in a new panel

• Click: Select a node and open file
• Drag: Pan around the graph
• Scroll: Zoom in/out
• Right-click: Context menu with additional options

• Filter by directory: Focus on specific parts of your codebase
• Filter by file type: Show only .ts, .js, .jsx, etc.
• Hide external dependencies: Focus on your code only
• Search: Find specific files or modules

Currently supports:

• JavaScript (.js, .mjs)
• TypeScript (.ts, .tsx)
• React/JSX (.jsx, .tsx)

Configure Visual Code Map in VS Code settings:

{
  "visualCodeMap.maxDepth": 10,
  "visualCodeMap.excludePatterns": ["node_modules", "dist", "build"],
  "visualCodeMap.colorScheme": "default",
  "visualCodeMap.showOrphanedFiles": false,
  "visualCodeMap.layout": "force-directed"
}

See DEVELOPMENT.md for setup instructions and contribution guidelines.

See ARCHITECTURE.md for technical details about the extension's design.

• VS Code 1.74.0 or higher
• Node.js 16.x or higher (for development)

• Large repositories (>10,000 files) may take longer to analyze
• Circular dependencies are detected but may cause layout issues

Contributions are welcome! Please read our Contributing Guidelines before submitting PRs.

MIT License - see LICENSE file for details.

Inspired by tools like CodeSee and CodeViz, built to be lightweight, local, and open-source.

• Report issues on GitHub Issues
• Read the documentation

Built with focus on developer experience and codebase understanding.