GoToDev

• 

  GoToDev

Inspiration

The biggest hurdle in starting a new project isn't the coding—it's the architecture. We often sketch rough diagrams on paper or whiteboards, but turning those scribbles into a real technical stack is a slow, manual process. I wanted to create a bridge where you could literally "vibe" with Gemini: draw a messy box, say "I want a database here," and have Gemini generate the mermaid.js diagram, the database schema, and the API boilerplate instantly.

What it does

VibeGraph is an AI-powered architect. It allows users to:

• Upload a photo of a whiteboard sketch or use a digital canvas.
• Chat with the diagram to refine the architecture (e.g., "Switch the database to PostgreSQL and add a Redis cache").
• Generate Code: It outputs a full boilerplate based on the visual "vibe," including Dockerfiles and environment variables.
• Interactive Visuals: It renders live diagrams using Mermaid.js that update in real-time as you talk to the AI.

How we built it

We leaned heavily into Gemini 3 Pro for its speed and multimodal capabilities.Frontend: A Next.js application using a "canvas" library for sketching.AI Logic: We used the Gemini API via Google AI Studio's "Vibe Code" workflow. We sent image data (sketches) alongside system instructions to interpret visual relationships.Rendering: The app converts Gemini’s text output into Mermaid.js syntax for the UI.Formulae: To calculate system load or latency estimates based on the architecture, we used Gemini to generate LaTeX-based performance models

Challenges we ran into

The hardest part was spatial reasoning. Getting an LLM to understand that a "box on the left" is connected to a "circle on the right" required very specific prompting. We overcame this by using "Vision-to-JSON" mapping, where Gemini first describes the coordinates of elements before generating the code.

Accomplishments that we're proud of

We managed to get the "Vibe-to-Code" loop under 5 seconds. Seeing a hand-drawn doodle of a cloud and a phone icon turn into a working React/Node.js folder structure was a "magic" moment for the team.

What we learned

We learned that "vibe coding" isn't just about laziness; it’s about reducing the cognitive load between a creative thought and a technical implementation. We also realized that Gemini is incredibly capable of following strict formatting (like Mermaid.js) even when the input is a messy image.

What's next for GoToDev

For GoToDev, VibeGraph is the first step toward a "Full-Stack Mirror." We want to add a feature where Gemini can look at a legacy codebase and "draw" the diagram back to the developer, helping them refactor complex systems just by pointing at the parts they want to change.

Built With

• gemini
• google-ai-studio
• mermaid.js
• next.js
• supabase
• tabler
• tailwindcss
• vercel