A VS Code extension that visualizes file import relationships in your project. See how your files are connected through imports and exports with an interactive, draggable graph.
Features
📊 Interactive Visualization - Visualize all file import relationships in your project
🎯 Smart Filtering - Automatically shows only files that are part of the import/export graph
🎨 File Type Icons - Visual indicators for different file types (TypeScript, JavaScript, JSON, etc.)
🔄 Real-time Updates - Arrows automatically update when you drag cards or scroll
📁 Folder Path Display - See the folder structure for each file
🖱️ Drag & Drop - Reposition cards to organize your view
🎯 Hover Tooltips - Hover over arrows to see import relationships
📐 Automatic Layout - Files are automatically arranged based on their dependency depth
Requirements
VS Code 1.106.0 or higher
Node.js (for executing the visualization script)
Installation
Open VS Code
Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X)
Search for "Visualflizer"
Click Install
Usage
Open a workspace folder in VS Code
Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) to open the command palette
Type "Start visualisation" and select the command
The extension will:
Scan your project for TypeScript and JavaScript files
Extract import relationships
Generate an interactive visualization
Open it in a VS Code webview panel
How It Works
The extension:
Recursively scans your project directory
Extracts imports from .ts, .tsx, .js, .jsx, .mjs, and .cjs files
Resolves import paths to actual files
Creates an interactive graph where:
Cards represent files
Arrows show import relationships (from exported file to importing file)
Files are arranged horizontally by dependency depth
Features in Detail
File Filtering
Only files that either:
Import other files, OR
Are imported by other files
are shown in the visualization. This keeps the graph clean and focused on actual dependencies.
Automatic Layout
Files are automatically positioned:
Left to right by dependency depth
Files with no imports (or only external imports) appear on the left
Files that import others appear to the right of their dependencies
Interactive Elements
Drag cards to reposition them
Hover over arrows to see which file imports which
Scroll to navigate large projects - arrows update automatically
File Type Support
Icons are shown for:
📘 TypeScript (.ts)
⚛️ React/TSX/JSX (.tsx, .jsx)
📜 JavaScript (.js)
📋 JSON (.json)
And many more file types
Configuration
The extension respects your .gitignore file and automatically excludes:
Files and folders starting with .
Patterns defined in .gitignore
Known Limitations
Only processes TypeScript and JavaScript files
External package imports (from node_modules) are not visualized
Very large projects may take a moment to process
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
