sqlhabit/sql_schema_visualizer

💨 Easy to start: you can import your schema in 1.5 minutes. 🏁 Easy to finish: you only need to configure edges and table positions. 🔧 Customizable: add table/column descriptions and schema colors. 🚀 Make it yours: you get the whole React app, so you can change everything.

Pick a query that works for your database. Save the output of this query to the schema.csv file in the root folder (next to the schema.csv.template file).

To show a 🔑 icon next to the column name, add the key param to a column definition. Here's an example from the users table:

You can set custom header colors for tables that belongs to the same schema in the src/config/schemaColors.json file. Here's an example:

Once you're finished with config file, build the project and upload the files from the /build folder to your hosting of choice:

Those edges start and end in ReactFlow Handle's. Every table column row has 2 handles – left and right. 💡 A handle could be either source (for an outgoing edge) or a target (for an incoming edge). Handles are configured based on the edges config.

Leave a Comment