FlowGenie

Inspiration

Flowcharts are an essential tool for organizing ideas, processes, and plans, but creating and editing them can often be time-consuming and complex. Inspired by the idea of making flowchart creation as simple as a conversation, we designed FlowGenie. By leveraging the power of Large Language Models (LLMs), FlowGenie enables users to generate, edit, and analyze flowcharts effortlessly, making it accessible to everyone from students to professionals.

What it does

FlowGenie simplifies the flowchart creation process. Using natural language input, users can describe their workflow, and FlowGenie will automatically generate a corresponding flowchart. The app also allows for easy editing and analysis, suggesting optimizations or adjustments as needed. With a user-friendly interface, FlowGenie is designed to enhance productivity by turning complex processes into clear, visual diagrams in just a few clicks.

How we built it

Our tech stack for FlowGenie includes Next.js, Excalidraw API, and OpenAI’s API, each playing a crucial role in delivering a seamless user experience. Users can provide input in either text or real-time audio, which is then processed and fed into the OpenAI API. Leveraging the power of ChatGPT-4's mini model, the API interprets user prompts and generates flowchart components in Mermaid syntax, a text-based diagramming language.

To ensure precise placement within an existing flowchart, we developed an intelligent placement algorithm that dynamically identifies and reserves suitable spaces within the grid, minimizing overlap and optimizing layout coherence. For every new prompt, we pass the current diagram’s structure to the LLM, enabling it to account for the present layout and make accurate adjustments to enhance flow and readability. Additionally, FlowGenie includes an analysis feature where users can request insights on existing flowcharts. The LLM then reviews the flowchart and, based on its extensive training, suggests missing or redundant elements to refine the design further. This setup, combining advanced language models with interactive graphics, allows FlowGenie to offer a unique, highly adaptive flowcharting experience that is both intuitive and insightful.

Challenges we ran into

One major challenge was efficiently placing new shapes in an existing flowchart while maintaining clarity and structure. As users added elements, we needed to locate empty spaces without disrupting the flow or causing overlap with existing components. This required implementing an intelligent placement algorithm that could detect available areas, avoid collisions, and preserve logical connections between shapes. Additionally, we had to balance user-defined customizations, like specific shapes or colors, with the spatial constraints of complex diagrams, ensuring each addition integrated seamlessly without crowding or obscuring the chart’s readability. This process deepened our understanding of adaptive layouts and spatial arrangement, enabling us to create a more dynamic and user-friendly flowcharting experience.

Accomplishments that we're proud of

We’re proud to have filled a significant market gap by creating a tool that offers unparalleled capabilities for creating, editing, and analyzing flowcharts with ease. Unlike other products, FlowGenie allows users to generate and modify flowcharts seamlessly, with an advanced level of control and AI-driven insights for optimizing their designs. Additionally, we’ve made FlowGenie accessible to a global audience by enabling multilingual support, allowing users to work in multiple languages and making the platform more inclusive. These accomplishments position FlowGenie as a unique, versatile solution that empowers users worldwide to visually organize and streamline their processes.

Where we used AI

We used v0 by Vercel to create the sliding feature in the chatbot.

What we learned

In building FlowGenie, we gained significant experience in managing public APIs and developing efficient placement algorithms. Creating an intelligent placement algorithm was a valuable learning experience, as it required us to carefully consider spatial dynamics, collision avoidance, and layout coherence. Balancing these factors to ensure smooth, visually appealing flowchart placement helped us develop a deeper understanding of adaptive layouts and user-centric design. Together, these insights have equipped us with a stronger foundation in building AI-powered, responsive applications.

What's next for FlowGenie

We want add features like editing text inside a shape and deleting a shape just by simply using the chatbot. Additionally we want the ability to integrate multiple users and allow them to have access to the same flowchart space and chatbot at the same time.