VS Graph is a Visual Studio Code extension that generates and visualizes a graph of your project's file structure and import relationships. This extension helps you understand the architecture and dependencies of your project at a glance.
- Parses your project structure and creates nodes for each file and folder
- Analyzes imports in JavaScript and TypeScript files (.js, .ts, .jsx, .tsx)
- Generates a interactive graph visualization of your project structure
- Displays files, folders, and dependencies as different node types
- Shows import relationships as links between nodes
- Provides an interactive graph with zoom and pan capabilities
- Allows customization of graph layout and appearance
- Open Visual Studio Code
- Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X)
- Search for "VS Graph"
- Click Install
Alternatively, you can download the VSIX file from the releases page and install it manually.
- Open a project folder in VS Code
- Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
- Type "Show File Graph" and select the command
- The graph visualization will open in a new tab
- Zoom: Use the mouse wheel or trackpad gestures
- Pan: Click and drag on the background
- Move Nodes: Click and drag individual nodes
- View Node Details: Hover over a node to see its full path
You can customize the graph appearance and behavior using the controls in the top-left corner of the graph view:
- Toggle Background: Switch between a white background and a transparent background
- Center Force: Adjust how strongly nodes are pulled towards the center
- Repel Force: Change how strongly nodes repel each other
- Node Size: Modify the base size of the nodes
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
If you encounter any issues or have feature requests, please file an issue on the GitHub repository.