DER
DER turns the database of an app into a diagram you can explore: every table on a board, every foreign key drawn as a line between the two tables it joins.
It reads the Schema JSON the build writes and runs entirely in the browser. Open DER, or read its source on GitHub.
Load a database
Set DB_SCHEMA_FILE in the app and the build writes the
file DER reads. Then add it to DER in either of two ways:
- Upload the file. The schema is kept as it was when you uploaded it.
- Give the URL it is published at. The schema is fetched again each time you open it, so the diagram keeps up with the app as its models change.
You can keep as many databases as you like and switch between them from the title of the panel. To see what DER does before you have a schema of your own, Try the Framework on the first screen loads the tables the framework itself declares.
Build the board
The panel on the left lists every table of the database. Click one and it appears on the board; click Add all and every table lands at once, already laid out in clusters. When the list is long, type in the filter at the top to narrow it by the name of a table or a group.
Once a table is on the board you can drag it anywhere, and the links follow. A table shows its first 15 fields and keeps the rest behind a button, so a wide table does not take over the board. The Settings let you show every field, only the keys, or the keys first.
When the board gets crowded, Tidy pushes the tables apart until nothing overlaps, moving each one as little as it can, so an arrangement you made stays yours. Show the whole board zooms out until every table is on screen at once, and the map in the corner shows where you are on a board too big to see whole.
Read the links
Every entry in foreigns becomes a link, drawn from one column
to the other. The ends of a link tell you how many rows meet there, in the usual crow's foot notation:
| End | Means |
|---|---|
| A bar | One row. The table the key points at always gets this end. |
| A crow's foot | Many rows. The table holding the key gets this end, unless that key is its whole primary key, in which case only one row can hold it. |
Click a table to see what it is connected to: its links light up in colour, the columns at both ends take the same colour, and every table it does not reach fades back. With Animate the links on, the lit links run from the key towards the table it points at, so the direction of each relation is visible at a glance.
Gather tables into groups
A group draws a box around the tables that belong together, and moves as one when you drag it. Select some
tables and click Create group, or let Group by prefix do it for you: tables that share the first part
of their name, like credential_device and credential_reset, are gathered under that
prefix. Groups show up in the panel too, so a long list of tables folds into a short list of groups.
Keep more than one board
A view is a board of its own for the same database, with its own tables, groups, zoom and scroll. Use them to draw the database one part at a time: one view for the users and their credentials, another for the logs, another for everything. The strip at the bottom lists them, numbered, and a new view can start empty or as a copy of the one you are on.
Change how it looks
The gear in the tools opens the Settings, which apply to every database you have loaded:
| Setting | What you get |
|---|---|
| Show the dots behind the board | A dotted grid behind the tables. |
| Snap a Table to the dots as it is dragged | Tables that line up with the grid when you drop them. |
| Push the board apart when a Table is added | Room made for each table you add, instead of it landing on another. |
| Show a map of the board in the corner | A small map of the whole board with the part on screen marked. Click anywhere on it to go there. |
| Show the table description | The description of each model under the name of its table. |
| Show the type of each field | The type written beside each field. |
| Show only the fields that are keys | Just the primary keys, the keys and the columns a link ends at, for a board about the relations rather than the columns. |
| Show the created, modified and status columns | The columns the model flags add, which are otherwise hidden to keep the tables short. |
| Put the keys before the other fields | The keys at the top of each table. |
| Show every field, with none kept back | No limit of 15 fields, however tall the table gets. |
| Draw the links straight rather than curved | Links with square corners instead of curves. |
| End the links in dots rather than in crow's feet | Plain dots at the ends, when you do not need to know how many rows meet. |
| Animate the links to show the direction | The links of the selected table running from the key to the table it points at. |
Light, dark or the system's choice is picked from the switch above the tools.
Work from the keyboard
Everything in the tools has a key, and the second tab of the Settings lists them all — ? opens it. On Windows and Linux use Ctrl wherever this table says ⌘:
| Keys | What it does |
|---|---|
| ⌘ Z | Undo the last change to the board. |
| ⌘ ⇧ Z | Redo it. |
| ⌘ F | Jump to the filter and type a table name. |
| ↑ ↓ ← → | While the filter has the caret, walk the list and open or close its rows. Otherwise, nudge the selected tables by a pixel — hold ⇧ for 10. |
| Enter | Select the row of the panel the arrows are on. |
| ⌘ B | Collapse the panel to give the board the whole window, or open it again. |
| ⌘ E | Show the whole board at once. |
| ⌘ ⇧ E | Zoom in on the selected tables. |
| ⌘ D | Tidy the board. |
| ⌘ G | Create a group with the selected tables. |
| ⌘ ⌫ | Remove the selected tables from the board. |
| ⌘ + / − / 0 | Zoom in, zoom out, or back to 100%. |
| ⌘ 1 – 9 | Switch to the view with that number. |
| ⌘ , | Open the Settings. |
| Space | Hold it and drag to pan the board from anywhere, even from on top of a table. |
| Esc | Close a menu or a dialog, empty the filter, or drop the selection, whichever comes first. |
Take it with you
Everything you do stays in your browser — the databases, and the boards, groups and views of each. Nothing is sent anywhere, and when you come back the board is exactly as you left it.
To carry a database to another browser or another machine, Export it from the list of databases. The file holds the schema and every view you made of it, and Import, on the same list or on the first screen, brings it all back as a new database.