drawDB

drawDB is a free, browser-based database schema editor that lets developers and database administrators visually design entity-relationship diagrams (ERDs) and instantly generate executable SQL DDL scripts for PostgreSQL, MySQL, SQLite, SQL Server, MariaDB, and Oracle. It runs entirely in the browser using IndexedDB for local persistence, requiring no server, no account, and no installation.

The editor combines drag-and-drop table design with a rich sidebar for managing fields, relationships, enums, custom types, and notes. It supports bidirectional workflow: design visually and export SQL, or import existing SQL scripts and reverse-engineer the diagram. Diagrams can also be exported as SVG, PNG, PDF, DBML, or Mermaid format for documentation and team sharing.

Optional server integration via a companion drawdb-server enables diagram sharing via GitHub Gist or direct links, while the core diagramming experience remains fully self-contained. The tool supports multiple themes, internationalization across many languages, and keyboard-driven workflows via react-hotkeys-hook.

drawDB has grown rapidly since 2023, accumulating over 37,000 GitHub stars and contributions from 129 community members, establishing it as the most widely adopted open-source browser-based ERD tool available.

What You Get

• Visual ERD Editor - Drag-and-drop canvas to create tables with fields, primary keys, foreign keys, indices, and unique constraints using real database semantics and per-field type selection.
• Multi-Dialect SQL Generation - Exports accurate CREATE TABLE and ALTER TABLE SQL scripts for PostgreSQL, MySQL, MariaDB, SQLite, SQL Server, and Oracle from the visual diagram with one click.
• SQL Import & Reverse Engineering - Parses existing SQL DDL scripts for all six supported dialects and auto-generates corresponding ERDs, enabling documentation of legacy databases without manual mapping.
• DBML and Mermaid Import/Export - Reads and writes Database Markup Language (DBML) via @dbml/core and generates Mermaid entity-relationship diagrams for embedding in markdown documentation.
• Migration Script Generation - Compares two diagram states using a structural diff algorithm and generates ALTER TABLE migration SQL that reflects only the schema changes between versions.
• SVG, PNG, and PDF Export - Exports the full diagram canvas as scalable vector graphics, raster images via html-to-image, or multi-page PDFs via jsPDF for inclusion in technical documentation.
• GitHub Gist Sharing - Optionally connects to a companion server to save and share diagrams as GitHub Gists or via persistent URLs, enabling team collaboration without a database backend.
• Rich Annotations - Inline Lexical rich-text editor for field and table comments, a sticky-notes layer, and color-coded table headers for visual organization of complex schemas.

Common Use Cases

• Documenting a legacy database - A backend engineer imports a production SQL dump to auto-generate an ERD, then annotates tables with comments and exports the diagram as SVG for an onboarding wiki.
• Designing a microservice schema - A developer sketches a new service’s database tables visually, defines foreign key relationships, generates PostgreSQL DDL, and pastes it directly into a migration file.
• Teaching database design - A professor uses drawDB in class to demonstrate normalization by live-editing an ERD in the browser — no software installation required for students.
• Generating migration scripts - A DevOps engineer designs the target schema in drawDB, uses the diff-to-SQL feature to compare it against the current schema, and gets a ready-to-run ALTER TABLE script.
• Collaborating on schema reviews - A team uses the GitHub Gist sharing feature to share a diagram link in a pull request description, letting reviewers inspect the schema without opening a local tool.
• Prototyping at a hackathon - A team quickly models their data requirements visually, exports SQL for three different databases as they decide which backend to use, and iterates without rewriting DDL by hand.

Under The Hood

Architecture drawDB is a React single-page application structured around fine-grained React Contexts — DiagramContext, CanvasContext, TransformContext, SelectContext, UndoRedoContext, and others — each isolating a distinct domain of editor state. This avoids a monolithic global store: components subscribe only to the contexts they need, reducing unnecessary re-renders and keeping the data flow explicit. The main Editor page composes these contexts as providers wrapping the canvas and side panel, while react-router-dom handles routing between the landing page, editor, templates, and bug report pages. The build pipeline uses Vite with Docker multi-stage builds, separating development tooling from production static asset delivery via Nginx.

Tech Stack React 18.2 and Vite 6.4.2 power the frontend, with @vitejs/plugin-react enabling fast HMR and JSX transformation. Client-side persistence is managed by Dexie.js (IndexedDB wrapper) with dexie-react-hooks for reactive data access — the database schema has been versioned to v67, with upgrade migrations baked in. SQL generation and parsing use dedicated per-dialect modules (six dialects, each with separate export and import files) alongside node-sql-parser for generic SQL and oracle-sql-parser for Oracle-specific syntax. The DBML format is handled via @dbml/core. Diagram drag-and-drop is powered by @dnd-kit, rich-text field comments use Lexical, and Monaco Editor (@monaco-editor/react) provides syntax-highlighted DBML editing. Internationalization is implemented with i18next and i18next-browser-languagedetector. Tailwind CSS v4 handles styling, and Semi-UI (@douyinfe/semi-ui) provides the component library.

Code Quality drawDB’s code follows consistent React patterns with descriptive naming and clear component boundaries. The context architecture enforces separation of concerns effectively. However, the project is entirely JavaScript with no TypeScript or PropTypes, leaving type contracts implicit and increasing the surface area for runtime errors in a data-model-heavy application. No test files or test frameworks are present — the SQL generation, diff algorithm, path calculation, and import parsers are all untested by automated suites. ESLint with eslint-plugin-react and Prettier are configured, providing a baseline for style consistency, but automated test coverage is absent. Error handling in async IndexedDB and sharing API calls is present but not systematically structured.

What Makes It Unique drawDB’s most distinctive technical feature is its bidirectional SQL pipeline: six per-dialect import parsers and six export modules handle the full round-trip from SQL text to visual diagram and back, including a structural diff engine (diffToSQL.js) that computes ALTER TABLE migration scripts by comparing two diagram snapshots. The SVG relationship path renderer (calcPath.js) dynamically computes curved connector paths with radius adjustments based on table proximity and zoom level, producing clean visuals at any scale. DBML and Mermaid export give teams format flexibility beyond SQL. The entire core — ERD editing, SQL generation, DBML parsing, local persistence, undo/redo, version history — operates entirely client-side with no server round-trips, making it functional offline and trivially self-hostable as a static site.

Self-Hosting

drawDB is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0). This is a copyleft license that grants broad freedoms: you can use, modify, and distribute the software commercially. However, the AGPL’s key requirement is that if you run a modified version of drawDB over a network — for example, deploying it on an internal server for your team — you must make the complete modified source code available to the users of that service. For most self-hosting scenarios where you run it as-is, this is straightforward. If you modify the code for internal use without network exposure, standard GPL copyleft applies, meaning derivative works must remain under AGPL if distributed. Organizations that need to keep modifications proprietary should obtain a commercial license from the maintainers or evaluate whether their use case triggers the network-use clause.

Operationally, drawDB is a pure static web application. Self-hosting the core ERD editor requires nothing beyond a web server capable of serving static files — Nginx, Apache, Caddy, or any CDN will work. The official Docker image packages the production build behind Nginx and is the recommended deployment method. Since all diagram data lives in the user’s browser via IndexedDB, there is no backend database to provision, back up, or maintain for core functionality. Diagram sharing requires optionally running the separate drawdb-server companion, which introduces a small Node.js backend and its own persistence layer, but this is strictly optional.

The hosted version at drawdb.app and the self-hosted version are functionally identical in terms of features — there is no paid tier, no feature gating, and no telemetry beyond optional Vercel Analytics. What you give up with self-hosting is automatic updates (you manage version upgrades yourself), and any future cloud-specific features the drawdb.app team may introduce. Community support is available via Discord; there are no SLAs, paid support tiers, or enterprise agreements currently offered.