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

• 🔍 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

• 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

npm install

npm run dev

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

npm run build

npm run preview

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

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

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;

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

MIT

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