Code Mind Map - Visual Flow of Functions and Logic
A VS Code extension that creates interactive visual mind maps of your code structure, showing functions, imports, exports, modules, and their relationships in a side panel.
🧠 Features
Visual Code Structure: Transform your codebase into an interactive mind map
Real-time Updates: Automatically refreshes when code changes
Interactive Navigation: Click on nodes to jump to specific functions or classes
Multi-language Support: Works with JavaScript, TypeScript, JSX, and TSX files
Relationship Mapping: Shows imports, exports, and function relationships
Zoom & Pan: Navigate large codebases with smooth zoom and pan controls
Side Panel Integration: Seamlessly integrated into VS Code's interface
🚀 Why Use Code Mind Map?
No More Tab-hopping: Understand code flow without constantly switching files
Perfect for Large Codebases: Get a bird's eye view of complex projects
Great for Learning: Ideal for junior developers learning codebase patterns
Architecture Visualization: See how your modules connect and depend on each other
Code Review Aid: Quickly understand the structure of pull requests
📖 How to Use
Open the Mind Map: Click on the Code Mind Map icon in the Activity Bar
Explore Your Code: The extension automatically analyzes your workspace
Navigate: Click on any node to jump to that location in your code
Zoom & Pan: Use mouse wheel to zoom, drag to pan around the map
Refresh: Click the refresh button to update the map after code changes
🎨 Visual Elements
🟠 Orange Circles: Files
🟣 Purple Circles: Classes
🟢 Green Circles: Functions/Methods
🔴 Red Circles: Imports
🟡 Yellow Circles: Exports
Dashed Lines: Import relationships
Solid Lines: Contains relationships
⚡ Commands
Code Mind Map: Show Mind Map - Opens the mind map panel
Code Mind Map: Refresh Mind Map - Refreshes the current analysis
🔧 Technical Details
The extension uses:
AST Parsing: Leverages Babel and TypeScript parsers for accurate code analysis
