A Cursor / VS Code extension that uses AI to analyze your code and generate interactive Data Flow diagrams showing the flow between functions, classes, and modules.
Features
Single-file analysis -- generates a flowchart of function calls and class relationships within the active file.
Workspace analysis (Pro) -- generates a flow dependency diagram across the entire project (Pro feature).
QnA Analysis -- ask questions about the code and get answers with relevant code data flow.
Talk to Code (Pro) -- engage in a real-time voice conversation with an AI to discuss your code's architecture, logic, and flow diagrams using advanced multimodal capabilities.
Interactive diagram panel -- zoom, pan, explore nodes, and export to SVG directly within VS Code.
System browser preview -- open diagrams in a full-featured ReactFlow interface in your system browser for enhanced interactivity and exploration.
Flow history -- automatically saves generated diagrams so you can browse and re-open them later.
Language-agnostic -- works with any language the LLM can understand (TypeScript, Python, Go, Rust, Java, etc.).
Sidebar panel -- quick-access buttons, history list, and inline diagram preview.
Getting Started
Prerequisites
A language model provider must be active (Cursor, Claude-code, Codex).
CLI tools for any of these LLM providers should be installed and configured.
Usage
Via Sidebar
Open the Codeplay icon in the activity bar (left sidebar).
Click Analyze Current File or Analyze Workspace (Pro) or Ask a Question (Pro) via Chat input.
View your History of previous flows in the sidebar and click to view them.
Use Open in Browser for a full-tab interactive view with advanced node exploration.
Talk to Code: Click the microphone icon in the sidebar to start a live voice session. Discuss your code's logic, ask questions about the diagram, and get real-time audio explanations (Pro).
Via Commands
Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P) and run:
Command
Description
Codeplay: Generate Diagram for Current File
Analyze the active file and open the diagram panel
Codeplay: Generate Workspace Diagram
Analyze the whole workspace and open the diagram panel (Pro)
Codeplay: Open Diagram Panel
Re-open the last generated diagram in VS Code
Codeplay: Open Diagram in Browser
Open the interactive ReactFlow diagram in your system browser
Codeplay: Check License Status
View your current plan and usage limits
Codeplay: Activate Pro License
Enter a license key to unlock Pro features
Codeplay: Deactivate Pro License
Remove the current license from this machine
Configuration
You can customize Codeplay by opening Settings (Cmd+,) and searching for Codeplay:
codeplay.llm.provider: Choose your preferred AI engine (cursor, claude-code, or codex).
codeplay.llm.model: Specify a custom model name (e.g., gpt-4o) or leave as auto.
10x Productivity: Pro users get advanced workspace analysis, real-time voice interaction, and priority access to upcoming exciting features designed to supercharge your understanding of complex codebases.
Future Enhancements: We are constantly shipping new tools and AI-driven insights to help you build faster and smarter.
