Skip to content

README.md

Latest commit

 

History

History
100 lines (73 loc) · 2.39 KB

README.md

File metadata and controls

100 lines (73 loc) · 2.39 KB

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.