Are you tasked with bringing clarity to the intricate web of your relational database? Look no further than the SQL Schema Visualizer, a powerful tool built with React and ReactFlow. In this user-friendly guide, we’ll walk through the steps to visualize your database schema with ease and customization.

Overview of Features

• ✨ Easy to Start: Import your schema in just 1.5 minutes!
• ✅ Easy to Finish: Simply configure edges and table positions.
• 🛠️ Customizable: Enhance your schema with table/column descriptions and colors.
• 🚀 Full Control: Get the entire React app for complete changes.

Step-by-Step Guide to Visualize Your Schema

Step 1: Clone and Set Up the Repository

First, let’s clone the SQL Schema Visualizer repository and set it up on your local machine. Open your terminal and run:

git clone https://github.com/sqlhabits/sql_schema_visualizer.git
cd sql_schema_visualizer
npm install

💡 Note: You may need to install nvm to avoid using an outdated Node version.

Step 2: Reset the Schema Configuration

The initial setup includes the preloaded SQL Habit dataset schemas. Let’s clear these out before importing new schemas by running:

npm run reset

Step 3: Export Your Schema into a CSV File

Your schema config requires various components including tables, edges, and positions, extracted using an SQL query. Save the output to a CSV file (e.g., my_schema.csv) next to the schema.csv.template file.

Here’s an example query for the Postgres database:

SELECT t.table_schema, t.table_name, c.column_name, c.data_type, c.ordinal_position
FROM information_schema.tables t
LEFT JOIN information_schema.columns c ON t.table_schema = c.table_schema AND t.table_name = c.table_name
WHERE t.table_schema NOT IN (information_schema, pg_catalog)
AND t.table_name NOT IN (schema_migrations, ar_internal_metadata)
ORDER BY 1, 2, 5;

Step 4: Import Your Schema

Let’s import the tables. Input the filename as the argument:

npm run import my_schema

Check your src/config/databases/my_schema/tables folder for newly added JSON files. Start the development server and see it live:

npm run start

Step 5: Configure Your Schema

Your schema can be customized to fit your needs:

• A. Primary Keys: Add a key parameter in your column definition.
• B. Define Edges: Set up relationships between tables in the edges.json file.
• C. Customize Colors: Personalize your table colors in schemaColors.json.
• D. Table Positions: Position tables using tablePositions.json. Drag tables, press CTRL + P, and paste the JSON into your config file!
• E. Table and Column Descriptions: Add descriptions by using custom keys in your table config files.

Publishing Your Schema Online

Once you’re satisfied with the configuration, build your project and host it:

npm build

To deploy, I recommend Surge.sh for quick hosting—just 2 minutes!

npm install --global surge
cd build
surge

Troubleshooting

If you encounter issues throughout the steps, consider these troubleshooting ideas:

• Check Node.js versions—make sure you’re using a compatible version.
• Ensure your CSV file is formatted correctly without missing commas or quotes.
• If the app is not displaying properly, clear your browser cache and restart the development server.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

If you’ve followed these steps, your database schema should now be beautifully visualized, providing clarity in a complex structure!

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Ready to Contribute?

Your feedback is welcomed; check out contribution guidelines for further involvement!