An interactive web tool that converts SQL queries into relational pattern diagrams, making query structure immediately visible. Built for CS 3969 — Human-Centered Computing, University of Utah, Spring 2026.
- Visualize — paste any SQL query and get an interactive node-and-edge diagram showing tables, joins, filters, GROUP BY, aggregations, and subqueries
- Explain — generates a plain-English description of what the query does
- Diff Mode — compare two SQL queries side by side and see their structural differences highlighted in green and red
Record your demo and paste the link here
The tool is demonstrated using a university course enrollment schema:
| Table | Columns |
|---|---|
| Students | student_id, name, gpa, major |
| Courses | course_id, course_name, credits, department |
| Enrollments | student_id, course_id, instructor_id, grade |
| Instructors | instructor_id, name, department |
Requirements:
- Python 3.11+
- pip
Steps:
- Clone the repository
git clone https://github.com/YOUR_USERNAME/sql-pattern-visualizer.git
cd sql-pattern-visualizer- Create and activate a virtual environment
python -m venv .venv
# Windows
.venv\Scripts\activate
# Mac/Linux
source .venv/bin/activate- Install dependencies
pip install -r requirements.txt- Run the app
streamlit run app.py- Open your browser at
http://localhost:8501
sql-pattern-visualizer/
├── app.py # Streamlit web interface
├── sql_parser.py # SQL parsing logic using sqlglot
├── diagram_builder.py # Graph construction and pyvis rendering
├── requirements.txt # Python dependencies
└── README.md
| Package | Purpose |
|---|---|
| streamlit | Web interface |
| sqlglot | SQL parsing and AST extraction |
| networkx | Graph construction |
| pyvis | Interactive HTML diagram rendering |
Simple filter
SELECT s.name, s.gpa
FROM Students s
WHERE s.gpa > 3.5Multi-table join
SELECT s.name, c.course_name
FROM Students s, Enrollments e, Courses c
WHERE s.student_id = e.student_id
AND e.course_id = c.course_idGrouped aggregate
SELECT c.course_name, AVG(e.grade) AS avg_grade
FROM Courses c, Enrollments e
WHERE c.course_id = e.course_id
GROUP BY c.course_name
HAVING AVG(e.grade) > 3.0- Sabale & Gatterbauer. PatternVis: A Tool for Relational Pattern Visualization. SIGMOD 2025.
- Gatterbauer & Dunne. On the Reasonable Effectiveness of Relational Diagrams. PACMMOD 2024.
- Leventidis et al. QueryVis: Logic-based Diagrams help Users Understand Complicated SQL Queries Faster. SIGMOD 2020.
- Miedema & Fletcher. SQLVis: Visual Query Representations for Supporting SQL Learners. VL/HCC 2021.
Ali Abdelmaabood — University of Utah — u1437769@utah.edu