drawDB is an open-source, browser-based database diagram editor designed for developers and database administrators who need to visually design and document database schemas. It solves the problem of complex, clunky desktop tools by providing an intuitive drag-and-drop interface to create ERDs and instantly generate accurate SQL DDL scripts. Built with React, TailwindCSS, and IndexedDB, it runs entirely in the browser with no server dependency by default, making it ideal for quick prototyping, documentation, or on-the-go schema design.
The tool supports multiple SQL dialects including PostgreSQL, MySQL, SQLite, SQL Server, and Oracle, and allows exporting diagrams as SVG or importing existing SQL to reverse-engineer schemas. Users can customize the editor’s appearance and workflow without registration, and optional server integration enables file sharing and collaboration.
What You Get
- Visual ERD Editor - Drag-and-drop interface to create entity-relationship diagrams with tables, columns, primary/foreign keys, and relationships using real database semantics.
- Multi-Dialect SQL Generation - Automatically generates accurate SQL DDL scripts for PostgreSQL, MySQL, SQLite, SQL Server, and Oracle from visual diagrams.
- SQL Import & Reverse Engineering - Import existing SQL scripts to auto-generate corresponding ERDs, enabling schema documentation from legacy databases.
- SVG Export - Export database diagrams as scalable vector graphics (SVG) for inclusion in documentation, presentations, or confluence pages.
- No Account Required - Fully functional without registration or login, preserving privacy and reducing friction for quick schema design.
- Customizable Editor - Adjust canvas size, grid, colors, and table styles to match team or project standards without code changes.
Common Use Cases
- Documenting legacy databases - A senior developer imports a legacy SQL dump to visualize table relationships before refactoring, avoiding manual schema mapping.
- Teaching database design - A university professor uses drawDB to demonstrate ERD concepts in class, letting students build and export diagrams without installing software.
- Designing microservice schemas - A backend engineer sketches a new service’s database structure visually, generates PostgreSQL DDL, and shares the SVG with frontend teams.
- Preparing migration scripts - A DevOps engineer creates a new schema in drawDB, generates SQL, validates it against target databases, and commits it to version control as a migration file.
Under The Hood
Architecture
- React-based SPA with route-based separation using react-router-dom, isolating core features like Editor, Templates, and BugReport as distinct page components
- State management is centralized via custom hooks and SettingsContextProvider, enabling clean data flow between UI and domain logic without global state pollution
- Component architecture follows composition patterns with reusable Semi-UI primitives and domain-specific hooks, ensuring modularity and maintainability
- Clear separation of concerns is enforced: UI components interact with data layers through well-defined interfaces, avoiding direct DOM manipulation or mixed responsibilities
- Build pipeline uses Vite with Docker multi-stage builds, cleanly separating development tooling from production static asset serving via Nginx
Tech Stack
- React 18.2 and Vite 6.4.1 form the core frontend foundation, with HMR and JSX transformation enabled via plugins
- State and UI components are powered by Semi-UI and DnD Kit, enabling rich interactive diagram editing
- Client-side persistence is handled by Dexie.js with reactive hooks, supporting PWA-like offline functionality
- SQL parsing and schema analysis leverage node-sql-parser and oracle-sql-parser for accurate visual representation
- Deployment uses Docker with Node.js for development and Nginx for production, with SPA routing configured via Vercel rewrites
- Tooling includes Tailwind CSS for styling, i18next for internationalization, and ESLint for basic code consistency
Code Quality
- Code organization follows React best practices with clear component boundaries and context-based state management
- Naming conventions are consistent and descriptive, aligning with community standards
- No type safety mechanisms like TypeScript or PropTypes are employed, increasing susceptibility to runtime errors
- Limited testing practices with no test frameworks or assertions detected, leaving critical UI logic unvalidated
- Error handling is minimal or absent, with no structured logging or custom error classes observed
- Linting and automated formatting configurations are not present, reducing code consistency guarantees
What Makes It Unique
- Native DBML parser with real-time diagram generation enables seamless text-to-visual modeling without external dependencies
- SVG-based relationship path algorithm dynamically calculates connector curves with intelligent routing based on table positions and zoom levels
- Built-in version history and timeline visualization are integrated directly into the editor, removing reliance on external version control systems
- Lexical editor integration allows rich-text annotations directly on database elements, blending documentation with schema design
- Zero-account, client-side-first architecture with local persistence and instant SQL generation eliminates server dependency for core functionality
- Custom theme system with dynamic color variables and scroll customization ensures visual consistency across complex UI components