Database schema diagramPro
Tables and relations from the generated schema with crow's foot ends. Pan and zoom, hover a table to trace its relations, open one for sample rows, and see what the last prompt added.
On this page
ProEight tables behind the booking page. The waitlist was just added. Hover to trace relations, click a table for sample rows, pinch or Cmd scroll to zoom.
Installation
Usage
import { DbSchemaDiagram } from "@/components/ui/chatcn/pro/db-schema-diagram"
<DbSchemaDiagram tables={tables} selected={open} onSelectedChange={loadRows} rowsLoading={loading} />Give each table a position, or leave it out and tables are laid out by relation depth. Foreign keys draw relations to the referenced column. Mark tables and columns from the latest generation with status: "new" or "changed". A plain wheel scrolls the page; pinch or Cmd scroll zooms.
Examples
States
ProRows loading, a new table with no rows, reading the schema, no database and a failed migration.
Props
| Prop | Type | Notes |
|---|---|---|
tables | DbTable[] | name, columns (type, pk, fk, nullable, status), rows, rowCount, position, status |
selected, defaultSelected, onSelectedChange | string | null | The open table |
rowsLoading | boolean | Sample rows are on their way |
maxColumns | number | Before "n more columns". Default 8 |
height | number | string | Default 520 |
loading, error, onRetry, emptyState |
Keyboard
| Key | Action |
|---|---|
| Arrow keys on the canvas | Pan 40 px, Shift 160 |
+ - 0 | Zoom in, out, fit |
Tab Enter | Move between tables and open sample rows |
Escape | Close the rows |
Accessibility
- Each table is a button named with its column and row counts and whether it is new. Columns read out primary keys and what foreign keys reference.
- Sample rows are a real table with column headers. New and changed are labels as well as tints.
Motion
- Hovering dims unrelated tables and relations over 150 ms. The rows panel fades up over 220 ms. Pan and zoom follow input directly. Reduced motion keeps the fades.