Graph Panel

This extension analyzes the import relationships between files within a project and provides a comprehensive visualization of the project structure. You can click on any file to see which other files are using it. It also supports search functionality, allowing you to search for files and/or directories by separating terms with commas.

Additionally, the extension includes a bird’s-eye view (project map) located in the bottom-right corner, as well as navigation tools on the left. Users can toggle visibility of elements in the graph using checkboxes to customize the display.

Support the Project

If you enjoy this extension and want to support its development, feel free to buy me a coffee! ☕️

Your support helps keep the project alive and improves its future features.

Recent Updates

• Fix duplicates modules (zoom and bird's eye) on files updates or structure alteration

Features

• Visualize file relationships and dependencies
• Support for modern frameworks (React, Vue, Angular, Svelte)
• Compatible with:
  • JavaScript (.js, .mjs, .cjs)
  • TypeScript (.ts, .d.ts)
  • JSX/TSX (.jsx, .tsx)
  • Vue (.vue)
  • Svelte (.svelte)
  • JSON (.json)

Demo

Watch the full demo video here.

Installation

1. Open VSCode
2. Access the extensions marketplace (Ctrl+Shift+X)
3. Search for "graph-panel"
4. Click "Install"

Usage

1. Open command palette (Ctrl+Shift+P or Cmd+Shift+P)
2. Type "Graph Panel : Show structure and links"
3. The panel will open displaying your project structure

License

EULA

You are not permitted to: Modify, decompile, disassemble, or reverse engineer this extension. Redistribute or sell this extension, in whole or in part. Use this extension to create derivative products. Remove or alter any copyright or proprietary notices included in this extension.