⚡ CodeFlow Visualizer (codeflow-viz)

Installable AI Coding-Agent Skill & Interactive Visual Developer Tool for Cursor, VS Code, and npx

codeflow-viz performs static & AST codebase analysis on frontend and backend repositories to generate a visual, interactive map of complete application data flows: Pages, User Interactions, Event Handlers, API Endpoints, Actual Returned JSON Data, Data Transformations, State Stores, and Database ERD schemas.

🌟 Key Capabilities

1. Complete Flow Hierarchy:

   Project
    └── Pages & Routes
         └── Tabs / Sections
              └── Buttons / Links / Clickable Events
                   └── Event Handler
                        ├── Parameters Sent
                        ├── API Endpoint Called (HTTP Method)
                        ├── Request Headers / Body / Query Params
                        ├── Actual Sample/Live Response Data
                        ├── Data Transformation (map, filter)
                        ├── Database Tables / Collections
                        ├── State / Store (React state, Context, Redux)
                        └── UI Component Representation

2. Multi-Language Framework Support:

   • Frontend & Fullstack: React, Vue, Next.js, HTML, CSS, JavaScript/TypeScript (.js, .jsx, .ts, .tsx, .vue).
   • Python Backend: FastAPI (@app.get), Flask (@app.route), Django (path()), SQLAlchemy, Django ORM (.py).
   • Java Backend: Spring Boot (@RestController, @GetMapping, @PostMapping), JPA/Hibernate (@Entity) (.java).
   • Databases: PostgreSQL/SQL (.sql), Prisma (.prisma), MongoDB/Mongoose.

3. Actual Returned Data (Not Merely Response Schemas):

   • Displays real sample/live payloads with expandable/collapsible JSON tree nodes.
   • Shows field names, data types (string, number, boolean, array), representative values (e.g. title: "Wireless Headphones", quantity: 1, price: 4999.00), array lengths, timestamps, IDs, and nulls.

4. Automatic Secret Redaction Engine:

   • Redacts sensitive credentials, passwords, JWT tokens, Bearer headers, and API keys ([REDACTED_SECRET]).

5. Database ERD & Field Tracing:

   • Separate but linked Database ERD panel mapping database columns directly to API response fields and UI components (DB: user_carts.total_amount → API: response.cart.totalAmount → State: cart.subtotal → UI: CartSummaryCard).

6. Live API Mode:

   • Execute real HTTP fetch calls directly from the visualization drawer with status code, headers, execution time, and fallback diagnostic messages if offline/CORS blocked.

7. IDE Integration & Source File Navigation:

   • Single-click "Open in IDE" button links any discovered node back to exact file paths and line numbers in Cursor or VS Code.

🚀 Quick Start with npx

No global installation required! Run directly inside any project directory:

npx codeflow-viz

Options:

# Specify target directory
npx codeflow-viz ./path/to/project

# Custom port
npx codeflow-viz --port 3800

# Headless mode (do not automatically open browser)
npx codeflow-viz --no-open

🤖 Cursor & VS Code AI Agent Skill Setup

codeflow-viz includes a native skill definition located at skills/appflow-visualizer/SKILL.md.

To install the skill in your project for Cursor or VS Code AI Agents:

1. Copy the skills/appflow-visualizer folder into .agents/skills/appflow-visualizer in your repository.
2. AI agents will automatically detect the skill and invoke npx codeflow-viz to inspect application flow, endpoints, and database models.

🖥️ VS Code & Cursor Extension Integration

The package includes a VS Code Extension provider in src/vscode/extension.js.

To run inside an editor webview tab in Cursor or VS Code:

1. Run npx codeflow-viz.
2. Execute VS Code Command Palette: CodeFlow: Open Application Data Flow Map.
3. The visualizer dashboard opens directly in an editor panel.

🏗️ Architecture & Normalized Graph Schema

Codebase (Frontend / Backend / Database)
   │
   ▼
Static Analyzer Engine (AST & Regex Tokenizer)
   │
   ▼
Normalized Project Graph (.codeflow-graph.json)
   │
   ├── secretRedactor (Redacts credentials & API keys)
   └── sampleDataGenerator (Generates actual response data)
   │
   ▼
Visualization Engine Server (Local Express HTTP Server)
   ├── Web UI (Browser mode @ http://localhost:3800)
   ├── IDE Webview (Cursor & VS Code integration)
   └── AI Agent Skill (SKILL.md)

Graph JSON Schema Output (.codeflow-graph.json):

{
  "meta": {
    "projectName": "Sample Project",
    "analyzedAt": "2026-08-24T13:35:00Z"
  },
  "pages": [],
  "interactions": [],
  "apis": [],
  "responses": [],
  "databases": [],
  "dataSources": [],
  "relationships": []
}

🛡️ License

MIT License © Google DeepMind Agentic Coding Team