Reference Graph

English | 日本語 | 简体中文

Visualize code references as an interactive graph.

Features

• 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

Usage

1. Place your cursor on a function, variable, or other symbol
2. Right-click and select "Show Reference Graph" or use the Command Palette
3. The graph will appear in a side panel showing all references

Filtering Nodes

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.

Exporting as PNG

Click the Export PNG button (top-right) to save the current graph view as an image.

Requirements

• VS Code 1.80.0 or higher
• A language server that supports "Find All References"

Contributing

See CONTRIBUTING.md.