Skip to content

Docs

SQL Crack documentation is organized into two main categories.

Documentation Categories

1. SQL Flow

Query visualization, feature usage, and example SQL walkthroughs.

2. Workspace Dependencies

Planned next. We will document cross-file lineage and dependency workflows separately.

SQL Flow Quickstart

  1. Open /playground.
  2. Select a SQL dialect (for custom SQL), paste SQL, and click Visualize.
  3. Inspect node stages and edge paths from sources to result.
  4. Use Layout, Focus, and Search controls to analyze dependencies.
  5. Use Copy SQL for query sharing and Export SVG/Mermaid for documentation.
  6. Iterate on SQL and compare complexity + graph shape after each change.

SQL Flow Features

Layout Presets

What it does: Switch between Vertical, Horizontal, Compact, Force, and Radial graph layouts.

How to use: Use the Layout dropdown in /playground after graph generation.

Tip: Use Horizontal for long pipelines and Radial for dependency exploration.

Focus + Search

What it does: Find nodes by name and isolate upstream/downstream dependencies. Matching nodes are highlighted with amber rings; non-matches dim to 20% opacity.

How to use: Use Search (or press /), then navigate with Enter/Shift+Enter. Toggle Focus mode (All Linked, Upstream, Downstream) to trace data flow.

Tip: Search for a target table first, then use Upstream to trace lineage inputs.

Dialect Parsing

What it does: Choose from 13 SQL dialects: PostgreSQL, MySQL, T-SQL, Snowflake, BigQuery, Redshift, Hive, Athena, Trino, MariaDB, SQLite, Oracle, and Teradata.

How to use: Select dialect from the SQL panel header in /playground, then click Visualize.

Tip: If parsing fails, verify dialect first before changing the query.

Export Graph

What it does: Export the current graph as PNG, SVG, Mermaid, or DOT (Graphviz) format.

How to use: Use the export buttons in the toolbar above the visualization.

Tip: Use PNG for sharing, SVG for slides, Mermaid for docs, and DOT for Graphviz or draw.io.

Optimization Hints

What it does: Automatic analysis of query patterns — detects SELECT *, missing indexes, Cartesian products, unused CTEs, and more.

How to use: Hints appear below the visualization after parsing. Click a hint to select the related node.

Tip: Focus on warnings first — they indicate potential performance issues.

Multi-Statement SQL

What it does: Paste multiple SQL statements separated by semicolons. Each statement gets its own tab.

How to use: Paste multi-statement SQL and click Visualize. Use the tabs above the diagram to switch between queries.

Tip: Tab labels are auto-generated from the first keyword and table name (e.g. "SELECT orders").

Fullscreen + Keyboard Shortcuts

What it does: Fullscreen mode for distraction-free viewing. Keyboard shortcuts for power users.

How to use: Press F for fullscreen, ? to see all shortcuts. Also: 1-5 for layouts, / for search, L for lineage.

Tip: Use Escape to exit fullscreen or clear selection and search.

Complexity Scoring

What it does: Complexity score (0–100) based on tables, joins, subqueries, CTEs, window functions, and conditions. Stats panel shows table usage histogram, join breakdown, and graph metrics.

How to use: Check the stat badges above the editor. Toggle the Stats panel for detailed breakdown.

Tip: Compare complexity scores before and after query refactors to measure improvement.

Accessibility

What it does: 3 colorblind-safe palettes (deuteranopia, protanopia, tritanopia) plus full keyboard navigation.

How to use: Use the Colors dropdown in the toolbar to switch palettes.

Tip: Palette preference is saved in your browser and persists across sessions.

SQL Flow Sample Queries

Paste these directly into /playground and review the graph structure.

Sample A: Customer Revenue Segments

Understand a CTE pipeline with joins, filters, aggregate, and CASE logic.

WITH order_totals AS (
  SELECT
    o.customer_id,
    SUM(o.amount) AS total_spent
  FROM orders o
  WHERE o.status = 'completed'
  GROUP BY o.customer_id
),
customer_summary AS (
  SELECT
    c.id AS customer_id,
    c.country,
    ot.total_spent,
    CASE
      WHEN ot.total_spent >= 5000 THEN 'enterprise'
      WHEN ot.total_spent >= 1000 THEN 'growth'
      ELSE 'starter'
    END AS segment
  FROM customers c
  JOIN order_totals ot ON c.id = ot.customer_id
)
SELECT country, segment, COUNT(*) AS customer_count, AVG(total_spent) AS avg_spent
FROM customer_summary
GROUP BY country, segment
ORDER BY avg_spent DESC;

What to verify in the graph

  • Confirm two CTE stages are visible before the final result stage.
  • Verify join path between customers and order_totals.
  • Inspect CASE classification as a transformation step.
  • Confirm final aggregate groups by country + segment.

Sample B: Weekly Product Trends

Review a query with date truncation, join, aggregate, and ranking window function.

WITH weekly_sales AS (
  SELECT
    DATE_TRUNC('week', o.created_at) AS sales_week,
    i.product_id,
    SUM(i.quantity * i.unit_price) AS revenue
  FROM orders o
  JOIN order_items i ON o.id = i.order_id
  WHERE o.created_at >= CURRENT_DATE - INTERVAL '90 days'
  GROUP BY DATE_TRUNC('week', o.created_at), i.product_id
),
ranked_products AS (
  SELECT
    ws.sales_week,
    p.category,
    p.name AS product_name,
    ws.revenue,
    DENSE_RANK() OVER (
      PARTITION BY ws.sales_week, p.category
      ORDER BY ws.revenue DESC
    ) AS revenue_rank
  FROM weekly_sales ws
  JOIN products p ON ws.product_id = p.id
)
SELECT sales_week, category, product_name, revenue
FROM ranked_products
WHERE revenue_rank <= 3
ORDER BY sales_week DESC, category, revenue DESC;

What to verify in the graph

  • Track the join from orders to order_items in the weekly_sales stage.
  • Confirm DATE_TRUNC and SUM are represented as transformations.
  • Verify ranking window appears before final filtering.
  • Ensure final WHERE keeps only top 3 per week/category.

Workspace Dependencies (Next)

Next pass will cover the second category: workspace graph modes, dependency tracing, and lineage navigation across SQL files.

Privacy

The web demo parses SQL entirely in your browser — nothing is sent to a server. The VS Code extension processes queries locally. SQL text is not uploaded or stored.

Coming Soon

  • Workspace Dependencies documentation section.
  • Video/gif walkthroughs.

Source Code

SQL Crack is open source under the MIT license.

View on GitHub