SQL to ER Diagram: Browser-Based SQL Schema Visualization

Overview

SQL to ER Diagram is a free, open-source utility that transforms SQL schema definitions into interactive entity-relationship diagrams (ERDs). The tool is designed for developers who need to visualize database structures without the friction of paywalls, mandatory account creation, or the security risks associated with uploading sensitive schema data to external servers.

Key Features and Capabilities

Client-Side Processing and Privacy

All processing occurs locally within the user's web browser. The tool does not utilize a backend for schema processing, meaning SQL schemas are never uploaded to or stored on any server, ensuring complete data privacy.

Multi-Dialect Support

The tool parses standard CREATE TABLE and ALTER TABLE Data Definition Language (DDL) statements. It supports the following SQL dialects:

  • PostgreSQL
  • MySQL
  • SQLite
  • SQL Server

It specifically identifies and renders primary keys, foreign keys, unique constraints, and not-null constraints.

Interactive Visualization and Export

Users can paste their SQL statements into the editor to instantly generate a diagram. The interface allows for:

  • Manual Arrangement: Dragging tables to organize the layout.
  • Auto-Layout: Automatic arrangement of tables for better visibility.
  • Editing: Direct editing of table and column names on the canvas, which automatically updates the underlying SQL.
  • Annotations: Adding notes and grouping boxes to the diagram.
  • Export Options: Saving the final result as a high-resolution PNG or a vector SVG.

State Management via URL

To avoid the need for a database or user accounts, the tool serializes the entire schema into the URL. This allows users to share their diagrams by simply copying and pasting the link, as the state is encoded directly in the URL itself.

Technical Implementation

Rendering Engine

Unlike many diagramming tools that rely on the DOM or SVG, SQL to ER Diagram is built on the HTML5 <canvas> element. To maintain performance with hundreds of tables, the developer implemented rasterization of tables into cached bitmaps combined with viewport culling.

Surgical SQL Parsing

The SQL parser tracks source spans for every token. This architecture allows the tool to perform "surgical" edits; for example, renaming a table only changes the relevant identifier and its references while preserving the user's original comments and formatting.

Performance Benchmarks

During development, the author experimented with a Rust/WASM implementation. The results showed that while the $O(n^2)$ overlap-resolution pass was 2.2x faster in Rust, the overall parser was approximately 37% slower due to the overhead of the JavaScript-to-WASM boundary. Consequently, the final tool was built using plain JavaScript without a framework, resulting in a gzipped size of approximately 32KB.

Community Insights and Considerations

Conceptual Distinction: Entities vs. Tables

Some users noted a theoretical difference between an Entity-Relationship diagram and a table-based schema diagram.

"The tool looks very cool! But IMO you can't get an ER diagram from SQL since entities are fundamentally different from tables... SQL alone doesn't give you enough information to create an ER diagram."

However, other community members argued that for the majority of developers, the distinction is academic and the tool's utility in visualizing connections is the primary value.

Feature Requests and Alternatives

Users suggested several enhancements, including the addition of straight lines and 90-degree angles for connections to replace the current curved lines. There were also requests for the ability to filter out specific foreign keys (e.g., hiding common tenant IDs in multi-tenant apps) to reduce visual clutter.

Alternative tools mentioned by the community include:

  • Mermaid: Supports ER diagrams via a markdown-like syntax.
  • Azimutt: A specialized tool for database exploration.
  • dbdiagram.io: A common industry alternative for schema design.

Sources