Playground

Large diagrams#

Comment-only edits keep the current drawing while updating diagnostic positions. Changing a live background preserves the SVG; changing between light and dark updates its ink. Recent layouts and diagram views are cached with memory limits, so returning from Names or a related view can reuse the previous drawing.

Source analysis and layout run outside the editor thread. Cancel stops pending work, and Retry starts it again. Very large diagrams still take time to mount in the browser. Use Keys, Names, or a related view to reduce the amount on screen. Diagrams with heavily referenced tables use ELK's high-degree layout handling. Search, composite-key focus, and exported files keep the full schema information.

Pasting SQL#

Paste a CREATE TABLE script into the editor and it comes in as resin: keys, indexes, foreign keys, enum values and comments carry over. A line under the editor's header says so until you first use it. In an empty editor, or over an example you have not changed, the SQL takes the whole document; into a document of your own it goes where you paste it.

After a paste the same line says how many tables were converted. Review import opens the original SQL and every conversion note, with its SQL line and column. This includes statements that did not produce a table, such as CREATE TABLE ... AS SELECT. Undo, on the line or with Ctrl or Cmd + Z, brings back the SQL exactly as you pasted it. See Importing SQL for what converts and what is left out.

Documents and recovery#

Documents opens your local workspace. Give a document a name, open a recent document, create a new one, or open an .erd or .sql file. Download .erd saves the editable source to a file. Loading an example or a shared link preserves the previous document in the recent list.

Edits are saved asynchronously in this browser. The status shows Saving while a write is pending and Saved locally after it commits. Wait for Saved locally before closing or reloading. IndexedDB stores changed documents and recovery records separately; older local documents migrate automatically and the original localStorage data is retained. Browsers that block IndexedDB on first use fall back to localStorage. After migration, blocked storage shows an error so an older backup cannot silently replace newer work. Recovery history keeps up to 20 source snapshots, at most one automatic snapshot per 30 seconds of editing, plus checkpoints before imports, relation edits and document switches. Restoring a snapshot also keeps the version it replaces. Opening a document starts a fresh Undo history.

If browser storage is full, unavailable, corrupt, or changed in another tab, an on-screen message explains the problem. Unsaved work stays in the current session and can be downloaded. Download it before closing, then reload to read the latest stored documents. Browser storage is not a backup: keep .erd files for work you need to retain.

Importing and updating DDL#

Documents → Import accepts pasted SQL or a .sql file. Preview import shows the converted source and all notes before applying. Choose a new document, add new tables, or update the last import. An optional service name places a single-schema import in that service. Multi-schema SQL retains its existing service blocks.

Updating an import matches table and column identities. It retains existing descriptions when the new DDL has none, encryption annotations, enum annotations and logical references. Manual service assignment stays with the table. Removed imported tables are removed from the preview; unrelated tables stay. If a retained reference points at a removed table or column, fix the editable preview before applying. Existing comments are retained in a preamble when source is rewritten.

Lint#

The playground runs the lint rules on every change. The status bar under the editor counts the findings next to the compiler's own problems, as in 3 lint findings; press the count to list them under the editor, and again to close the list. The playground remembers whether it was open. In the editor a finding has a dotted underline and a dot in the gutter; hover over it for the message, the hint and the rule. Errors and warnings of the compiler open the list by themselves, as before.

Reading a diagram#

Click a table's name for a side panel that lists its columns, indexes and references as tables. Its left edge resizes it. Click a column, on the diagram or in the panel, for a small card with its details; its text can be selected and copied. A column that holds or receives a reference also highlights that reference.

A service's name, on its area or on its card in the Services view, opens the service in the side panel instead (see Services).

Clicking the same table name again keeps the panel open. Close it with its Close button or Esc. Selecting a column from the panel reveals it even when Keys or Names has hidden it. For a composite reference, selecting any member highlights the complete set of column pairs.

The wheel zooms around the pointer, dragging pans, and a double click fits the drawing to the screen.

Finding a table#

Find a table, in the diagram's header, or Ctrl or Cmd + K opens a search over the tables. It matches table names first, then descriptions, then column names; a table found by a column shows which one. Up and Down move through the results, Enter goes to the table and opens its side panel, and Shift Enter shows the table with only its related tables. Esc closes the search.

Related tables only#

Related only, in a table's side panel, draws just that table and the tables its references join it to, laid out again to fit. A pill at the top of the canvas names the table, says how many tables are with it and switches between 1 step (the tables it references and the ones referencing it) and 2 steps (their neighbors too). Show all, or Esc once the panel is closed, brings every table back.

The related controls move below the view options when both groups cannot fit on one row. Long table names shorten with an ellipsis so the step controls and Show all remain visible on narrow screens.

Following a reference in the side panel to a table the view leaves out moves the view to that table, so you can walk a large schema one table at a time. The header counts what is shown, as in 7 of 13 tables.

Services#

When the document has services, the view options add Services to All, Keys and Names. It draws each service as one card in the service's hue, with a row per table and its number of columns, and counts the references inside the service under the rows. A reference that leaves a service runs from the row of its table, so the connectors show where the services depend on each other. Tables outside every service keep their name only. The header counts services and tables, as in 4 services, 13 tables.

Click a service's card header, or a service's label on its area in the other views, for the service panel. Its header names what the service owns and the services on either side of it: Tables, Depends on and Used by. Below, Tables lists the service's tables with their number of columns, and Depends on and Used by list the references that cross the service's edge, under a row for each service on the other side, written as resin writes them (carts.user_id ~> users.id). A foreign key across services, which the compiler warns about, has its arrow in the warning color. References inside the service are in the panels of its tables.

Rows are pressed as a whole. A table's row, in the panel or on a folded card, opens that table's panel; a reference's row highlights the reference on the diagram. Service names are links to their own panel, and a table's panel links back to its service.

Service only, in the service panel's header, draws the service's tables at the current level (in full from the Services view) and folds the services they reference or are referenced by into cards around them. The header counts the tables drawn in full, as in 6 of 13 tables. A pill at the top of the canvas names the service; Show all, or Esc once the panel is closed, brings every table back, and so does choosing Services, which shows the whole schema by service. SQL, next to it, opens the SQL view with the service already chosen.

Exploration tools#

Explore opens additional controls:

• Choose a table, one or two steps, and incoming, outgoing or all references.
• Find the shortest relationship path between two tables.
• Select visible services. Tables outside a service stay visible.
• Save the current view by name and load it later without replacing the source.
• Review logical relation candidates from matching *_id names and primary-key types. Select the candidates to add as ~> references. Ambiguous targets require a choice.
• Add, edit or remove a single-column logical reference using explicit source and target selectors. Physical foreign keys remain in the source.

A filter bar identifies path, service and comparison filters. Reset view returns to the whole diagram. Layout runs in a Web Worker, so large layouts do not block the editor. A pending layout can be cancelled or retried. New edits cancel obsolete layout work. Cosmetic changes reuse the last layout when the graph is unchanged.

Comparing versions#

Documents → Compare opens an older .erd or .sql file, or accepts its source. Compare versions lists changes and marks them on the diagram. Show changed tables and their neighbors narrows the drawing to the affected area.

A link can carry two versions of a document, as the one in a pull request comment does. The playground then marks on the diagram what changed since the older one, a line under the editor counts the tables added, removed and changed, and the side panel tags each table and says what happened to each column. The editor holds the newer version, and edits are compared as you type. Stop comparing, on that line, draws the document alone.

View options#

Sharing and exporting#

Copy link puts the document, column visibility, audit setting, connector style, the parts of a row left out, related view, one service's view, path, service filter and comparison base in the address. Theme, grid, zoom and panel size remain local browser preferences. A link with an unchanged document can still apply different view options.

Copy reading link in Documents opens with the source editor hidden. Recipients can explore the diagram and use Edit a copy to work on their own local document. The link contains the source, and anyone with the link can read it.

Copy SVG and the Export menu export the current document with its display filters, related view and comparison included: plain by default, with no background, or the current background as a still image. The menu also exports a PNG in the current theme, up to 2x resolution, with a maximum side of 8192 pixels and 32 million pixels total. Export checks the current source. If it has errors, correct them before exporting the drawing.

SQL DDL, at the end of the Export menu, shows the document as SQL in the side panel: choose the database (MySQL, PostgreSQL, SQLite, SQL Server or Oracle) and, when the document has services, all of them or one, then Copy or Download. The SQL follows your edits while the panel is open, and the notes under it say what was written in an unexpected way. The playground remembers the database. See Generating SQL.

Keyboard#