ComponentsNodesDatabase Schema

Database Schema Node

A node that can be used to visualize a database schema.

Dependencies:
@xyflow/reactshadcn/ui/tableBaseNodeLabeledHandle

Installation

Make sure to follow the prerequisites before installing the component.

npx shadcn@latest add https://ui-components-git-tooltip-node-refactor-xyflow.vercel.app/database-schema-node

Usage

1. Copy the component into your app

"use client";
 
import { Background, Edge, ReactFlow } from "@xyflow/react";
import { DatabaseSchemaNode } from "@/components/database-schema-node";
 
const defaultNodes = [
  {
    id: "1",
    position: { x: 0, y: 0 },
    type: "databaseSchema",
    data: {
      label: "Products",
      schema: [
        { title: "id", type: "uuid" },
        { title: "name", type: "varchar" },
        { title: "description", type: "varchar" },
        { title: "warehouse_id", type: "uuid" },
        { title: "supplier_id", type: "uuid" },
        { title: "price", type: "money" },
        { title: "quantity", type: "int4" },
      ],
    },
  },
  {
    id: "2",
    position: { x: 350, y: -100 },
    type: "databaseSchema",
    data: {
      label: "Warehouses",
      schema: [
        { title: "id", type: "uuid" },
        { title: "name", type: "varchar" },
        { title: "address", type: "varchar" },
        { title: "capacity", type: "int4" },
      ],
    },
  },
  {
    id: "3",
    position: { x: 350, y: 200 },
    type: "databaseSchema",
    data: {
      label: "Suppliers",
      schema: [
        { title: "id", type: "uuid" },
        { title: "name", type: "varchar" },
        { title: "description", type: "varchar" },
        { title: "country", type: "varchar" },
      ],
    },
  },
];
 
const defaultEdges: Edge[] = [
  {
    id: "products-warehouses",
    source: "1",
    target: "2",
    sourceHandle: "warehouse_id",
    targetHandle: "id",
  },
  {
    id: "products-suppliers",
    source: "1",
    target: "3",
    sourceHandle: "supplier_id",
    targetHandle: "id",
  },
];
 
const nodeTypes = {
  databaseSchema: DatabaseSchemaNode,
};
 
export default function Demo() {
  return (
    <div className="h-full w-full">
      <ReactFlow
        defaultNodes={defaultNodes}
        defaultEdges={defaultEdges}
        nodeTypes={nodeTypes}
        fitView
      >
        <Background />
      </ReactFlow>
    </div>
  );
}

2. Connect the component with your React Flow application.

import DemoWrapper from "@/components/demo-wrapper";
import Demo from "@/registry/components/database-schema-node/demo";
 
export default function DemoPage() {
  return (
    <DemoWrapper>
      <Demo />
    </DemoWrapper>
  );
}
PlaceholderAnnotation