<img src="public/assets/sqlmodelblack.svg" alt="SQLModel Logo" width="120" /> <h1 align="center">SQLModel</h1> Visual Data Modeling for Modern Teams Design conceptual and physical database models with an intuitive canvas-based interface. Open source. No account required. Your data stays local. <img src="public/assets/sqlmodel.png" alt="SQLModel Screenshot" width="800" /> <a href="https://sqlmodel.org">🚀 Try it now at sqlmodel.org →</a>

✨ What is SQLModel?

SQLModel is a free, open-source data modeling tool that helps you design database schemas visually. Whether you're architecting a new application, documenting an existing database, or collaborating with your team on data design, SQLModel provides an intuitive canvas for bringing your ideas to life. Try it at sqlmodel.org.

Why SQLModel?

| Feature | Benefit | |---------|---------| | Dual-Layer Modeling | Design at the conceptual level (entities & relationships) then refine to physical tables with columns, types, and foreign keys | | AI-Powered Generation | Describe your system in plain English and let AI generate complete data models — understands OLTP vs Analytics/Star Schema patterns | | Privacy-First | Works entirely offline in your browser. Optional cloud save for sharing diagrams with your team. Your data, your control. | | Export Ready | Generate SQL DDL scripts for PostgreSQL, MySQL, and more. Export diagrams as images. | | Modern UX | Built with React Flow for smooth pan, zoom, and drag interactions. Dark/light mode. Keyboard shortcuts. |

🚀 Getting Started

Quick Start (Hosted)

Visit sqlmodel.org to start modeling immediately — no installation required.

Run Locally

# Clone the repository
git clone https://github.com/yourusername/sqlmodel.git
cd sqlmodel

# Install dependencies
npm install

# Configure AI (optional)
cp .env.example .env
# Edit .env and add your OpenAI API key

# Start development server
npm run dev

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

AI Configuration (Optional)

SQLModel includes AI-powered model generation using OpenAI's GPT-4o-Mini by default.

Copy the example environment file:
```
cp .env.example .env
```
Get an API key from OpenAI Platform
Add your key to .env:
```
VITE_OPENAI_API_KEY=sk-your-key-here
```

Note: The AI key can be configured at runtime via the AI Settings dialog (⚙️ icon in navbar). Environment variables are just a convenience default.

Build for Production

npm run build
npm run preview

📖 How to Use

1. Create Entities (Conceptual View)

Click + Entity or right-click the canvas to add entities
Double-click an entity to edit its name and description
Drag from entity edges to create relationships
Use the arrow buttons on entity sides to quickly create linked entities

2. Define Relationships

Connect entities by dragging from one to another
Set cardinality (1, 0..1, 1.., 0..) in the right panel
Double-click relationship lines to add labels

3. Generate Physical Tables

Switch to Physical View using the toggle in the navbar
Use AI → Generate Tables to auto-create tables from your conceptual model
Or manually add tables with columns, primary keys, and data types

4. Import Existing Schemas

Import database schemas from various sources:

From URL: Paste any GitHub/GitLab schema URL (Rails schema.rb, SQL files, Prisma, etc.)
- GitHub blob URLs are automatically converted to raw URLs
- Example: github.com/user/repo/blob/main/db/schema.rb works directly
From File: Upload local SQL, Rails, or Prisma schema files
Shareable Import Links: Use ?url= query params to share auto-importing diagrams

5. Create Foreign Keys

In Physical View, drag from a column to another table's column
Configure cardinality and relationship type in the inspector

6. Export Your Work

Save JSON: Export your complete model for backup or sharing
Export SQL: Generate CREATE TABLE statements
Export Image: Save your diagram as PNG

7. AI-Powered Modeling

Click the AI button (✨) to:

Generate New Model: Describe your system and AI creates entities, relationships, and tables
Enhance Model: Add features to an existing model
Smart Detection: AI recognizes if you need OLTP (normalized) or Analytics (star schema) patterns

🛠️ Tech Stack

React 18 + TypeScript — Type-safe UI components
React Flow — Canvas rendering, pan/zoom, node connections
Zustand — Lightweight state management with persistence
Vite — Fast development and optimized builds
Zod — Runtime schema validation

📁 Project Structure

src/
├── components/
│   ├── Canvas.tsx          # Main diagram canvas
│   ├── nodes/              # Entity, Table, Group node components
│   ├── layout/             # Navbar, Sidebar, Right Panel
│   └── ui/                 # Dialogs, menus, shared components
├── model/
│   └── schemas.ts          # Zod schemas for all data types
├── services/
│   └── aiService.ts        # AI integration for model generation
└── store/
    └── useModelStore.ts    # Zustand state management

🤝 Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

# Run linting
npm run lint

# Type check
npx tsc --noEmit

📄 License

SQLModel is licensed under the Apache License Version 2.0.

Built with ❤️ for data architects, developers, and anyone who thinks in tables. <a href="https://sqlmodel.org">sqlmodel.org</a>

Sqlmodel

Install / Use

README