CodeFlow AI

• 

  Dashboard

Inspiration

Many students and beginner developers struggle to understand how a program actually works internally. Reading code alone is often confusing, especially when loops and conditions are involved. We wanted to build a tool that doesn’t just convert code, but helps users truly understand the logic behind it using visual and human-friendly explanations.

What it does

CodeFlow AI analyzes source code and transforms it into:

1. Clear, human-readable logic explanations
2. Real flowcharts with proper symbols (decision, input/output, process, loops)
3. Visual representation of program control flow This helps users understand algorithms faster, debug easily, and learn programming concepts more effectively.

How we built it

We built CodeFlow AI using:

1. Flask for backend and frontend routing
2. Google Gemini API for intelligent code understanding
3. Mermaid.js for generating real flowcharts
4. HTML, CSS, and JavaScript for a clean and responsive UI The system uses an intermediate logic representation to separate explanation, visualization, and conversion, ensuring accuracy and scalability.

Challenges we ran into

1. Handling AI responses that were inconsistent or incomplete
2. Designing a true flowchart system instead of simple box diagrams
3. Managing API rate limits and empty responses
4. Separating human explanation from machine logic representation
5. Maintaining smooth data flow between explanation and visualization Each challenge helped us improve system reliability and architecture.

Accomplishments that we're proud of

1. Built real textbook-style flowcharts with loops and decisions
2. Successfully separated logic explanation and flow visualization
3. Designed a clean, beginner-friendly interface
4. Implemented an AI-powered program analysis pipeline
5. Created a project that goes beyond simple code conversion

What we learned

1. AI outputs must be normalized before use
2. Visualizing program logic requires control-flow understanding
3. Clean architecture is more important than writing more code
4. User experience matters as much as functionality
5. Building real-world AI systems involves handling failures gracefully

What's next for CodeFlow AI

In the future, we plan to add:

1. Step-by-step execution animation
2. Algorithm and time-complexity detection
3. Pseudocode generation
4. Export flowcharts as images or PDFs
5. Support for more programming languages
6. Beginner and exam-oriented learning modes CodeFlow AI aims to become a complete learning and program-understanding platform.

Built With

• api
• css
• flask
• gemini
• html
• javascript
• python