Documentation

How to use ERD Studio

ERD Studio helps you design a database by drawing it. This guide shows each part of the app and gives advice for good designs.

Quick start

1. Open the app. Go to erdstudio.space/app. On the first visit you see the start screen. Choose I am new or I know databases. Then take the tour, start with an empty page, or pick an example: School, Shop, Library, Clinic or Research study. You can open the start screen again from the Help menu or the Open menu.
2. Add a table. Click Add table, or double-click an empty part of the canvas. Type a name in the right panel, for example Customer.
3. Add fields. Click + Add field at the bottom of the table. Type a name. Pick the kind of value: Text, Whole number, Decimal, Yes / No or Date.
4. Link two tables. Click Link tables. Click the first table, then the second. Choose one-to-many, one-to-one or many-to-many. Click Create relationship.
5. Try it. Open App preview at the bottom. Add records with the form. Then click Export to save your work.

The strip above the canvas shows these steps. The current step is blue. A finished step has a tick.

The screen

On a phone, tabs at the bottom switch between Diagram, Details, App and SQL.

Key ideas

Tables and fields

Add a table

• Click Add table in the top bar, or press T.
• Or double-click an empty part of the canvas. The table appears where you clicked.
• Or right-click the canvas and choose Add table here.

A new table has an id field (the primary key) and a name field. Rename them as you need.

Add a field

Click + Add field at the bottom of the table. A small box opens. Type the name and pick the kind of value. You can also pick Link to another table here. That makes a one-to-many link.

Edit a table

Click the table's coloured bar. The right panel shows its details. You can:

• Rename the table and pick a colour.
• Rename fields and change their kind of value.
• Tick ID (key), Required or Unique.
• Move a field up, delete it, or remove its link.
• Duplicate or delete the table.

Relationships

A relationship says how two tables connect. There are three ways to make one:

Name the link. A good relationship has a name, which is a verb: one Customer places many Orders. Type the name in the relationship window, or click a line and type it in the right panel. The name shows on the line and in the plain-English panel. It is saved in the SQL as a comment line.

1. Click Link tables (or press R). Click the first table, then the second.
2. Drag the small dot at the right of a field onto another table.
3. Right-click a table and choose Link to another table.

Each way opens the What kind of relationship? box. Choose one:

Tick Mandatory if every row must have a link. This makes the foreign key required (NOT NULL). If the table already has rows, the link starts as optional so no rows are lost.

To change a relationship later, click its line. You can change the cardinality, the participation and, in Advanced mode, what happens when a parent row is deleted.

Reading the lines

ERD Studio uses crow's foot notation. Each end of a line has two marks. The mark next to the table is the maximum. The mark further away is the minimum.

In beginner mode, small labels "1" and "many" also appear on each line.

Moving around

App preview

App preview turns your design into a simple app. Each table has a screen with a list of records and an Add form.

• A linked field becomes a drop-down list of records from the other table. This shows the relationship at work.
• Required fields have a red star.
• Click Edit or Delete on a row to change it.
• Click Add example records to fill every table with sample data.

If a record breaks a rule, a message says which rule and why. For example, you cannot delete a customer who still has orders.

Browse data shows the rows of one table at a time.

SQL panel

Tick Show SQL to open the SQL panel on the left. SQL is the language the database reads.

• The SQL updates when you change the diagram.
• You can edit the SQL. When you stop typing, the diagram updates.
• If the SQL has a mistake, the panel shows the line number. The diagram keeps its last good state.

CREATE TABLE Customer (
  customer_id INTEGER PRIMARY KEY AUTOINCREMENT,
  name TEXT NOT NULL
);

CREATE TABLE "Order" (
  order_id INTEGER PRIMARY KEY AUTOINCREMENT,
  customer_id INTEGER NOT NULL,
  FOREIGN KEY (customer_id) REFERENCES Customer (customer_id)
);

Check my design

Click Check in the top bar. The number on the button shows how many things to fix or check. The checker uses standard design rules. It runs in your browser and does not use AI.

Each item says why it matters and names the idea to learn. Show me goes to the table. Many items have a one-click fix that says what it changes. Press Undo (Ctrl+Z) to go back.

The checker cannot know your business rules. A warning can be correct for your case. Also read your diagram aloud: "each Customer places zero or many Orders".

Colours in the SQL

The SQL panel uses calm colours so you can find things quickly. Each table name has the colour of its table in the diagram. PRIMARY KEY is amber. FOREIGN KEY and REFERENCES are blue. Rules such as NOT NULL and UNIQUE are violet. Types such as TEXT and INTEGER are green. The small strip under the SQL shows the key. The colours are only on the screen. When you copy the SQL, you get plain text.

Versions

Save a version before a big change. Then you can see what changed, and go back if you need to.

1. Press Ctrl + S, or open Open > Versions.
2. Type a name, for example "before the many-to-many". Click Save a version.
3. Later, click See changes. The list shows new, changed and removed tables and fields.
4. Click Go back to return to that version. Press Undo (Ctrl + Z) if you change your mind.

ERD Studio keeps 20 versions. When you save the 21st, the oldest one goes. Versions stay in this browser. The .zip export keeps a copy in versions.json. A renamed table or field shows as removed and new.

Open and export

Open

• Open > Example loads the School or Shop example.
• Open > Open a file reads a .sql, .db, .sqlite or draw.io (.drawio or .xml) file. You can also drag the file onto the canvas.

draw.io diagrams

ERD Studio reads two styles from diagrams.net (draw.io):

• Chen style: rectangles are entities, ellipses are attributes and diamonds are relationships. Labels 1, N and M on the lines set the cardinality. An underlined attribute becomes the primary key.
• Table style: table shapes with a row for each field. Crow's foot line ends set the cardinality.

After an import, check the keys and the kinds of value.

Export

Advanced mode

Tick Advanced in the top bar to see every option:

• Raw SQL types, default values and auto-increment.
• Each column is a small card. The coloured labels show its rules at a glance: Primary key, Link, Required, Unique, Auto number, Default. Click the arrow (or the labels) to open the card and change the rules. Open all opens every card.
• What happens to child rows when a parent row is deleted (CASCADE, SET NULL, RESTRICT).
• SQL for MySQL or PostgreSQL in the SQL panel. The database in the browser is always SQLite.
• The SQL query tab to run SELECT, INSERT, UPDATE and JOIN statements.
• Solid lines for identifying relationships (the foreign key is part of the primary key) and dashed lines for the others.

Designing well

1. One table for one kind of thing. Use a singular name: Student, not Students.
2. Say what one row is. If you cannot say it in a few words, the table may be doing two jobs.
3. Give every table a primary key. A simple number is the safest choice.
4. One value in one field. Do not store a list in a field. Do not make phone1, phone2 and phone3. Make a new table and link it.
5. Store each fact one time. Keep an address in Customer only. Other tables point to the customer.
6. Resolve many-to-many with an associative table. Put facts about the pairing there, for example the grade in Enrolment.
7. Decide mandatory or optional for every link. Must every order have a customer?
8. Use clear, regular names. Lower case with underscores, for example start_date. Use the same name for a key in both tables.
9. Test with real examples. Add records in App preview. If a record is hard to enter, the design has a problem.

Normal forms

Normalisation removes repeated facts, so each fact is stored one time. Open Learn > Normal forms, step by step for a short walkthrough with an order sheet example.

To check your own table, select it and click Check normal forms in the details panel. ERD Studio cannot see what your data means, so it asks you simple questions. From your answers it shows a change list. Nothing changes until you click Make this change, and Undo works. Records stay in their tables, but the values in moved fields are not copied, so export first if you need them.

Exercises

Open Learn > Try an exercise. There are three cases: a town library (easy), a health clinic (medium) and an event company (harder). Each one opens an empty diagram and a card with the case text and ideas to think about. Draw your design, then click Check my design. Many designs can be correct. The exercises are for practice. They do not give a mark.

Keys and mouse

On a Mac, use Cmd in place of Ctrl. Right-click a table, a line or the canvas for more actions.

Keyboard and screen readers

You can do every main task with the keyboard.

Each table on the canvas has a spoken label with its name, number of fields, primary key and links. The right panel lists every table and relationship in plain words. Use it as a text view of the diagram. Status messages are read out. ERD Studio follows your system setting for reduced motion. We test with automated checks and the keyboard. If something does not work with your screen reader, please tell us.

For teachers

• Links you can share: erdstudio.space/app/?example=school, ?example=shop, ?example=library, ?example=clinic, ?example=research, ?new for a blank diagram, and ?tour to start the tour.
• A first lesson: open the School example. Ask students to read the right panel aloud. Then ask them to add a Room table and link it to Module.
• Hand-in: ask for Export > Everything in one file (.zip). It holds the picture, the SQL and the database.
• Check before hand-in: ask students to click Check and clear every "Must fix" item before they export.
• Phones and tablets: the app works by touch. Drag a table with one finger. Pinch with two fingers to zoom. On a phone, use the bar at the bottom to move between Diagram, Details, App and SQL. You can add the app to the home screen from the browser menu.
• Shared computers: remind students to export before they leave. Work is saved in the browser of that computer only.
• Talk about the SQL: switch on Show SQL after students understand the diagram. Show how each line in the diagram becomes a FOREIGN KEY.

Problems and fixes

I cannot find a table

Click Fit all, or use Go to table in the map. The map says how many tables are outside the view.

A record will not save

Read the message under the form. A required field may be empty, a unique value may already exist, or the linked record may be missing. Add the parent record first, for example the customer before the order.

No internet

After your first visit, the app opens with no internet. Your browser keeps a copy of the app. Your work is also in your browser, so you can continue.

My work is gone

Work is saved in one browser on one computer. A private window, another browser or cleared browser data starts empty. Open your exported file with Open > Open a file.

"SQLite failed to load"

The first load needs internet access to the jsDelivr network. Check the connection, then reload the page.

The SQL panel shows an error

The message gives the line number. Fix that line. The diagram keeps its last good version until the SQL is correct.

A line passes behind a table

Click Tidy up, or drag the table to a new place.

What you get

• A real database. Your design runs on SQLite, the most used database engine in the world. Foreign key rules are on, so a wrong link gives a clear message.
• Three views that always match. Change the diagram, and the SQL and the app follow. Change the SQL, and the diagram follows. Your records stay when you rename a table or a field in the Details panel.
• SQL you can take with you. The same design as SQLite, MySQL or PostgreSQL. The SQL reader understands CREATE TABLE, ALTER TABLE and DROP TABLE.
• Nothing to install. It runs in current Chrome, Edge, Firefox and Safari, on laptops, tablets and phones.
• It works with no internet. After your first visit, the app opens offline. You can also install it: open the Help menu and choose Install as an app.
• Your work is private. It stays on your device. There is no account and no tracking.

SQLite, MySQL, PostgreSQL, draw.io and other product names are trademarks of their owners. ERD Studio is not affiliated with them. Open-source parts are listed in the notices.

Privacy

ERD Studio does not collect personal data. Your diagrams and records stay in your browser's local storage on your device. They are not sent to any server. A share link carries the tables inside the link after the # sign. Browsers do not send that part to the server. The page loads fonts from Google Fonts. The database engine is part of the site. Only if it fails to load does the page fetch a copy from jsDelivr. Those services can see that your browser asked for the files, as with any website. Versions you save stay in this browser too.

Open ERD Studio →