Investigations

Database Explorer

TypeScript August 2025

A database schema visualisation tool with React Flow graphs, D3 force layouts, and multiple exploration modes for MySQL.

Database Explorer provides multiple ways to inspect and understand database schemas. Connect it to a MySQL database and you get interactive graph visualisation of tables and relationships.

The main view uses React Flow (xyflow) for draggable, zoomable schema graphs. D3-force and d3-drag provide physics-based layout so tables naturally space themselves based on their relationships. There are 6 visualisation modes: SchemaGraph, TableFlowDiagram, HierarchicalExplorer, RelationshipExplorer, SimpleSchemaView, and TableInspector.

Data grids use TanStack React Table for inspecting actual table data. Recharts adds visual charting for data analysis. The state management is Zustand, and data fetching uses TanStack React Query.

Built with React 19 and Vite 7 (latest versions), Radix UI primitives, and MySQL2 for database connectivity. The breadth of visualisation approaches makes this useful for understanding unfamiliar databases quickly.

What this project demonstrates

6 visualisation modes: graphs, flow diagrams, hierarchical, relational
React Flow for interactive, draggable schema graphs
D3-force physics-based layout for natural spacing
TanStack React Table for data inspection
Recharts for data analysis visualisation
React 19 + Vite 7 with MySQL2 connectivity

Technologies

ReactReact FlowD3MySQLDatabaseVisualisation

© 2026 Jonathan Leahy · v1.0.9