VS Code Integration

hello@ghafoorsblog.com (AG Sayyed) — Mon, 09 Nov 2026 00:00:00 +0000

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

Rebuilding - When and how to refresh
Ignoring Files - Configure .graphifyignore

Extension on Ghafoor's Personal Blog

VS Code Integration

VS Code Integration

📦 Installation

From Marketplace

From Command Line

Via Graphify CLI (Auto-generates config)

🎯 Features

Status Bar Monitoring

Auto Activity Signaling

Command Palette Integration

Keyboard Shortcuts (Customizable)

⚙️ Configuration

Settings (.vscode/settings.json)

🔧 Workflow Integration

Task Integration (.vscode/tasks.json)

Launch Configuration (.vscode/launch.json)

🎯 Daily Workflow with Extension

1. Open Project

2. Run Query

3. Explain Current File

4. Trace Relationship

5. Rebuild After Changes

🐛 Troubleshooting

📋 Extension Commands Reference

Next Steps

Settings (`.vscode/settings.json`)

Task Integration (`.vscode/tasks.json`)

Launch Configuration (`.vscode/launch.json`)