drawDB is a browser-based, open-source database schema editor that allows users to visually create and edit entity-relationship (ER) diagrams without requiring an account or installation. Built with React, Tailwind CSS, and IndexedDB, it provides a lightweight, intuitive interface for designing database structures interactively. The tool generates accurate SQL scripts compatible with PostgreSQL, MySQL/MariaDB, SQLite, SQL Server, and Oracle databases. It’s designed for developers, data analysts, and database administrators who need a fast, no-signup way to prototype schemas, share diagrams, or generate DDL statements for deployment.
What You Get
- Visual ER Diagram Editor - Create and edit database tables, relationships, primary/foreign keys using drag-and-drop with real-time SVG rendering in the browser.
- Multi-Database SQL Generation - Export generated SQL scripts for PostgreSQL, MySQL/MariaDB, SQLite, SQL Server, and Oracle databases with proper syntax per target system.
- No Account Required - All editing and exporting happens locally in the browser using IndexedDB for persistence; no registration or cloud dependency.
- Customizable Editor - Adjust canvas size, grid settings, and table styles to fit complex schemas without losing usability.
- Export as SVG or SQL - Download diagrams as scalable vector graphics (SVG) for presentations, or generate ready-to-run SQL DDL scripts for database deployment.
Common Use Cases
- Building a new microservice’s data model - Developers designing the initial schema for a new API service can visually map entities and relationships before writing any SQL, reducing errors in migration scripts.
- Database documentation for legacy systems - Teams reverse-engineering old databases can recreate ER diagrams from existing tables to document relationships for onboarding or audits.
- Problem → Solution flow: Manual SQL errors → Visual validation - Users struggling with complex JOINs or foreign key constraints can visually lay out tables and instantly see missing relationships, preventing deployment failures.
- Team collaboration on schema design - Developers use the tool to sketch out changes before code review, then export SQL for peer feedback without needing database access.
Under The Hood
drawDB is a browser-based database diagramming tool that enables users to visually design database schemas and simultaneously generate DBML code. It blends graphical modeling with textual representation, offering a dual-mode experience that supports real-time collaboration and versioning through gist integration.
Architecture
The application follows a monolithic frontend architecture built with React, emphasizing component-based structure and clear separation of concerns.
- The project adopts a layered architecture with distinct components for UI, state management, API integration, and data handling, enabling clear division of responsibilities.
- Modular organization is evident in how features like the editor canvas, side panels, and context providers are structured to encapsulate specific functionalities.
- Design patterns such as Context API for state management and component composition are used extensively to manage global application state and coordinate interactions between UI elements.
Tech Stack
The project is a modern web application built with JavaScript and React, leveraging contemporary frontend tools and libraries for a rich user experience.
- Built with JavaScript and React, utilizing Vite for fast development and build processes, along with Tailwind CSS for styling and PostCSS for processing.
- Heavily relies on UI libraries like @douyinfe/semi-ui, lexical for rich text editing, and @dnd-kit for drag-and-drop functionality; also uses dexie for client-side database operations.
- Powered by ESLint and Prettier for code quality and formatting, with a focus on linting and consistent code style.
Code Quality
The codebase demonstrates a moderate level of quality with room for improvement in testing and consistency.
- Error handling is present in several components, though not uniformly applied across the codebase.
- Code style appears consistent with established conventions, but some technical debt is evident in areas like error propagation and component organization.
- Type annotations are present, contributing to better code clarity and maintainability.
What Makes It Unique
drawDB stands out as a browser-based database diagramming tool that uniquely combines visual design with DBML code generation, offering a seamless blend of graphical and textual modeling.
- Innovative dual-mode design that allows users to switch between visual canvas and DBML code editing while maintaining synchronization.
- Creative use of lexical editors and Monaco for rich text handling within a diagramming context, enabling advanced syntax support.
- Notable integration with gist-based version control and sharing that enables collaborative workflows without requiring account creation.