DrawDB — Open-Source Database Schema Diagram Editor

Introduction

DrawDB is a free, browser-based database entity-relationship diagram editor. It lets developers visually design schemas, define tables with columns and constraints, draw relationships, and export production-ready SQL — all without creating an account or installing software.

What DrawDB Does

• Provides a drag-and-drop canvas for creating ER diagrams with tables, fields, and foreign keys
• Supports MySQL, PostgreSQL, SQLite, MariaDB, and SQL Server dialects
• Generates and exports DDL scripts directly from the visual diagram
• Imports existing SQL to reverse-engineer schemas into editable diagrams
• Saves projects locally in the browser with JSON export and import

Architecture Overview

DrawDB is a single-page React application that runs entirely in the browser. The canvas is rendered using a custom SVG-based layout engine. Schema metadata is stored in an in-memory model that serializes to JSON for persistence. SQL generation is handled by dialect-specific emitter modules that walk the schema graph and produce DDL statements.

Self-Hosting & Configuration

• Clone the repository and run with Node.js 18+ using npm or yarn
• Build a static production bundle with npm run build and serve via any web server
• No backend server or database is required since all data stays in the browser
• Deploy to Vercel, Netlify, or any static hosting provider with zero configuration
• Use Docker: docker build -t drawdb . && docker run -p 3000:3000 drawdb

Key Features

• Completely free and open-source with no account required
• Real-time visual feedback as you add tables, columns, and relationships
• One-click SQL export for five major database dialects
• Reverse-import from SQL files to visualize existing schemas
• Lightweight and fast with no server-side dependencies

Comparison with Similar Tools

• dbdiagram.io — cloud-hosted, freemium model with collaboration; DrawDB is fully local and free
• DBeaver ER Diagrams — integrated into a heavy desktop client; DrawDB is a focused web tool
• pgModeler — PostgreSQL-only desktop modeler; DrawDB supports multiple dialects in the browser
• Lucidchart — general diagramming SaaS with database shapes; DrawDB is purpose-built for schemas
• ChartDB — similar concept but DrawDB has broader dialect support and SQL import

FAQ

Q: Does DrawDB require a backend server? A: No. Everything runs in your browser. Data is stored in localStorage or exported as JSON/SQL files.

Q: Can I import an existing database schema? A: Yes. Paste or upload a SQL DDL file and DrawDB will parse it into an editable diagram.

Q: Which databases are supported for export? A: MySQL, PostgreSQL, SQLite, MariaDB, and SQL Server.

Q: Is there a collaboration or multi-user mode? A: Not built-in. You share diagrams by exporting and importing JSON project files.

Sources

• https://github.com/drawdb-io/drawdb
• https://drawdb.vercel.app