SQL Visualize eliminates the complexity of manual T-SQL query construction. By combining a high-performance interactive canvas with an intelligent relational engine, it allows developers to build production-ready queries with zero syntax errors.
Skip the flat lists. Our explorer groups objects by Schema, supports Auto-Expand during search, and allows you to Peek at Columns and types directly in the sidebar. Used a "Ghost Eye" icon for instant TOP 25 data previews.
Building relationships is now effortless. As you drag tables like Orders onto the canvas, SQL Visualize scans for Foreign Keys and overlays "Ghost Joins" (dashed lines). Accept them with one click to instantly integrate them into your query.
Configure complex relationships using our Venn Diagram pop-over. Visualize INNER, LEFT, RIGHT, and FULL joins with real-time hover feedback, ensuring you always get the right set of data.
Got a complex canvas with multiple disconnected queries? Our Island Sensing technology automatically identifies separate table clusters and generates them as distinct, valid T-SQL batches.
Our engine handles the "heavy lifting"—automatically injecting GROUP BY clauses, resolving column name collisions across tables, and managing circular join paths (A-B-C-A).
- Core: VS Code Extension API (TypeScript)
- Frontend: React + React Flow + SVG Components
- Styling: VS Code Webview UI Toolkit (Seamless Integration)
- Testing: 56-Case Automated Regression Suite (Mocha/Chai)
- Search for SQL Visualize in the VS Code Extension Marketplace.
- Open the Command Palette (Ctrl+Shift+P).
- Type
SQL Visualize: Open Canvas. - Follow the SQL Server Setup Guide to enable TCP/IP and SQL Authentication.
- Provide your connection string and click Connect Engine.
- Drag tables from the hierarchical explorer to the canvas and start designing!
Tip
Use the Target Node feature (Right-click a node) to isolate and run only the sub-query connected to that specific table.
If you want to contribute to the engine or build your own node types:
# Clone and install
git clone https://github.com/your-username/sql-visualize.git
npm install
# Build all components
npm run compile
# Test the core logic
npm run test:unitMIT License. Created by Naveen.