VizRelate – Interactive Database Schema Visualizer

VizRelate is a web application designed to graphically represent the relationships between objects in relational databases (such as tables, views, and stored procedures). Its primary goal is to simplify the analysis, documentation, and understanding of complex database schemas by providing an interactive, dynamic graph visualization.

---

Key Features

• Support for MSSQL and MySQL
  Dedicated connectors for establishing connections and retrieving metadata (tables, columns, views, procedures, foreign keys).

• Interactive Visualization
  Displays database objects as nodes and their relationships as edges using the Cytoscape.js library.

• Filtering and BFS Search
  Users can select "root" nodes and set the breadth-first search (BFS) depth to dynamically generate a subgraph of related elements. Schema-based filtering is also available.

• Information Panel
  Detailed information (e.g., column lists, object definitions) is displayed when a node is clicked.

• Connection Testing
  Built-in methods and test scripts (found in the tests directory) validate database connectivity and metadata retrieval.

---

Requirements and Installation

1. Python 3.9+
   Ensure you have Python version 3.9 or higher for compatibility with required libraries.

2. Clone the Repository

   git clone https://github.com/user/VizRelate.git
   cd VizRelate

3. Install Dependencies

   pip install -r requirements.txt

4. Drivers

• MSSQL: Install an appropriate ODBC driver (e.g. "ODBC Driver 17 for SQL Server").
• MySQL: pymysql is installed via the requirements file.

Running the Application

After installing the dependencies, start the application with:

  streamlit run app.py

The app will launch in your web browser at http://localhost:8501.

Usage

1. Database Connection

• Choose the database type (MSSQL/MySQL) from the sidebar.
• Enter the connection parameters (host, database name, username, password, driver).
• Click "Connect to DB" to test the connection.

2. Graph Exploration

• Select root nodes for BFS filtering and set the desired BFS depth.
• Choose which object types to expand (tables, views, procedures).
• The central panel displays the graph where nodes represent database objects and edges represent their relationships.

3. Information Panel

• Click on a node to view detailed information, such as column details and object definitions.

4. Navigation Tools

• Use the provided controls for zooming, resetting the view, saving the graph as an image, and toggling full-screen mode.

Project Structure (Summary)

.
├── .streamlit
│   └── config.toml             # Streamlit configuration
├── database
│   ├── connectors
│   │   ├── base.py             # Abstract BaseConnector class
│   │   ├── mssql_connector.py  # MSSQL connection and metadata retrieval
│   │   └── mysql_connector.py  # MySQL connection and metadata retrieval
│   ├── graph_utils.py          # Functions to prepare graph data for visualization
│   └── config.py (optional)    # Database configuration settings
├── docs
│   ├── mssql_northwind.sql
│   └── mysql_dummy.sql         # SQL files for testing/demo purposes
├── icons
│   ├── table.svg
│   ├── view.svg
│   └── procedure.svg
├── static
│   ├── app.js                  # JavaScript for Cytoscape.js (graph layout and interactions)
│   └── styles.css              # Custom CSS styles
├── tests
│   ├── test_mssql_connection.py  # MSSQL connectivity and metadata tests
│   └── test_mysql_connection.py  # MySQL connectivity and metadata tests
├── app.py                    # Main Streamlit application file
├── requirements.txt          # Python dependencies
└── README.md

(Photo 1) Main Screen

(Photo 2) BFS depth = 1 and „Expand into Tables”

(Photo 3) BFS depth = 2 and „Expand into Views”

(Photo 4) Full graph with Info Panel for „Categories”