SQL Schema Visualizer

A prototype of relational database schema visualization using ReactFlow.

How it works?

Every table is a ReactFlow’ Custom Node with custom Markers (those SVG icons with dot and fork). Here’s a ReactFlow sandbox example of Custom Nodes.

How to update table positions?

1. Drag them around to find a perfect arrangement.
2. CMD + P (it copy pastes positions JSON to your clipboard).
3. Paste the JSON to the Flow/TablePositions.ts file.

Installation

npm install

Start Dev Server

npm start

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

Run Tests

npm test

Build

npm run build

TODO

• Write README with screenshots and GIFs.
• Add contribution guide.
• Refactor.
• Fix bug: random hover description showing up without CMD key
• Get rid of targetPosition param and set it on the fly based on relative node positions. https://reactflow.dev/docs/examples/nodes/update-node/
• Add info popup content.
• Final colors for highlighted edges.
• Final style for table and column descriptions.
• Final colors for selected edges.
• Add info popup overlay.
• Style description tooltip.
• Write table descriptions.
• Fix mismatched column descriptions.
• Pull in all tables and their columns from Bindle dataset.
• Final font styles.
• Add Github Action to deploy to Github pages https://create-react-app.dev/docs/deployment/#github-pages
• Colors for coding different schemas.
• CMD + Hover to show table and column descriptions.
• Disable node hover if CMD key is pressed (edge selection).
• Click on table name shows table description.
• Simple edge definition that’s translated later into ReactFlow syntax.
• CMD + P prints positions JSON to copy paste (sort tables alphabetically).
• Favicon.
• package.json info.
• Shoutout to ReactFlow demo app.
• Fix full screen icon when full screen is entered via a shortcut.