About Code Flow Visualizer
In the era of AI-driven development, we are writing code at insane speeds. However, velocity shouldn't come at the cost of visibility. We found ourselves spending more time navigating "spaghetti code" and jumping between tabs than actually solving problems. We were inspired to build a tool that gives developers an X-ray view of their architecture, allowing them to see the "why" and "where" of their logic without leaving their editor.
How We Built It
Code Flow Visualizer is built as a VS Code Extension to live where developers work. The architecture is split into three core pillars:
- The Analyzer: A custom engine that parses ASTs (Abstract Syntax Trees) across JavaScript, TypeScript, Python, and Java to identify function definitions and call sites.
- The Complexity Engine: LLM-Powered Complexity: Instead of simple line-counting, we integrated an LLM to perform deep semantic analysis. The model evaluates the code to determine its Runtime Complexity (Big O notation).
- The Visualizer: A high-performance JavaScript-based Webview. We used a force-directed graph algorithm to render nodes and edges, creating an interactive canvas that updates in real-time as you save your files.
What We Learned
We learned that the developer experience is about reducing cognitive load. By transforming abstract logic into visual hierarchies and using AI to provide meaningful descriptions and performance insights, we discovered that patterns of technical debt become visible almost instantly. We also honed our skills in VS Code Webview communication, passing complex data structures between the extension host and the JavaScript-driven UI.
Built With
- ast
- gemini
- javascript
- python
- thetokencompany
- typescript
Log in or sign up for Devpost to join the conversation.