SQL to ER Diagram: 免费的基于浏览器的 SQL Schema 可视化工具

SQL to ER Diagram 是一个免费、开源的工具，可直接在 Web 浏览器中将 SQL schema 定义转换为交互式实体关系图 (ERD)。通过在本地处理 CREATE TABLE 语句，该工具允许开发者在不将敏感的 schema 数据上传到外部服务器的情况下，可视化查看表、列、主键和外键。

本地优先架构与隐私保护

SQL to ER Diagram 完全在客户端运行，确保数据库 schema 永远不会被上传到服务器或存储在服务器上。这种架构消除了对账户、注册或付费墙的需求，为传统的数据库可视化工具提供了一个以隐私为中心的替代方案。

核心功能

多方言支持：该工具解析 PostgreSQL、MySQL、SQLite 和 SQL Server 的标准 CREATE TABLE 和 ALTER TABLE DDL。
交互式可视化：用户可以拖动表格来安排布局，使用自动排列功能，并添加注释或分组框。
导出选项：图表可以导出为高分辨率的 PNG 或矢量 SVG 文件。
状态持久化：整个项目可以保存为文件，或通过将整个 schema 直接编码到链接中的 URL 进行共享，从而无需后端数据库。

技术实现细节

开发者 robhati 使用原生 JavaScript（不使用框架）构建了该工具，其 gzipped 大小约为 32KB。实现重点在于高性能和 schema 编辑的精准度。

渲染引擎

为了在渲染数百张表时保持流畅，该工具使用了 HTML5 <canvas> 元素，而不是 DOM 或 SVG。表格被光栅化为带有视口剔除功能的缓存位图，这为大型 schema 优化了性能。

精准的 SQL 解析

SQL 解析器会跟踪每个 token 的源范围。这使得工具能够进行“手术式”的编辑；例如，当用户直接在画布上重命名一个表时，工具仅更新 SQL 代码中相关的标识符及其引用，同时保留原始注释和格式。

JavaScript vs. WASM 实验

在开发过程中，创作者尝试了 Rust/WASM 版本。虽然 $O(n^2)$ 重叠解析过程在 WASM 中快了 2.2 倍，但由于 JS-WASM 边界的开销，整体解析器速度慢了约 37%。因此，最终版本仍采用原生 JavaScript。

社区洞察与替代方案

Hacker News 社区的用户和开发者强调了关于 ER 图的实用性和理论性质的几个观点。

理论区别

一位用户指出，数据库表与实体之间存在细微的差别，并建议 SQL 本身并不能提供足够的信息来创建真正的实体关系图，因为实体与表在本质上是有区别的。

与其他工具的对比

社区成员建议了几种替代方案和补充工具：

Mermaid.js：支持 ER 图，但被描述为视觉效果不如 SQL to ER Diagram 精致。
Azimutt：另一种数据库可视化工具。
SQLGlot：建议集成像 SQLGlot 这样的转换层，通过在生成前将它们转换为基础方言来支持更多的 SQL 方言。