Visual Database Designer

Introduction

Visual Database Designer is a web-based tool for creating, editing, and visualizing database schemas. It allows you to design database structures visually by creating tables, defining fields, and establishing relationships between tables. The application supports both manual design and AI-assisted generation, making it suitable for beginners and experienced database designers alike.

Visual Design

Create and arrange database tables on an interactive canvas
Drag and drop interface
Real-time visual feedback

Relationship Management

Define and visualize connections between tables
Field-level relationship highlighting
Automatic constraint validation

AI Integration

Generate database schemas using natural language
Google Gemini AI integration
Smart table and relationship creation

Import/Export

Work with SQL files for database creation
Project save/load functionality
Cross-platform compatibility

Database Concepts Overview

Before using the application, it's helpful to understand these fundamental database concepts:

Table

A structured collection of data organized in rows and columns, similar to a spreadsheet. Each table represents a specific entity (like Users, Products, or Orders).

Field (Column)

A single piece of information in a table, such as "Name" or "Email Address." Each field has a specific data type.

Primary Key (PK)

A unique identifier for each row in a table. Every table should have exactly one primary key to ensure each record can be uniquely identified.

Foreign Key (FK)

A field that references the primary key of another table, creating a relationship between the two tables.

Quick Start Tutorial

Tutorial Goal: Create a simple blog database with three tables: Users, Posts, and Comments.

Click the hamburger menu (☰) in the top-left corner
Select "Add Table" from the sidebar
Click anywhere on the canvas to place your table
Double-click the table header and rename it to "Users"
The table automatically includes an "id" field as the primary key

Click the "+ Add Field" option at the bottom of the Users table
In the Properties panel that opens, change the field name to "username"
Set the data type to "VARCHAR" and size to "50"
Check "Not Null" and "Unique" constraints
Click "Save Field"
Repeat this process to add "email" (VARCHAR, 100) and "created_at" (TIMESTAMP) fields

Use "Add Table" tool again to create a second table and rename it to "Posts".
Add these fields: "title" (VARCHAR, 200), "content" (TEXT), "user_id" (INTEGER), and "created_at" (TIMESTAMP).
Double-click the "user_id" field in the Posts table.
In the Properties panel, select "Users" from the "Foreign Key Reference" dropdown to create the relationship.

Congratulations! Your basic blog database schema is now complete!

Feature Reference

Field Management

Data Types Available

Data Type	Description	Use Cases
INTEGER	Whole numbers	IDs, counts, ages
VARCHAR	Variable-length text with size limit	Names, emails, short descriptions
TEXT	Large text without size limit	Articles, comments, descriptions
TIMESTAMP	Date and time	Creation times, last updated
BOOLEAN	True/false values	Active status, feature flags

AI-Powered Schema Generation

Setup Required: You need a Google Gemini API key to use AI features. Find this option under Settings in the sidebar.

Use the "Generate Tables" tool in the sidebar to describe your database in natural language. The AI will generate a complete schema for you to review and modify.

Example Prompts:

"An e-commerce system with users, products, and orders" "A library management system with books, authors, and borrowers"

Troubleshooting

Possible Causes:

API key not configured or is invalid.
Network connection issues preventing access to the Google API.

Solution: Check AI configuration in sidebar settings and verify your Google Gemini API key.