Shuffle
Interactive codebase visualization with AI-powered flow analysis for VS Code.
Shuffle parses your entire workspace and renders it as an interactive node graph — showing files, folders, functions, classes, and variables. Switch to Flow View to see how your code connects: which functions call which, what reads and writes to variables, and how data moves through your codebase.
Features
Interactive Code Graph
Visualize your codebase as a zoomable, pannable node graph powered by React Flow. Nodes are color-coded by type — folders, files, functions, classes, variables, interfaces, enums, and types.
Two View Modes
- File View — Directory tree and code structure hierarchy
- Flow View — Function calls, variable reads/writes, and data flow relationships
AI-Powered Analysis
- Flow Analysis — Detects call relationships, variable reads, and writes across your codebase
- Generate Descriptions — AI-generated summaries explaining what each function and class does
- Ask Questions — Select any node and ask the AI assistant to explain it
Works with your existing VS Code language model (Copilot, Gemini) or directly with the Anthropic API.
Multi-Language Support
Parses TypeScript, JavaScript, Python, Go, Rust, Java, C/C++, Ruby, and PHP using a three-tier strategy:
- VS Code's built-in symbol provider (most accurate, uses your installed LSPs)
- Tree-sitter WASM fallback
- Regex-based fallback
Code Navigation
- Click a node to preview its source code in a side panel
- Double-click or use "Go to Code" to jump to the exact line in your editor
Smart Caching
First parse builds the graph; subsequent opens load instantly from cache. File watching automatically re-parses when you save changes.
Getting Started
- Install the extension
- Open a workspace
- Run Shuffle: Open Visualization from the command palette (
Ctrl+Shift+P / Cmd+Shift+P)
- Click Analyze Flow to detect relationships between code symbols
- Toggle between File View and Flow View
Configuration
| Setting |
Default |
Description |
shuffle.aiProvider |
vscode-lm |
AI provider: vscode-lm (Copilot/Gemini), anthropic, or none |
shuffle.anthropicApiKey |
"" |
Anthropic API key (only when using anthropic provider) |
shuffle.model |
claude-sonnet-4-20250514 |
Claude model for analysis |
shuffle.excludePatterns |
["node_modules", ".git", ...] |
Directories to skip |
shuffle.maxDepth |
10 |
Maximum directory traversal depth |
shuffle.debounceMs |
1000 |
File watcher debounce delay (ms) |
Requirements
- VS Code 1.90.0 or later
- For AI features: an existing VS Code language model (Copilot, Gemini) or an Anthropic API key
