SQL Queries Visualizer

A powerful web-based tool for visualizing SQL query execution flow and data lineage, similar to SQLFlow by Gudusoft.

Features

• 🔍 SQL Parser: Supports multiple SQL dialects (MySQL, PostgreSQL, SQL Server, Oracle, SQLite, MariaDB)
• 📊 Interactive Visualization: Real-time flow diagrams showing data movement
• 🎯 Data Lineage: Track column-level dependencies and table relationships
• ✏️ Monaco Editor: VS Code-like SQL editor with syntax highlighting
• 🎨 Modern UI: Built with React, TypeScript, and Tailwind CSS
• 📥 Export: Save diagrams as PNG images

Tech Stack

• Frontend: React 18 + TypeScript
• Build Tool: Vite
• Visualization: React Flow
• SQL Parser: node-sql-parser
• Editor: Monaco Editor (VS Code's editor)
• Styling: Tailwind CSS

Getting Started

Installation

npm install

Development

npm run dev

The application will open at http://localhost:3000

Build

npm run build

Preview Production Build

npm run preview

How It Works

1. SQL Input: Enter your SQL query in the Monaco editor
2. Parse: The query is parsed into an Abstract Syntax Tree (AST) using node-sql-parser
3. Analyze: Extract tables, columns, joins, and operations from the AST
4. Visualize: Generate an interactive flow diagram showing data movement
5. Explore: Interact with the diagram, zoom, pan, and export

Supported SQL Operations

• SELECT queries (with JOINs, subqueries, CTEs)
• INSERT statements
• UPDATE statements
• DELETE statements
• Multiple table operations
• Column-level lineage tracking

Example Query

SELECT 
  u.user_id,
  u.username,
  COUNT(o.order_id) as total_orders
FROM users u
LEFT JOIN orders o ON u.user_id = o.user_id
GROUP BY u.user_id, u.username;

Architecture

src/
├── components/
│   ├── SQLEditor.tsx       # Monaco-based SQL editor
│   └── FlowVisualizer.tsx  # React Flow diagram renderer
├── utils/
│   ├── sqlAnalyzer.ts      # SQL parsing and analysis logic
│   └── flowGraphGenerator.ts # Graph generation for visualization
├── App.tsx                 # Main application component
└── main.tsx               # Application entry point

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.