La Hiper

Inspiration

As students ourselves, we noticed a recurring problem in programming classes: students often write syntactically correct code that simply does not do what they intended. The logic is broken, but nothing tells them where or why. Debugging becomes frustrating and slow. We also know from learning science that people understand complex ideas much faster through visuals than through text

What it does

FlowViz is a PyCharm plugin that generates an interactive flowchart of your Python code in real time, directly inside the IDE. As you write, the diagram updates instantly — no need to run the code. It supports bidirectional navigation: clicking a line of code highlights the corresponding node in the diagram, and clicking a node in the diagram jumps to the exact line in the editor. Nested structures like if-inside-if are rendered smaller and with attenuated colors to reflect their depth visually.

How we built it

We built FlowViz using Claude Code, which generated the entire codebase from our descriptions. The plugin is written in Kotlin using the IntelliJ Platform Plugin SDK. Claude Code built a custom Python parser, a Mermaid.js diagram generator, and an embedded browser panel inside PyCharm. It also implemented the bidirectional sync between the editor and the diagram.

Challenges we ran into

Sometimes the plugin did not behave exactly as we intended. Getting the diagram to render correctly in all cases, especially with nested structures and special characters, required many iterations until it worked the way we envisioned.