Inspiration
As a visual learner, I often find it hard to fully understand complex code or logic without first breaking it down into a flowchart. While exploring this idea, I realized I'm not alone many students, developers, and even professionals rely on visual representation to grasp concepts better. FlowMind AI was born out of the need to bridge the gap between raw logic and visual understanding by letting AI do the heavy lifting of converting sketches or static images into functional, editable flowcharts.
What it does
FlowMind AI takes an uploaded image (like a sketch or whiteboard diagram), uses OCR and AI to understand its content, and generates a corresponding flowchart-like structure on a web interface. Key features include:
Uploading an image from the frontend.
Extracting text and elements from the image via OCR.
Generating structured data for flowcharts.
Displaying the flow in a dynamic, interactive UI.
Option to download the final flowchart.
How we built it
-Frontend: Built using React + Vite, with a simple UI to upload images and display results.
-Backend: Created using Flask, with the help of: pytesseract for OCR,
-PIL for image processing, google.generativeai (Gemini) to understand and convert image text into a flowchart logic.
-Communication happens via REST APIs.
-Version control with Git & GitHub.
Challenges we ran into
Setting up the project was far from smooth. From managing multiple node_modules and conflicting folders to battling with Vite configurations and routing issues , I faced it all. Debugging why the app wouldn't run, figuring out missing imports, and ensuring the right environment was active tested both our patience and persistence. These hurdles reminded me that even great ideas need solid foundations and lots of coffee.
Accomplishments that we're proud of
I am proud of cracking the engineering behind a tool that translates static code into dynamic visual flows. From setting up the React + Vite environment to integrating routes and making the AI generate flowcharts , every bug fixed and every error resolved felt like a small victory. Most of all, building something that helps others learn the way we learn feels incredibly rewarding.
What we learned
-Using Gemini API for language understanding and logic generation.
-Better project structuring with .gitignore and file exclusions.
-Working with Flask CORS, OCR pipelines, and asynchronous image handling.
-How small details (like missing dependencies or folder names) can break your entire flow.
What's next for FlowMind AI
-Add drag-and-drop flowchart editor.
-Support for hand-drawn diagrams with better AI interpretation.
-Save flowcharts in SVG/PDF formats.
-Add user authentication and flowchart history.
-Make it mobile-friendly and add dark mode
Log in or sign up for Devpost to join the conversation.