Database Schema Designer

An entity-relationship diagram where every table is a node and foreign keys are edges.

Drag nodes, pan and zoom — this is a live React Flow canvas.

How it works

Tables render as custom nodes with one row per column and a handle per row, so foreign-key edges attach to the exact column they reference.

Source code

tsx

function TableNode({ data }) {
  return data.columns.map((col) => (
    <div key={col.name}>
      <Handle id={col.name} type="source" position={Position.Right} />
      {col.name}: {col.type}
    </div>
  ));
}

Further reading: https://reactflow.dev/examples

Related examples

Data Visualization

ETL Data Pipeline

Source to warehouse: Postgres and Kafka feed dbt models that land in Snowflake.