Entity Relationship Diagram Visualizer
Demo
Code
An Entity Relationship Diagram (ERD) is a drawing that represents objects in a database, usually tables, and their relationships. It's a very useful thing to have when developing software that communicates with a database. It's also a great thing to create before actually creating a database.
There are a lot of commercial tools out there that let you create and work with ERDs. Probably the best one in my opinion is ERwin. Beware ERwin is very expensive. There used to be a community edition but CA sold the division and the new people got rid of it.
The problem with ERwin is there is a steep learning curve and it requires a lot of clicking. Creating an ERD can take some time. If you have an existing database it's not so bad, but creating a new ERD from scratch... takes some time.
I looked around at a couple projects on github and there were several that were using a markdown like language to describe the database and create an ERD. The best one I found was BurntSushi/erd. This can be ran locally but I wanted something that was web based.
I couldn't find anything so I decided to make one. One thing I liked about the BurntSushi/erd was the use of d3-graphviz.
Defining a Table
I wanted to be able to create a diagram for a table easily. I tried to keep the syntax as close to the SQL CREATE TABLE as possible.
Example of using Create Table:
create table AUTHOR (
AUTHOR_ID INT NOT NULL,
NAME VARCHAR(50) NOT NULL,
POSTCODE VARCHAR(50)
)
[AUTHOR]
AUTHOR_ID INT NOT NULL
NAME VARCHAR(50) NOT NULL
POSTCODE VARCHAR(50)
Comments
You can create comments by starting a line with "#" like:
[AUTHOR]
AUTHOR_ID INT NOT NULL
NAME VARCHAR(50) NOT NULL
# Let's comment out the Post Code Field
#POSTCODE VARCHAR(50)
Defining Relationships
So we can draw some tables, let's see how to create some relationships between them.
First we need at least two tables:
[AUTHOR]
AUTHOR_ID INT NOT NULL
NAME VARCHAR(50) NOT NULL
POSTCODE VARCHAR(50)
[BOOK]
BOOK_ID INT NOT NULL,
AUTHOR_ID INT NOT NULL,
NAME VARCHAR(50) NOT NULL
Now let's add a relationship with:
AUTHOR.AUTHOR_ID 1:* BOOK.AUTHOR_ID
The "1:*" represents a one-to-many relationship between the field AUTHOR_ID in the table AUTHOR to the field AUTHOR_ID in the table BOOK. So an author can write many books, but a book can only be written by one author.
If you want to create an identifying relationship put square brackets around the cardinality like so:
AUTHOR.AUTHOR_ID [1:*] BOOK.AUTHOR_ID
If you want to learn what an identifiying relationship is click here.
The cardinalities supported by the tool are:
# Relationships are defined by:
# TableName.FieldName [Cardinality] TableName.FieldName
# Cardinality can be:
# 1:* = One to Many
# 1:1 = One to One
# *:* = Many to Many
Summary
You can't move the tables in the diagram around, but with this tool you can create an ERD quickly from a simple amount of text. BEWARE! The tool doesn't save the text or anything it all works locally via javascript in your browser so copy and paste the text to notepad or something so you don't lose it. Refreshing will reset the textarea.
