Visualize code references as an interactive graph.
- Interactive Graph View: See all references to a symbol displayed as a connected graph using React Flow
- Code Preview: Each node shows a syntax-highlighted code snippet (±3 lines) around the reference
- Symbol Highlighting: The referenced symbol is highlighted within each code snippet
- Smart Layout: Automatic graph layout using ELKjs that considers node sizes
- File Filtering: Filter nodes by file path using glob patterns (e.g.,
src/**/*.ts,**/test/**) - Export PNG: Save the current graph view as a PNG image
- Click to Navigate: Click any node to jump to that location in your editor
- Place your cursor on a function, variable, or other symbol
- Right-click and select "Show Reference Graph" or use the Command Palette
- The graph will appear in a side panel showing all references
Use the filter panel (top-left) to focus on specific files:
- Files to include: Show only matching files (e.g.,
src/**/*.ts) - Files to exclude: Hide matching files (e.g.,
**/node_modules/**) - Hide filtered nodes: Toggle to completely remove non-matching nodes (instead of dimming them)
Patterns use glob syntax — ** matches any directory depth, * matches any filename.
Click the Export PNG button (top-right) to save the current graph view as an image.
- VS Code 1.80.0 or higher
- A language server that supports "Find All References"
See CONTRIBUTING.md.