Raw capture — raw/sql-crack.md

url: https://github.com/buva7687/sql-crack date_fetched: 2026-07-05 backfilled: true

Transform SQL queries into interactive visual flow diagrams

Features • Dialects • Installation • Usage • Configuration • Contributing

SQL Crack is a VS Code extension that visualizes SQL queries as interactive execution flow diagrams. Understand complex queries at a glance, track data lineage across your entire workspace, and identify optimization opportunities with professional-grade visual analysis.

Inspired by JSON Crack and Snowflake Query Profile

Large graph behavior: For SQL Flow graphs with100+nodes, SQL Crack automatically enables clustering to keep rendering responsive. Search and keyboard navigation follow the currently rendered graph, so collapsed clusters behave differently from a fully expanded graph.

Node Types: Table (Blue) • Filter (Purple) • Join (Pink) • Aggregate (Amber) • Window (Fuchsia) • Sort (Green) • Limit (Cyan) • Select (Indigo) • Union/Set Op (Slate) • CTE (Purple) • Subquery (Violet) • Case (Orange) • Result (Green)

Operation Badges: READ (Blue) • WRITE (Red) • DERIVED (Teal) • CTE (Purple) • SQ (Violet) • INSERT (Green) • UPDATE (Amber) • DELETE (Dark Red) • MERGE (Violet) • CTAS (Cyan)

Analyze cross-file dependencies across your entire SQL project with three main views:

Dependency graph showing file and table relationships with color-coded edges for SELECT, JOIN, INSERT, UPDATE, and DELETE operations. Includes a selection panel with upstream/downstream context, focus mode, and an index freshness badge, plus guided empty-state prompts when the graph is empty or search yields no matches.

Explore data lineage across tables, views, and CTEs with:

• Interactive Graph— Animated flow edges showing data direction
• Legend Panel— Collapsible reference for node types and column colors
• Mini-Map— Overview panel for navigating large graphs
• Column Type Colors— Primary (Gold), Numeric (Blue), Text (Green), DateTime (Purple), JSON (Teal)
• Focus Modes— View upstream only (- U), downstream only (- D), or all connections (- A)
• Trace Controls— Trace Up/Down buttons to highlight full upstream/downstream lineage
• Table Browser— Search and browse all tables, views, and CTEs with schema details and cross-references

Analyze change impact (MODIFY/RENAME/DROP) with severity indicators, grouped transitive impacts, and source → target column paths.

Common Features (all views):

• Click nodes to open files, double-click to visualize SQL
• Pan/zoom navigation with search (regex and case-sensitivity options)
• Statistics panel showing files, tables, views, and references
• Orphaned/missing definition badges with click-to-navigate
• Incremental parsing with SHA-256 hashing and auto-update on save

Performance Icons: Filter Pushdown (⬆) • Non-Sargable (🚫) • Join Order (⇄) • Index Suggestion (📇) • Repeated Scan (🔄) • Complex (🧮)

Note: This is heuristic-based static analysis. For production optimization, validate with actual query plans (EXPLAIN ANALYZE).

• Click to Navigate— Click nodes to jump to SQL source, click edges to view JOIN/WHERE clauses
• Breadcrumb Trail— Navigate through nested CTEs with clickable breadcrumbs
• Search— Find nodes by name with- Cmd/Ctrl + F
• Editor Sync— Bidirectional highlighting between editor and flow diagram

• Hover Tooltips— Detailed information on hover for nodes and edges

• Layout Picker— Toolbar picker with SVG icons for vertical, horizontal, compact, force, and radial layouts

• Layout Shortcuts— Cycle layouts with- Hor jump directly with keys- 1-- 5
• Auto-Refresh— Updates automatically as you edit (configurable debounce)
• Export Options— PNG, SVG, Mermaid.js, or clipboard copy
• View Modes— Display beside editor or in a new tab
• Pin Visualizations— Save snapshots as persistent tabs
• Fullscreen— Press- Ffor distraction-free viewing

MySQL • PostgreSQL • SQL Server • MariaDB • SQLite • Snowflake • BigQuery • Redshift • Hive • Athena • Trino • Oracle • Teradata

• Open VS Code
• Go to Extensions (Cmd+Shift+X/Ctrl+Shift+X)
• Search for "SQL Crack"
• Click Install

Or install directly: SQL Crack on Marketplace

• Open Cursor
• Go to Extensions (Cmd+Shift+X/Ctrl+Shift+X)
• Search for "buvan.sql-crack"(use the publisher-qualified name for reliable results)
• Click Install

Or install from Open VSX Registry.

git clone https://github.com/buva7687/sql-crack.git
cd sql-crack
npm install
npm run package

Install the generated .vsix file via Extensions → ••• → Install from VSIX.

• Open any .sqlfile
• Visualize using one of:
• Click the graph iconin the editor title bar
• Press Cmd+Shift+L(Mac) /Ctrl+Shift+L(Windows/Linux)

• Right-click → "SQL Crack: Visualize SQL Query"

• Click the

Cursor note: Some Cursor builds do not render custom editor-title icons consistently. If the title icon is not visible, run

SQL Crack: Visualize SQL Queryfrom the Command Palette (Cmd/Ctrl+Shift+P) or use the context menu.

Analyze cross-file dependencies:

• Right-click folder → "SQL Crack: Analyze Workspace Dependencies"
• Command Palette → "SQL Crack: Analyze Workspace Dependencies"

Tip:Re-open the panel anytime by running the same command from the Command Palette.

All toolbar buttons have ARIA labels for screen readers. Graph nodes are keyboard-navigable:

UI transitions and entrance animations also respect prefers-reduced-motion.

Files with these extensions will show the SQL Crack icon in the editor title bar and can be visualized like .sql files. They are also included in workspace analysis (find files, index), trigger incremental index updates on save/create/delete, and watcher patterns are refreshed when the extension setting changes. Workspace indexing intentionally skips dependency/build folders (node_modules, .git, dist, build).

To see detailed logs:

• Enable sqlCrack.advanced.debugLoggingin VS Code settings
• Open View → Outputand selectSQL Crackfrom the dropdown
• Extension logs appear in the Output Channel as you interact

For lower-level diagnostics you can also open Help → Toggle Developer Tools → Console and filter by "SQL Crack".

If the extension behaves unexpectedly:

• Run "Developer: Reload Window"from Command Palette
• If issues persist, disable/re-enable the extension

• For workspace index issues, re-run "SQL Crack: Analyze Workspace Dependencies"to rebuild the index, or setCache TTLto0(Advanced) and reload the window

• 100% Local— All processing happens in VS Code

• No Network Calls— Your SQL never leaves your machine
• No Telemetry— Zero data collection
• Open Source— Fully auditable code

npm install          # Install dependencies
npm run compile      # Build extension
npm run watch        # Watch mode
npm run typecheck    # Type check
npm run lint         # Lint code

Press F5 to launch the Extension Development Host.

src/
├── extension.ts                 # Extension entrypoint, commands, lifecycle
├── visualizationPanel.ts        # SQL Flow webview panel orchestration
├── dialects/                    # Dialect registry/config
├── shared/                      # Cross-layer tokens/utils/messages
│   └── messages/                # Typed host/webview message contracts
├── webview/                     # Browser-side SQL Flow runtime
│   ├── index.ts                 # Webview bootstrap + wiring
│   ├── sqlParser.ts             # Parse orchestrator
│   ├── renderer.ts              # Render orchestrator
│   ├── parser/                  # Extracted parser modules (validation, dialects, hints, statements, extractors)
│   ├── rendering/               # Node/edge/cloud/viewport rendering modules
│   ├── features/                # Export, lineage, theme, minimap, focus, search, metadata
│   ├── interaction/             # Event listeners, drag/zoom/keyboard, pulse/selection
│   ├── navigation/              # Node/table/keyboard navigation helpers
│   ├── panels/                  # Info/stats/sql panel renderers
│   ├── state/                   # Renderer state factories
│   ├── constants/               # Color/theme constants
│   ├── types/                   # Webview runtime types
│   ├── ui/                      # Toolbar/context menu/tooltip/layout/command UI
│   │   └── toolbar/             # Extracted toolbar component modules
│   └── parser.worker.ts         # Off-main-thread SQL parse worker
└── workspace/                   # Extension-host workspace analysis runtime
    ├── workspacePanel.ts        # Workspace panel orchestrator
    ├── scanner.ts               # SQL file discovery/scanning
    ├── indexManager.ts          # Incremental index/cache/watcher
    ├── handlers/                # Message routing + command handlers
    ├── panel/                   # Workspace panel/page/export/stats modules
    ├── lineage/                 # Cross-file lineage graph + analyzers
    ├── extraction/              # Definition/reference extraction pipeline
    ├── graph/                   # Workspace graph build/filter/layout modules
    └── ui/                      # Workspace webview scripts/styles/views

Data Flow:

• User opens .sqlfile →extension.tscreatesVisualizationPanel
• SQL text → sqlParser.ts(node-sql-parser) → AST →FlowNode[]+FlowEdge[]
• Nodes/edges → renderer.ts→ SVG with dagre layout

• User interactions → message passing between webview and extension host

• ✅ Phase 1— Core visualization (execution flow, CTE expansion, fullscreen)

• ✅ Phase 2— Developer productivity (quality warnings, column lineage, cloud panels)
• ✅ Phase 3— Performance analysis (filter pushdown, join order, anti-pattern detection)
• ✅ Phase 4— Workspace analysis (cross-file lineage, dependency graph, 3 view modes)
• ✅ Phase 5— Polish & accessibility (keyboard navigation, ARIA labels, cancellable indexing)
• ✅ Phase 6— Large-file modular refactor (parser/renderer/workspace UI split into focused modules)
• ✅ Phase 7— Export preview with PDF support

0.9.0: Security & reliability hardening — production dependency upgrades (npm audit --omit=dev reports 0 advisories), cryptographically strong CSP nonces and collision-free pin/tab IDs, stricter HTML-attribute / DOT / Mermaid export escaping, source-scoped auto-refresh and cursor-follow, a workspace index cache keyed by scope/dialect/config, and a non-blocking parser-worker timeout.

0.7.0 shipped on 2026-03-23: Web Worker parsing (off-main-thread for large files) and architecture debt remediation (pure computation extraction, fake DOM testing, integration test coverage) are now part of the released baseline.

Contributions are welcome!

• Forkthe repository
• Createa feature branch (- git checkout -b feature/amazing-feature)
• Commityour changes (- git commit -m 'Add amazing feature')
• Pushto the branch (- git push origin feature/amazing-feature)
• Opena Pull Request

Found a bug or have a feature request? Open an issue with:

• Clear description of the problem/feature
• Steps to reproduce (for bugs)
• SQL query example (if applicable)
• VS Code and extension version

MIT License — see LICENSE for details.

• JSON Crack — Visual inspiration
• node-sql-parser — SQL parsing
• dagre — Graph layout
• jsPDF — PDF export generation

Made with SQL for the SQL community