ComponentsData display

Schema Diagram

Shows tables as cards, fields as rows, and links as lines between them. New, changed, and removed fields are marked so someone can review a proposed schema before it is applied. Tables sit in columns on wide screens and stack on phones.

Schema proposal in the canvasSample data. Nothing is written to a database.

Sales pipeline

2 tables in this proposal · 2 links

Not yet applied

Added
Changed
Removed
Unique
* Required

Usage

import { SchemaDiagram, SchemaLegend } from "@tulipfarm/sprout/schema-diagram";

const tables = [
  {
    id: "deals",
    label: "Deals",
    state: "new",
    fields: [
      { id: "title", label: "Title", type: "text", required: true, unique: true },
      { id: "stage", label: "Stage", type: "select", required: true, detail: "Qualified · Won · Lost" },
      { id: "customer", label: "Customer", type: "link", required: true },
    ],
  },
  {
    id: "customers",
    label: "Customers",
    state: "changed",
    fields: [
      { id: "email", label: "Billing email", type: "text", required: true, change: "added" },
      { id: "fax", label: "Fax number", type: "text", required: false, change: "removed" },
    ],
  },
];
const links = [
  { id: "customer", source: "deals", field: "customer", target: "customers", label: "N:1" },
];

<SchemaDiagram tables={tables} links={links} label="Schema diagram for Sales pipeline" />
<SchemaLegend />

The diagram fills its parent and is at least 24rem tall. Give the parent a height, such as h-128, to show more.

Table states and field changes

state is new, changed, linked (an existing table shown only because a link points to it), or unchanged. A field's change is added, changed, or removed. Required fields show *, unique fields show a key, and detail adds a second line such as select options.

Table states and field changesNew, Changed, Existing, and unchanged tables. Drag to pan; scroll or pinch to zoom.

Added
Changed
Removed
Unique
* Required

Layouts

layout="auto" uses columns from 768px up and a stack below it. Columns place each linked table one step right of the table that links to it. The stack follows link order. Pass horizontal orvertical to fix the layout.

ColumnsLinked tables sit one column right. Controls bottom right.

StackedPhones stack tables in link order. Controls top right.

Content and overflow

Cards are 264px wide. Long table names, field names, and details truncate, and hovering shows the full text. A linked table with no fields reads "Fields not shown"; any other empty table reads "No fields". Links can point back to their own table.

Self links, empty tables, and long namesLong labels truncate and show the full text on hover.

Props

tables: SchemaTable[] with id, label, state, and fields.
links: SchemaLink[] from a source table'sfield to a target table, with a short label such as N:1.
label: the accessible name of the diagram.
layout: auto (default), horizontal, or vertical.
SchemaLegend renders a labelled list and takes the props of aul.

Keyboard and accessibility

Tab moves to the diagram, then to each table card, then to the zoom controls. With the diagram or a card focused, the arrow keys pan (hold Shift to move faster), + and - zoom, and 0fits everything in view. Each card is a named group, each link is described as "Deals Customer links to Customers: N:1", and changes, required fields, and unique keys have text for screen readers, not only color. Zoom and pan animate for 120–180ms and stop animating when reduced motion is requested.

Loading, load errors, removed proposals, and approval status belong to your application. The playground above shows them with sample data.

Theme tokens

Uses --sprout-surface, --sprout-canvas, --sprout-line, --sprout-text, --sprout-muted, and the --sprout-success, --sprout-warning, and --sprout-danger pairs. Badges for table state use the Badge tokens.