Skip to content
Docs

Automatic ER Diagram from a Database

The diagram the workbench draws for a connected database — Six tables laid out from the introspected schema: foreign keys, the posts–tags pair with its junction collapsed, an expanded column list, and the N-hop neighbourhood filter.

The workbench draws an automatic ER diagram from a database as soon as you connect: a read-only diagram built with React Flow and an ELK layered layout over the same introspected relationship data the editor already consumes — it adds no schema-mutating call and no new server endpoint.

  • Nodes are tables (name, primary-key badge, column list collapsed by default and expandable on click).
  • Edges distinguish relationship kinds: one directed edge per foreign key; exactly one edge per many-to-many pair with the junction table collapsed (not drawn as its own node); name-based links as a visually distinct edge kind; and polymorphic relationships as an annotated edge (never silently dropped).
  • Hovering an edge reveals its join columns.

For schemas with many tables, schema-name clustering and an N-hop neighborhood filter reduce the rendered node count so a large schema stays legible; the layout of a 100-table schema completes well within interactive time.

  • Clicking a table node switches the shell to the editor view with that table’s grid loaded.
  • A minimap and zoom aid navigation; the diagram can be exported to PNG client-side.