VS Code Integration
The GraphifyStats extension provides seamless VS Code integration for Graphify.
📦 Installation
From Marketplace
- Open VS Code Extensions (
Ctrl+Shift+X) - Search “GraphifyStats”
- Click Install
From Command Line
1code --install-extension graphify.graphify-stats
Via Graphify CLI (Auto-generates config)
1# Run in project root
2graphify install
3# Creates/updates .vscode/settings.json with Graphify config
4# Adds agent instructions to AGENTS.md / CLAUDE.md
🎯 Features
Status Bar Monitoring
- Live spinner during
graphify update . and graphify . - Last command with timestamp and duration
- Status: idle / running / success / error
- Click to open
graph.html in browser
Auto Activity Signaling
- Automatically touches
.graphify-activity before every command - No manual
mkdir -p graphify-out && touch graphify-out/.graphify-activity needed - Works with terminal, tasks, and keybindings
Command Palette Integration
| Command | Action |
|---|
GraphifyStats: Query | Run graphify query "..." with input prompt |
GraphifyStats: Explain | Run graphify explain <file> on active editor |
GraphifyStats: Path | Run graphify path <A> <B> with two-file picker |
GraphifyStats: Update | Run graphify update . --code-only |
GraphifyStats: Open Graph | Open graphify-out/graph.html in browser |
GraphifyStats: Add Agent Instructions | Prepend Graphify instructions to AGENTS.md |
Keyboard Shortcuts (Customizable)
1// keybindings.json
2{
3 "key": "ctrl+g q",
4 "command": "graphify-stats.query",
5 "when": "editorTextFocus"
6},
7{
8 "key": "ctrl+g e",
9 "command": "graphify-stats.explain",
10 "when": "editorTextFocus"
11},
12{
13 "key": "ctrl+g p",
14 "command": "graphify-stats.path",
15 "when": "editorTextFocus"
16},
17{
18 "key": "ctrl+g u",
19 "command": "graphify-stats.update",
20 "when": "editorTextFocus"
21}
⚙️ Configuration
Settings (.vscode/settings.json)
1{
2 "graphify-stats.autoSignalActivity": true,
3 "graphify-stats.showStatusBar": true,
4 "graphify-stats.defaultMode": "code-only",
5 "graphify-stats.graphPath": "graphify-out/graph.json",
6 "graphify-stats.openGraphOnBuild": false
7}
| Setting | Default | Description |
|---|
autoSignalActivity | true | Auto-touch .graphify-activity before commands |
showStatusBar | true | Show Graphify status in status bar |
defaultMode | "code-only" | Default rebuild mode |
graphPath | "graphify-out/graph.json" | Path to graph file |
openGraphOnBuild | false | Auto-open graph.html after build |
🔧 Workflow Integration
Task Integration (.vscode/tasks.json)
1{
2 "version": "2.0.0",
3 "tasks": [
4 {
5 "label": "Graphify: Rebuild (Code-Only)",
6 "type": "shell",
7 "command": "graphify update . --code-only",
8 "group": "build",
9 "presentation": {
10 "reveal": "silent",
11 "panel": "shared"
12 },
13 "problemMatcher": []
14 },
15 {
16 "label": "Graphify: Rebuild (Full)",
17 "type": "shell",
18 "command": "graphify update .",
19 "group": "build",
20 "presentation": {
21 "reveal": "silent",
22 "panel": "shared"
23 },
24 "problemMatcher": []
25 },
26 {
27 "label": "Graphify: Query",
28 "type": "shell",
29 "command": "graphify query \"${input:query}\"",
30 "group": "test",
31 "presentation": {
32 "reveal": "always",
33 "panel": "shared"
34 },
35 "problemMatcher": []
36 }
37 ],
38 "inputs": [
39 {
40 "id": "query",
41 "type": "promptString",
42 "description": "Graphify query",
43 "default": "project overview"
44 }
45 ]
46}
Launch Configuration (.vscode/launch.json)
1{
2 "version": "0.2.0",
3 "configurations": [
4 {
5 "name": "Graphify Query",
6 "type": "node",
7 "request": "launch",
8 "command": "graphify query \"${input:query}\"",
9 "console": "integratedTerminal"
10 }
11 ],
12 "inputs": [
13 {
14 "id": "query",
15 "type": "promptString",
16 "description": "Architecture question",
17 "default": "how does the youtube content pipeline work?"
18 }
19 ]
20}
🎯 Daily Workflow with Extension
1. Open Project
- Extension detects
graphify-out/graph.json - Status bar shows “Graphify: Ready”
2. Run Query
Ctrl+Shift+P → GraphifyStats: Query- Type: “how does the vocabulary extraction work?”
- Output opens in new editor tab
3. Explain Current File
- Open
scripts/dictionary/yt-to-content-v2.py Ctrl+Shift+P → GraphifyStats: Explain- Shows functions, imports, calls in output panel
4. Trace Relationship
- Open two files (e.g., task + script)
Ctrl+Shift+P → GraphifyStats: Path- Select both files → shows call chain
5. Rebuild After Changes
Ctrl+Shift+P → GraphifyStats: Update- Status bar shows spinner during rebuild
- Click status bar when done → opens
graph.html
🐛 Troubleshooting
| Issue | Solution |
|---|
| Extension not activating | Open folder with graphify-out/; run graphify . --code-only first |
| Status bar not showing | Enable graphify-stats.showStatusBar in settings |
| Auto-signal not working | Check graphify-stats.autoSignalActivity: true |
| Commands fail | Ensure graphify in PATH; restart VS Code after install |
| Graph not found | Run graphify . --code-only to create initial graph |
📋 Extension Commands Reference
| Command ID | Description |
|---|
graphify-stats.query | Run architecture query with prompt |
graphify-stats.explain | Deep-dive on active file |
graphify-stats.path | Trace relationship between two files |
graphify-stats.update | Rebuild graph (code-only) |
graphify-stats.updateFull | Rebuild full graph (needs API key) |
graphify-stats.openGraph | Open graph.html in browser |
graphify-stats.addAgentInstructions | Add Graphify instructions to AGENTS.md |
Next Steps
