A modern, visual database schema designer built for developers
Features • Preview • Quick Start • Architecture • Shortcuts
- Overview
- Preview
- Core Features
- Architecture
- Tech Stack
- Quick Start
- Keyboard Shortcuts
- Data Types
- Roadmap
SchemaCanvas is a professional-grade, visual database schema designer that bridges the gap between interactive design and code. It allows developers to create, edit, and export complex database schemas through an intuitive drag-and-drop interface, while maintaining a real-time bi-directional sync with DBML code.
- Zero Friction: Start designing instantly without complex setup.
- Developer First: Focus on the code-to-visual relationship.
- Native Performance: Handles hundreds of tables with optimized rendering via React Flow.
- Local Sovereignty: Powered by SQLite for private, offline-capable project management.
- Visual Design: Intuitive drag-and-drop canvas for creating database schemas
- Multi-Format Support: Export to SQL, Prisma, Django, Laravel, TypeORM, and more
- Real-time Editing: Instant visual feedback with inline editing capabilities
- Framework Agnostic: Works with any modern database or ORM
- Responsive Design: Works seamlessly on desktop and mobile devices
- Dark Mode: Full dark/light theme support
SchemaCanvas features a sophisticated multi-algorithm layout system to keep your complex diagrams organized:
- Hierarchical: Best for visualizing data flow and dependency chains.
- Force-Directed: Natural, organic clustering based on relationships.
- Circular: Excellent for identifying cyclic dependencies and hubs.
- Grid / Warehouse: High-density organization for large schemas.
- Smart Placement: Automatically finds the best empty slot for newly added tables.
Experience real-time bi-directional editing. Change your schema visually on the canvas, and the DBML code updates instantly. Prefer typing? Edit the DBML directly and watch the canvas re-arrange and update in real-time.
- Interactive Canvas: Built with React Flow for smooth, performant visual editing.
- Table & Column Management: 20+ specialized data types with full constraint support (PK, Unique, Nullable).
- Visual Relationships: Drag handles to create Foreign Keys with configurable actions (CASCADE, SET NULL).
- Multi-Select & Bulk Ops: Select multiple tables (Ctrl+Click) to move or delete in groups.
SchemaCanvas is built with a focus on local performance and data integrity.
graph TD
UI[React Components] --> UI_State[Zustand Store]
UI_State --> Canvas[React Flow Integration]
Canvas --> DBML[DBML Parer/Serializer]
UI_State --> API[Next.js API Routes]
API --> DB[SQLite + Drizzle ORM]
DBML <--> DB
We use Zustand for lightweight, granular state updates, ensuring that even with hundreds of tables, the UI remains responsive. The state is synchronized with React Flow to maintain position data and edge routing.
Your schemas are stored locally in a SQLite database managed by Drizzle ORM. This provides the reliability of a relational database with the simplicity of a single file in your project directory.
- Framework: Next.js 16.0 (App Router & Turbopack)
- Visual Engine: @xyflow/react (React Flow)
- State: Zustand
- Styling: Tailwind CSS 4
- Components: Radix UI + Lucide React
- Editor: CodeMirror 6 for DBML
- Database: SQLite (Local)
- ORM: Drizzle ORM
- Package Manager: bun (Recommended)
Ensure you have Bun or Node.js (v18+) installed.
# Clone and enter the repo
git clone https://github.com/amaruki/schema-canvas.git
cd schema-canvas
# Install dependencies
bun install
# Initialize the database
bun run db:generate
bun run db:migratebun run devOpen http://localhost:3000 in your browser.
| Shortcut | Action |
|---|---|
Ctrl + T |
Add New Table |
Ctrl + S |
Save Current Version |
Ctrl + E |
Open Export Dialog |
Ctrl + A |
Select All Tables |
Ctrl + D |
Duplicate Selected Table |
Ctrl + , |
Workspace Settings |
Delete |
Remove Selected Items |
Escape |
Clear Selection / Close Dialogs |
Ctrl + Scroll |
Zoom In / Out |
SchemaCanvas supports a wide range of SQL-compatible and ORM-specific data types:
- Alphanumeric:
string,text,uuid,enum,array - Numeric:
integer,bigint,float,decimal - Time-related:
date,datetime,timestamp,time - Objects:
json,jsonb - Binary:
binary - Boolean:
boolean
- SQL Reverse Engineering: Import existing databases via SQL dump.
- Live Collaboration: Edit schemas together in real-time.
- Custom Templates: Pre-built schema patterns for SaaS, E-commerce, etc.
- AI Assistant: Generate schemas from natural language descriptions.
- Global Export: Enhanced support for Laravel Migrations and Django Models.
Generates native SQL CREATE TABLE statements for:
- PostgreSQL (
--dialect=postgresql) - MySQL (
--dialect=mysql) - SQLite (
--dialect=sqlite) - SQL Server (
--dialect=sqlserver)
- Prisma: Complete schema.prisma with models and relations
- Django: Models.py with field types and relationships
- Laravel: Migration files with Schema facade
- TypeORM: TypeScript entities with decorators
src/
├── app/ # Next.js App Router (Routes & Layouts)
├── components/ # Atomic UI & Schema-specific components
├── constants/ # Enums, types, and schema configuration
├── db/ # Drizzle schema & SQLite repositories
├── features/ # Component-specific logic & hooks
├── hooks/ # UI & Canvas interaction hooks
├── lib/ # Layout algorithms & export managers
├── services/ # Core business logic
└── stores/ # Zustand State ManagementWe love contributions! Whether it's a bug fix, new feature, or documentation improvement:
- Fork the repository.
- Create your feature branch (
git checkout -b feature/amazing-feature). - Commit your changes (
git commit -m 'Add amazing feature'). - Push to the branch (
git push origin feature/amazing-feature). - Open a Pull Request.
Please ensure your code passes the linter with bun run lint.
This project is licensed under the MIT License - see the LICENSE file for details.
Special thanks to the open-source community and the creators of React Flow, Drizzle, and Zustand for the incredible tools that make this project possible.
Built for the community, by the community