🗄️ Visual Database Designer

The Ultimate Visual Database Schema Designer & Query Builder

Design database schemas visually, create relationships, and generate production-ready SQL for PostgreSQL, MySQL, and SQLite.

Live Demo • Features • Installation • Documentation • Contact

---

📸 Screenshots

Visual Schema Designer

🔗 Relationship Visualization	📝 SQL Generation
✋ Drag & Drop Column Reordering

---

✨ Features

🎨 Visual Schema Design

• Intuitive Canvas - Drag, drop, and arrange tables on an infinite canvas with smooth pan and zoom
• Beautiful Table Cards - Color-coded tables with expandable columns and relationship indicators
• Smart Layouts - Auto-arrange tables with intelligent layout algorithms

🔗 Relationship Management

• Visual Connections - Create relationships by drawing lines between tables
• Multiple Types - Support for 1:1, 1:N, and N:M relationships
• Referential Actions - Configure CASCADE, SET NULL, RESTRICT, and more

📊 Multi-Dialect SQL Support

• PostgreSQL - Full support including JSONB, arrays, and advanced types
• MySQL - Complete MySQL syntax with engine and charset options
• SQLite - Lightweight SQLite schema generation

🚀 Advanced Features

Feature	Description
📦 Table Templates	18+ pre-built templates (Users, Products, Orders, Posts, etc.)
🎯 Drag & Drop	Reorder columns with smooth drag-and-drop
💾 Import/Export	JSON import/export for schema portability
📝 TypeScript Types	Auto-generate TypeScript interfaces from schema
🔍 Real-time Preview	Live SQL preview as you design
⏪ Undo/Redo	Full history support with keyboard shortcuts
🌙 Dark Mode	Beautiful dark theme by default
⌨️ Keyboard Shortcuts	Power-user friendly with comprehensive shortcuts

📋 Pre-built Table Templates

🔐 Auth & Users Users Roles Sessions 🛒 E-Commerce Products Categories Orders Order Items

📝 Content Posts Comments Tags 👥 Social Followers Likes Notifications

💰 Finance Transactions Invoices ⚙️ General Settings Files Audit Logs

---

🚀 Quick Start

Prerequisites

• Node.js v18 or higher
• npm or bun

Installation

# Clone the repository
git clone https://github.com/Mavdii/visual-db.git

# Navigate to project directory
cd visual-db

# Install dependencies
npm install
# or
bun install

# Start development server
npm run dev
# or
bun dev

Open http://localhost:5173 in your browser.

---

🎯 Usage

Creating a Table

1. Click "Add Table" in the left panel or on the canvas
2. Choose from 18+ templates or start from scratch
3. Configure columns with data types and constraints
4. Drag and drop to reorder columns
5. Click "Create Table" to add to canvas

Creating Relationships

1. Click on a table's foreign key column
2. Drag to the target table's primary key
3. Configure relationship type (1:1, 1:N, N:M)
4. Set referential actions (CASCADE, SET NULL, etc.)

Exporting SQL

1. Open the SQL tab in the right panel
2. Select your target dialect (PostgreSQL, MySQL, SQLite)
3. Copy or download the generated DDL

---

🛠️ Tech Stack

React 18	TypeScript	Vite	Tailwind CSS
Zustand	React Flow	shadcn/ui	Framer Motion

---

📖 Documentation

Keyboard Shortcuts

Shortcut	Action
Ctrl/Cmd + Z	Undo
Ctrl/Cmd + Shift + Z	Redo
Ctrl/Cmd + S	Save schema
Delete	Delete selected item
Escape	Deselect all
Ctrl/Cmd + A	Select all tables
+ / -	Zoom in/out
0	Fit to view

Supported Data Types

Numeric Types

• INTEGER - Standard integer
• BIGINT - Large integer
• SMALLINT - Small integer
• SERIAL - Auto-incrementing integer
• DECIMAL / NUMERIC - Exact decimal
• REAL / FLOAT / DOUBLE - Floating point

Text Types

• VARCHAR(n) - Variable-length string
• CHAR(n) - Fixed-length string
• TEXT - Unlimited text
• UUID - Universally unique identifier

Date & Time Types

• DATE - Calendar date
• TIME - Time of day
• TIMESTAMP - Date and time
• TIMESTAMPTZ - Timestamp with timezone

Other Types

• BOOLEAN - True/false
• JSON / JSONB - JSON data
• ARRAY - Array of values
• BYTEA / BLOB - Binary data
• ENUM - Enumerated values

---

🗺️ Roadmap

• Visual schema designer
• Multi-dialect SQL generation
• Relationship management
• Table templates
• Drag & drop column reordering
• Query builder interface
• Database reverse engineering
• Team collaboration
• Cloud sync & sharing
• AI-powered schema suggestions

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

👨‍💻 Developer

Umar

Full-Stack Developer & Database Architect

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

⭐ Star this repo if you find it useful!

Built with ❤️ by Umar