ProjectCodeWiz
Interactive C++ code structure visualization for Visual Studio Code
Developer: GaryDaVinci
Version: 1.0.0
Features
- 🔍 Workspace scanning — Recursively finds all
.cpp, .h, .hpp files
- 🌳 AST-based parsing — Extracts classes, functions, variables, objects, and include relationships
- 🕸️ Interactive graph — Rendered with Cytoscape.js inside a VS Code Webview
- 💬 @viz comments — Attach custom descriptions to nodes via inline comments
- 🔴 Error detection — Integrates with Clang to highlight syntax errors
- 🔗 Trace mode — Follow the full dependency chain from any node
- 📁 File view / Code view — Switch between file-dependency and full code graph
- 🔎 Search & filter — Find and show/hide node types instantly
- 📤 Export — Save graph as PNG or JSON
Usage
Trigger Visualization
Three ways to start:
- Status bar button — Click
$(graph) Visualize in the bottom status bar
- Command palette —
Ctrl+Shift+P → ProjectCodeWiz: Visualize
- Keyboard shortcut —
Ctrl+Shift+V (Windows/Linux) / Cmd+Shift+V (Mac)
- Editor title button — When a
.cpp/.h/.hpp file is open, click the graph icon in the editor title bar
- Explorer context menu — Right-click any file/folder →
ProjectCodeWiz: Visualize
Add custom descriptions to your code using inline @viz: comments:
class UserService {}; // @viz: Handles authentication
void login() {} // @viz: Authenticates user
Database db; // @viz: Main database instance
Rules:
- Must be on the SAME LINE as the declaration
- Must start with
@viz: (case-sensitive)
- Multi-line comments are NOT supported
These descriptions appear in node tooltips and are used to generate intelligent edge descriptions.
Configuration
Open VS Code Settings (Ctrl+,) and search for ProjectCodeWiz:
| Setting |
Default |
Description |
projectcodewiz.ignorePaths |
["node_modules","build","dist",".git","out","bin","obj"] |
Directories to skip |
projectcodewiz.clangPath |
"clang" |
Path to clang executable |
projectcodewiz.maxFileSizeKB |
500 |
Max file size to parse (KB) |
Node Types & Colors
| Type |
Shape |
Color |
| Class |
Oval (ellipse) |
🟢 Green |
| Object |
Oval (ellipse) |
🔵 Blue |
| Function |
Rounded Rectangle |
🟡 Orange/Amber |
| Variable |
Cut Rectangle |
🔷 Blue |
| File |
Diamond |
🟣 Purple |
Error Detection
If clang is installed and on your PATH, ProjectCodeWiz will run clang -fsyntax-only on each file.
- Red border = file has syntax errors
- Dashed red edge = connected to an errored node
- Tooltip shows the exact error message and line number
Requirements
- VS Code 1.74+
- Node.js 18+ (for extension development)
clang (optional, for error detection — install via your OS package manager)
| |
