Visual Whiteboard
About

About this project

Visual Whiteboard → Schema Builder turns a rough sketch on a whiteboard, a pasted screenshot, or a plain-English description of an app into a usable database design — Prisma schema, raw Postgres SQL, and a live Mermaid ER diagram — in a single shot.

The problem

Every new product starts with someone scribbling tables on a whiteboard. Translating those arrows and column names into a real, normalized schema is tedious busywork that delays the first commit. This tool collapses that step.

How it's built

  • Next.js 15 with the App Router and React Server Actions
  • React 19 on the client
  • Tailwind v4 for styling
  • Google Gemini 3.1 Pro for vision + structured JSON output (Gemini 2.5 Pro fallback)
  • Zod for runtime schema validation of the model's response
  • Mermaid 11 for live ER diagram rendering

Output you get

One generation produces a structured tables/columns list, a Prisma schema (with datasource and generator blocks), CREATE TABLE statements ordered so foreign keys resolve, and an erDiagram block rendered live in the browser. Read more on the How it works page.