CanDraw

CanDraw is the AI copilot that transforms your whiteboard into a creative partner. Describe your vision and watch it build flowcharts, connect ideas, and organize thoughts in real time.

Comment

Inspiration

Today, there are thousands of engineers that rely on drawing diagrams to sketch out their initial ideas, map relationships between different components, and look at dependencies that aren't exactly clear in the raw data or technical specifications. This is a task that nearly every engineer needs to complete and yet it is something that engineers struggle with the most. For example, the most common tools used- Figma, Lucid Chart, draw.io, and other advanced IDE extensions - are often extremely clunky to use and time-consuming. The shapes are extremely difficult to find and produce on screen in order to create a rapid draft - which defies the whole purpose of the tool. Additionally, the AI capabilities that are available for these tools, such as the text-to-diagram prompt features, prompt-based refinement, and styling, are locked behind premium features and limited. Unfortunately, this creates a significant barrier for engineers trying to quickly draft their plans, as it often requires them to learn an entirely new tool.

In fact, this is a challenge our team has faced multiple times firsthand, which is why we decided to find ways to make the planning much less burdensome and more efficient. At first, our team was contemplating building a tool that shows the user what specific features to utilize in Figma for their required diagram. Instead, we ended up deciding to use the amazing versatility that the Cedar OS library offers so that the LLM can draw the diagram directly into Figma instead of spending time drawing it out manually.

What it does

CanDraw is an AI copilot for diagramming software that transforms your text descriptions into clear, professional visuals. It's designed for engineers and developers to quickly map out system designs, create UML diagrams, and, as our demo showcases, generate detailed database schema diagrams. You simply describe your tables, columns, and relationships in plain English, and CanDraw builds the diagram for you. As a key feature, it can also automatically generate the corresponding SQL schema from your diagram, ready for you to export and use.

How we built it

We built CanDraw on a modern, type-safe stack designed for creating high-quality AI applications. The frontend is built with Next.js and the Cedar-OS component library for a polished, visually rich user interface. For the backend, we used Mastra, an agent orchestration framework that manages the complex AI workflows and handles all communication with the OpenAI API. The entire project is a unified TypeScript monorepo, ensuring a seamless and efficient development experience from the user interface to the AI core.

Challenges we ran into

Our main challenge was integrating a beta voice feature to allow users to draw with their voice. While the feature could transcribe our speech into text, the crucial agentic part, which is the logic that translates commands like "draw a circle" into actual actions on the canvas, was not working out of the box. This forced us to go beyond the documentation and deep dive into the library's source code itself. We had to reverse engineer the internal workflows to understand how to properly hook our voice commands into the canvas's rendering engine, a process that involved a lot of trial and error to finally get the shapes drawing on the canvas through the mic.

Accomplishments that we're proud of

We're incredibly proud of the sheer speed and quality of the diagrams CanDraw produces from just a few words. In just 36 hours, we built a tool that not only generates beautiful, accurate database schemas in seconds but also includes a proper SQL export feature. This allows developers to seamlessly transfer the generated schema to other AI tools or database environments, turning a simple diagram into a powerful, practical asset for any engineering workflow.

What we learned

This project was a deep dive into teamwork and creative problem-solving under pressure. We learned how to effectively manage complex React state management, tackling tricky race conditions in our real-time updates without the safety nets of diffing or history. A major lesson was in mastering agentic communication; teaching the AI to reliably interpret our commands required a level of collaborative debugging and creative thinking that pushed our skills to the limit. Ultimately, we learned how to approach and solve novel issues that none of us had ever faced before, strengthening our ability to innovate on the fly.

What's next for CanDraw

Our next goal is to expand CanDraw's capabilities beyond database schemas. We plan to add robust support for other critical diagram types, including system architecture and UML diagrams. We also aim to enhance our SQL export feature to support multiple SQL dialects (like PostgreSQL, MySQL, and SQLite) and eventually integrate directly with database management tools to allow for two-way synchronization between your live database and your CanDraw diagrams.

Built With

Share this project:

Updates