An interactive database schema visualization demo project based on React Flow.
- 🎨 Uses React Flow UI Database Schema Node component
- 🔗 Interactive node connections
- 📊 Visualize database table structures and relationships
- 🎯 Modern development experience with Vite + React + TypeScript
- React Flow - Node graph visualization library
- shadcn/ui - UI component library
- Tailwind CSS - Styling framework
- Vite - Build tool
- TypeScript - Type safety
npm installnpm run devThe project will start at http://localhost:5173.
Create a .env file with your Firebase project settings:
VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_FIREBASE_STORAGE_BUCKET=...
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...npm run buildnpm run previewreactflow-database-schema-demo/
├── src/
│ ├── components/
│ │ ├── DatabaseSchemaDemo.tsx # Database schema node component
│ │ ├── database-schema-node.tsx # Database Schema Node component
│ │ ├── labeled-handle.tsx # Labeled Handle component
│ │ └── base-node.tsx # Base node component
│ ├── lib/
│ │ └── utils.ts # Utility functions
│ ├── App.tsx # Main application component
│ ├── main.tsx # Application entry point
│ └── index.css # Global styles
├── package.json
├── tsconfig.json
├── vite.config.ts
└── tailwind.config.js
The current demo shows relationships between three database tables:
- Products - Products table
- Warehouses - Warehouses table
- Suppliers - Suppliers table
You can:
- Drag nodes to move them
- Create new connections through connection points
- View foreign key relationships between tables
You can modify node styles and behaviors in src/components/DatabaseSchemaDemo.tsx, or add more nodes and connections in src/App.tsx.
MIT