drawdb-io/drawdb

Free, simple, and intuitive online database design tool and SQL generator.

Free, simple, and intuitive database design tool and SQL generator.

drawDB · Discord

drawDB

DrawDB is a robust and user-friendly database entity relationship (DBER) editor right in your browser. Build diagrams with a few clicks, export sql scripts, customize your editor, and more without creating an account. See the full set of features here.

Getting Started

Local Development

git clone https://github.com/drawdb-io/drawdb
cd drawdb
npm install
npm run dev

Build

git clone https://github.com/drawdb-io/drawdb
cd drawdb
npm install
npm run build

Docker Build

docker build -t drawdb .
docker run -p 3000:80 drawdb

Set up the server and environment variables according to .env.sample for the survey and bug report forms.

drawdb's Issues

DBML support

I would love this to support DBML. Tools like dbdiagram.io are nice but not OSS and their editor is also not as pretty as yours. But the ability to compile DBML to schemas of many databases (postgresql, mysql, etc...) is a major benefit. I would love this tool to also be able to generate diagrams from DBML of generate DBML from diagrams.

Boolean default values not displayed

Default values of boolean fields seem to not be displayed properly:

How to change the box size?

I want a bit bigger size of a table box. No settings found.

Field Circle Icons

Blue circle icons next to fields show out of position on Safari:

Looks fine on Google Chrome:

[Feature][Suggestion]Geometry Support

Hello,

I've tested your software earlier, and it's very nice.

Working with geodatabase using Postgis, one addition that could be very interesting, is support for Geometry data type.
Indeed, For now it's not possible to select this type, but it'll could be great.
Or maybe letting the user specify a custom column type.

I may look into it if I find the time.

Thansk in advance for any answer,
Regards, Clément.

Random DOM element is being hover after dragging and dropping a table field in Safari

• DOM element is being hover and it has a hover class after dragging and dropping a table field in Safari.

[Feature] Copyable `Enum`

Thanks very much for this tool!

I am wondering if it would be possible to convert the Enum values in the field description from boxes to text on double click, so that I can copy the existing Enums (csv) to another place? Currently that is not possible, and I need to retype or jump into some text representation of the diagram.

Auto layout

Hi, ok draw-db is incredible, I'm obsessed!

Is there an auto-layout for use after importing? It seems all tables import on-top of each other and have to be hand sorted.

Does some form of auto arrangement exist and or is it possible to add?

show comment

Can you customize whether you need to display comments on the table? table and field comments. Shown after type.

Auto increment option for primary key

Suggestion: Export to Django Models

It would be great if it were possible to export to "Django Models". In other words, generate the models automatically.

Render to image

Rendering the Diagram to an image would be helpful for automatically generating documentation.

Diagrams help us visualise those relationships and they can also be beneficial to non-developers.

Please consider adding a command to render the diagram to an image (png preferably with option to generate with or without background for nice embedding)

Add Support for nvarchar Datatype

Currently, DrawDB does not support the nvarchar datatype. This datatype is commonly used in SQL Server databases for storing variable-length Unicode string data.
We kindly request the DrawDB development team to prioritize the implementation of nvarchar datatype support in the upcoming releases. This enhancement will significantly improve the compatibility and user experience for SQL Server database users.

An error occurs when executing sql import

An error occurs when executing sql import

page error

error detail

index-zgz2iI-B.js:454 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'toString')
    at index-zgz2iI-B.js:454:3962
    at Array.forEach (<anonymous>)
    at index-zgz2iI-B.js:454:3611
    at Array.forEach (<anonymous>)
    at OZe (index-zgz2iI-B.js:454:3429)
    at Xn (index-zgz2iI-B.js:465:20027)
    at Object.In [as onOk] (index-zgz2iI-B.js:465:20583)
    at Object.notifyOk (index-zgz2iI-B.js:54:89260)
    at k$e.handleOk (index-zgz2iI-B.js:54:72272)
    at Uy.handleOk (index-zgz2iI-B.js:54:86078)

The sql script is as follows

CREATE TABLE `sssqc` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `station_name` varchar(30) NOT NULL ,
  `rvnm` varchar(30) NOT NULL ,
  `tm` datetime NOT NULL ,
  `rz` float DEFAULT NULL ,
  `otq` float DEFAULT NULL ,
  `rwptn` varchar(10) DEFAULT NULL ,
  `rwptn_name` varchar(10) DEFAULT NULL ,
  `gmt_create` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ,
  `gmt_modify` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ,
  PRIMARY KEY (`id`),
  UNIQUE KEY `station_name` (`station_name`,`tm`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 ;

[Proposal] Add an option whether to create foreign keys.

For the relationship between objects, can we design an option to decide whether to create foreign keys when generating database statements. Sometimes, we need to clarify the relationship between objects when designing, but at the database level, we do not want to create foreign keys.

edit relationship

Can you double-click the line to edit the relationship? When I have many relationships, it is difficult to find it in the relationship list.

[Feature] Make drawdb a PWA

I recently came across drawdb and it looks great. If it can be turned into a PWA it would be much better. We can install it like an app and will take full screen height without URL bar. Hope this will be considered.

[Suggestion] Add checkboxes to include created_at and/or updated_at fields to a table

like how some ORMs automatically handle this, would reduce the hand drawn boilerplate.

In Safari, the button in Notes and Area is not rendered on the right position.

Related to the issue #32, the button in Notes and Area is not rendered on the right position in Safari.

• Subject Area
  

• Notes
  

Add a setting for whether to show comments

As someone who is not from an English-speaking country, I need to show comments in my native language.

For example:

Auto generating Table

LLM can be used to autogenerate table for some standard use cases or can have a chat assistant to generate queries based on the db selected.

Change the order of the fields in a table

The style of this tool is exceptionally elegant, enhancing the experience of database design. Gratitude to all contributors!

But i want it include a feature that can change the order of the fields in a table.

Relationships are not always imported correctly from source

When importing the following SQL, the relationships between the tables are not imported:

CREATE TABLE `Pattern` (
	`Id`	INT NOT NULL AUTO_INCREMENT,
	`Description`	VARCHAR(255),
	`IsFlexible`	BOOLEAN DEFAULT (FALSE),
	`IsInterpolated`	BOOLEAN NOT NULL DEFAULT (FALSE),
	`PatternType`	INT NOT NULL,
	`ScenarioId`	INT NOT NULL,
	CONSTRAINT `PK_Pattern` PRIMARY KEY(`Id`)
);
CREATE TABLE `PatternDateValue` (
	`PatternId`	INT NOT NULL,
	`Date`	DATETIME NOT NULL,
	`Value`	DOUBLE,
	CONSTRAINT `PK_PatternDateValue` PRIMARY KEY(`PatternId`,`Date`),
	CONSTRAINT `FK_PatternDateValue_Pattern_PatternId` FOREIGN KEY(`PatternId`) REFERENCES `Pattern`(`Id`) ON DELETE CASCADE
);
CREATE TABLE `PatternNumberValue` (
	`PatternId`	INT NOT NULL,
	`Number`	SMALLINT NOT NULL,
	`Value`	DOUBLE,
	CONSTRAINT `PK_PatternNumberValue` PRIMARY KEY(`PatternId`,`Number`),
	CONSTRAINT `FK_PatternNumberValue_Pattern_PatternId` FOREIGN KEY(`PatternId`) REFERENCES `Pattern`(`Id`) ON DELETE CASCADE
);

Other relationships work as expected though. I can't figure out why some work and some don't.

Here is one that is imported correctly:

CREATE TABLE `ScenarioGroup` (
	`Id`	INT NOT NULL AUTO_INCREMENT,
	`Description`	VARCHAR(255),
	`Name`	VARCHAR(255),
	`DateCreated`	DATETIME NOT NULL,
	CONSTRAINT `PK_ScenarioGroup` PRIMARY KEY(`Id`)
);
CREATE TABLE `Scenario` (
	`Id`	INT NOT NULL AUTO_INCREMENT,
	`ScenarioGroupId`	INT NOT NULL,
	`DateCreated`	DATETIME NOT NULL,
	`Name`	VARCHAR(255),
	`Description`	VARCHAR(255),
	`ActiveSimulationId`	INT DEFAULT (0),
	`IsUpdateActive`	BOOLEAN DEFAULT (TRUE),
	`OperationalInfo`	VARCHAR(255),
	CONSTRAINT `PK_Scenario` PRIMARY KEY(`Id`),
	CONSTRAINT `FK_Scenario_ScenarioGroup_ScenarioGroupId` FOREIGN KEY(`ScenarioGroupId`) REFERENCES `ScenarioGroup`(`Id`) ON DELETE CASCADE
);

Can ER diagram of already created database be created automagically?

Let's say I point to a database or create table as queries exported out of current database,
can it automatically create a ER diagram.

Fuctionality similar to this : https://gitlab.com/Screwtapello/sqlite-schema-diagram/-/tree/main

Issue with RestoreScroll.

Guys, your code is amazing! Its really intresting to learn it) But I found a non-critical bug I think in the main App.js file in the RestoreScroll function at line 85, I think you should probably replace useEffect with useLayoutEffect because when you try to reload the page you get a little annoying page jerking)

Creating table association relationships

Where to create table association relationships？

why not use the same theme in the left side bar

[Suggestion] Schema/Table Group Support

I just moved my project from DBDiagram.io to drawDB (since it is easier for newcomers, and it is awesome!)

After I use it for a while, I would like to provide feedback based on my use case. One feedback is already mentioned in #12. Another one is related to schema/table group support.

For me, my biggest feature that could improve my workflow drastically is to include schema support for each table. Before you may ask, yes, subject area is a workaround for that.

But I think it would be easier to select schema, then create table inside schema, and group them inside the same schema area.

I understand that this feature is quite complex, honestly. However, it should improve my existing workflow that involved with several schema and a ton of tables.

[UX] The NULLABLE button does the opposite thing

Nullable: "allowed to have a null value".
But when the button in 'on' (so the nullable option is active), the field has "Not Null"

[Feature] Have a way to collaborate

Since this only saves data in the browser there is no way to have 2 people working on the same diagram at the same time. But as a workaround it would be nice if I could save the diagram to a file in our repo, then when someone wants to edit / view it they can run a docker image locally that would read the file and load the diagram into the local instance. They would still need to export the file afterwords and commit unless there could be a feature to only read/write to a file instead of indexedDB.

Support empty string for default value of char/varchar column

[Feature] Docker image

Would be nice if there is a docker image for this tool so it can be more easily run and deployed.