DDL Viewer - SQL Schema Visualizer

Transform your SQL DDL statements into beautiful, interactive diagrams instantly. DDL Viewer is a powerful Visual Studio Code extension that helps you visualize database schemas, understand table relationships, and trace data lineage through complex views and CTEs.

🎥 Demo Video

📺 Watch Demo Video

Click above to see DDL Viewer in action!

✨ Features

🎯 Instant Schema Visualization

Paste your SQL DDL and see an interactive diagram in seconds
Support for CREATE TABLE, CREATE VIEW, and CREATE MATERIALIZED VIEW
Automatic layout with smart positioning using Dagre algorithm

🔗 Relationship Mapping

Visualize foreign key relationships with animated arrows
Clear distinction between different relationship types
Interactive diagram with zoom, pan, and minimap controls

📊 Advanced View & CTE Support

Full CTE (Common Table Expression) visualization
See intermediate CTE nodes in your data pipeline
Color-coded data flow:
- 🔵 Blue lines: Base Table → CTE
- 🟣 Purple lines: CTE → CTE
- 🟢 Green lines: CTE → Final View
- 🟠 Orange lines: Calculated columns (formulas)

🎨 Column-Level Lineage

Trace individual columns from source to destination
Visual indicators for:
- Direct column mappings (solid green lines)
- Calculated/derived columns (dashed orange lines with ƒx symbol)
- Primary keys (🔑 icon)
- Foreign keys (🔗 icon)

🏷️ Smart Node Styling

Base Tables: Standard white background
Views: Blue border with light blue background
CTEs: Purple dashed border with lavender background
Stub Tables: Gray dashed border (auto-generated for undefined references)

🚀 Developer-Friendly

Syntax highlighting for SQL editor
Real-time diagram updates
Export-ready visualizations
Works offline - no external dependencies

📸 Screenshots

Extension Overview

DDL Viewer Overview

The complete DDL Viewer interface with SQL editor and interactive diagram

Complex CTE Pipeline Visualization

CTE Pipeline

Visualize complex data flows through multiple CTEs with color-coded lineage

🚀 Getting Started

Installation

Open Visual Studio Code
Press Ctrl+P (Windows/Linux) or Cmd+P (Mac)
Type ext install ddl-viewer
Press Enter

Usage

Open DDL Viewer
- Click the DDL Viewer icon in the Activity Bar (left sidebar)
- Or press Ctrl+Shift+P and type "DDL Viewer"
Paste Your SQL
- Enter your DDL statements in the SQL editor
- Supports multiple tables, views, and CTEs
Generate Diagram
- Click "Generate Diagram" button
- Or the diagram auto-updates as you type
Interact with the Diagram
- Zoom in/out with mouse wheel
- Pan by dragging
- Use minimap for navigation
- Click nodes to inspect details

📝 Example SQL

-- Base Tables
CREATE TABLE customers (
    customer_id INT PRIMARY KEY,
    name VARCHAR(100),
    email VARCHAR(100)
);

CREATE TABLE orders (
    order_id INT PRIMARY KEY,
    customer_id INT,
    order_date DATE,
    status VARCHAR(50),
    FOREIGN KEY (customer_id) REFERENCES customers(customer_id)
);

CREATE TABLE order_items (
    item_id INT PRIMARY KEY,
    order_id INT,
    product_id INT,
    quantity INT,
    unit_price DECIMAL(10,2),
    FOREIGN KEY (order_id) REFERENCES orders(order_id)
);

-- View with CTEs
CREATE VIEW vw_customer_sales AS
WITH order_base AS (
    SELECT
        o.order_id,
        o.customer_id,
        o.order_date,
        oi.quantity,
        oi.unit_price,
        (oi.quantity * oi.unit_price) AS line_amount
    FROM orders o
    JOIN order_items oi ON o.order_id = oi.order_id
),
customer_totals AS (
    SELECT
        c.customer_id,
        c.name,
        c.email,
        COUNT(DISTINCT ob.order_id) AS total_orders,
        SUM(ob.line_amount) AS total_revenue
    FROM customers c
    JOIN order_base ob ON c.customer_id = ob.customer_id
    GROUP BY c.customer_id, c.name, c.email
)
SELECT
    customer_id,
    name,
    email,
    total_orders,
    total_revenue,
    ROUND(total_revenue / total_orders, 2) AS avg_order_value
FROM customer_totals
WHERE total_orders > 0;

🎨 Visual Legend

Element	Meaning
🔑	Primary Key
🔗	Foreign Key
🟦 Blue Border	View/Materialized View
🟪 Purple Dashed	Common Table Expression (CTE)
⚪ Gray Dashed	Stub Table (undefined reference)
━━ Solid Line	Direct column mapping
┈┈ Dashed Line	Calculated/formula column
ƒx	Formula indicator

🛠️ Supported SQL Dialects

DDL Viewer supports standard SQL DDL syntax and has been tested with:

PostgreSQL
MySQL
SQL Server
Oracle
SQLite

⚙️ Configuration

Currently, DDL Viewer works out-of-the-box with no configuration needed. Future versions will include customization options for:

Color schemes
Layout algorithms
Auto-generation settings
Export formats

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🌟 Show Your Support

If you find DDL Viewer helpful, please consider:

⭐ Starring the repository
📢 Sharing with your team
💬 Leaving a review on the VS Code Marketplace

Made with ❤️ by [Mahesh]

Visualize your data, understand your schema, build better databases.