draw.io runs in a browser with no installation or account required. Its shape libraries include entity tables and crow's foot connectors for database diagrams.
The draw.io example uses a small forum schema with members, posts and comments. It enables the ERD shapes, adds columns, connects the tables in crow's foot notation, and exports the result as PNG or SVG.
Getting started: pick a storage location
Open app.diagrams.net and the first thing it asks is where to keep your files: Google Drive, OneDrive, your device, or the browser.
If you are drawing alone and only need an image at the end, device storage is simplest. If the files move around a team, Drive or OneDrive saves a step later. Browser storage lives inside the browser you're using right now, so clearing site data takes the file with it.
Once you pick a location and create a new diagram, you get an empty canvas: shapes on the left, canvas in the middle, format panel on the right.
Finding the drawio ERD shapes
The default shape panel only offers rectangles and arrows, so the ERD shapes have to be switched on. Two ways to do it.
The quick one is search. Type table into the shape search box on the left and the entity table shape (a header with column rows) appears right away. Drag it onto the canvas.
To enable the whole library, click More Shapes at the bottom of the shape panel, tick Entity Relation under Software, and click Apply. That adds the ERD shapes plus a set of pre-styled crow's foot connectors to the left panel. If you draw ERDs regularly, having those connectors on hand saves you restyling every line.
Building a table
With a shape on the canvas, start filling it in.
Naming the table. Double-click the header to type a name: members, posts, comments for the forum example.
Selecting rows. Selection in draw.io's table shape depends on how many times you click. One click selects the whole table, a second click on a row selects the cell inside it, and a third click selects the entire row. It feels odd for the first minute and then it's the fastest way to edit columns.
Adding columns. With a row selected, open the Arrange tab in the format panel on the right, which holds Insert Row Above and Insert Row After. From the keyboard, select a row and press Ctrl+Enter to clone it, which is the quickest way to add several columns in a row.
Deleting columns. One thing to watch: pressing Delete on a selected row clears the row's content but leaves an empty row behind. To remove the row itself, use the row-delete button in the Arrange tab.
Marking primary keys. The table shape has no dedicated primary key marker, so write PK and FK next to the column names or set them in bold. As long as the convention is consistent across the team, it reads fine.
For the forum's members table, that's four rows: id (PK), email, nickname, created_at. Build posts and comments the same way.
Connecting relationships in crow's foot notation
With three tables on the canvas, connect them.
Hover over the source shape and drag from one of the arrows or blue connection points onto the target. Where you drop matters. Drop on the table's name and the connector attaches to the outside of the table; drop on a specific row and it fixes to that row, following the column when the table moves. When you want the line to point at the actual foreign key column, connect to the row.
There are two ways to get crow's foot ends. If the Entity Relation library is on, drag one of its crow's foot connectors and it comes in already styled. To change a line you already drew, select it and choose new ends from the source and target lists in the Style tab — the crow's foot options are grouped at the bottom.
The symbols are built from three parts: a circle for zero, a bar for one, and the forked foot for many. Between members and posts, the member end is two bars (exactly one) and the post end is a circle plus a crow's foot (zero or more). All four combinations are laid out in the ERD notation guide if you want the full set.
Generating tables from SQL
Rather than typing a wide table row by row, you can paste CREATE TABLE statements and let draw.io build the shapes.
Open Arrange → Insert → Advanced → SQL, or use the + icon in the toolbar and choose Advanced → SQL. Paste your statements into the dialog and the entities appear with their attributes already filled in.
CREATE TABLE members (
id BIGINT AUTO_INCREMENT PRIMARY KEY,
email VARCHAR(255) NOT NULL UNIQUE,
nickname VARCHAR(50) NOT NULL,
created_at DATETIME NOT NULL
);
CREATE TABLE posts (
id BIGINT AUTO_INCREMENT PRIMARY KEY,
member_id BIGINT NOT NULL,
title VARCHAR(200) NOT NULL,
content TEXT NULL,
created_at DATETIME NOT NULL
);The generated shapes carry their columns, but no relationship lines are drawn. Arrange them and connect the relationships yourself using the steps above. Think of it as skipping the typing rather than importing a schema.
Tidying the diagram
Once the tables and lines are in, clean up the layout.
Align and distribute. Select several shapes, open the Arrange tab, and use the alignment buttons plus the distribute controls that even out spacing. The result beats eyeballing it.
Copy a style. Set the fill and border on one table, select it, press Alt+C to copy the style, then select another shape and press Alt+V to paste it. Past about ten tables, this pair of shortcuts saves real time.
Set a default style. Select a shape you like and press Ctrl+Shift+D, and every new shape you create takes that style. Decide once at the start and stop picking colors per shape.
Fine-tune. Ctrl+E opens the style string for direct editing, which covers values the format panel doesn't expose and lets you move a style verbatim onto another shape.
Exporting to PNG, SVG or PDF
Export from File → Export as, choosing PNG, JPEG, SVG or PDF. PNG suits wikis and meeting decks; pick SVG or PDF when the diagram has to scale or print.
The export dialog offers an option to include a copy of the diagram in the file. Turn it on and the exported PNG or SVG reopens in draw.io as an editable diagram, which means a team that passes images around doesn't have to track the source file separately.
Sharing depends on where the file lives. Files in Google Drive or OneDrive share through that service; files on your device get sent the usual way.
Three ways to work faster
Duplicate shapes. Select a shape and press Ctrl+D. For tables with similar column sets, duplicating and editing a few rows beats building each one from scratch.
Use the scratchpad. Drag shapes you use often into the scratchpad above the shape panel and they are there in your next diagram. A table shape carrying your team's standard styling is a good candidate. Note that the scratchpad lives in your browser's storage, so clearing site data clears it too.
Save a custom library. Click the edit pencil on the scratchpad and choose Export to save it as an XML file. Share that file and the whole team draws from the same shape set.
When the schema outgrows one page
Along the bottom of the canvas are page tabs. The plus button adds a page, so a single file can hold several diagrams.
Past about twenty tables, splitting by domain (members, orders, billing) reads far better than one crowded sheet, and the file stays a single file to share. For relationships that cross pages, leave a short note on each page saying which table on which page it connects to.
Shortcuts worth learning
Most of the repetitive moves in a draw.io database diagram have a shortcut. These are the ones that actually come up while drawing an ERD.
| Shortcut | What it does |
|---|---|
| Ctrl+Enter | Clone the selected row |
| Ctrl+D | Duplicate the selected shape |
| Alt+C / Alt+V | Copy / paste style |
| Ctrl+E | Edit the style string directly |
| Ctrl+Shift+D | Make the current shape's style the default |
| Ctrl+Shift+R | Clear the default style |
Row cloning and style copying alone noticeably cut the time it takes to build a ten-table diagram.
Things that trip people up
A deleted row leaves an empty gap. The Delete key clears content, not structure. Use the row-delete button in the Arrange tab to remove the row itself.
A connector ends up in the wrong place after moving a table. Dropping a connector on the table name attaches it to the outside of the table; dropping it on a row pins it to that row. To point at a specific foreign key column, re-drop the end on that row.
Shapes drift out of visual sync. Pick one table as the reference, press Ctrl+Shift+D to make its style the default, and bring the existing shapes into line with Alt+C and Alt+V.
FAQ
Is draw.io free?
Yes. Open app.diagrams.net in a browser and you can start drawing without an account, and neither the shape libraries nor the export formats cost anything. The desktop app is free as well.
Are there dedicated ERD shapes?
Yes. Type table into the shape search box on the left and the entity table shape appears immediately. For the full set, open More Shapes at the bottom of the shape panel, tick Entity Relation under Software, and click Apply — that adds the ERD shapes along with pre-styled crow's foot connectors.
How do I get crow's foot notation on the lines?
The Entity Relation library includes crow's foot connectors you can drag straight onto the canvas. To change a line you already drew, select it and pick new ends from the source and target lists in the Style tab; the crow's foot ends sit at the bottom of those lists.
Where is my diagram saved?
Wherever you chose at startup: Google Drive, OneDrive, your device, or the browser. You can move it later with Save As. Files kept in cloud storage are shared through that service's own sharing, while browser storage lives only in that browser and disappears if you clear site data.
For manual drawing, enable Entity Relation, fill the table shapes and connect them with crow's foot connectors. If the tables have many columns, generate the shapes from SQL first and add the relationships afterward. Either result can be exported as PNG or SVG.
If you already have the CREATE TABLE statements, pasting them into WorksCove ERD produces a diagram with the relationship lines already drawn, plus a table specification from the same schema. The full path is in SQL to ERD, and free online ERD tools covers the other no-cost options.