SQL to ER Diagram: 免費瀏覽器端 SQL Schema 可視化工具

SQL to ER Diagram 是一款免費、開源的工具，可直接在網頁瀏覽器中將 SQL schema 定義轉換為互動式實體關係圖 (ERDs)。透過在本地端處理 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。表格會被光柵化為帶有視窗剔除 (viewport culling) 功能的快取位圖，這優化了大型 schema 的效能。

精準 SQL 解析

SQL 解析器會追蹤每個 token 的來源範圍 (source spans)。這使得工具能夠進行「精準」編輯；例如，當使用者直接在畫布上重新命名表格時，工具僅會更新 SQL 程式碼中相關的識別碼及其引用，同時保留原始的註釋和格式。

JavaScript vs. WASM 實驗

在開發過程中，建立者嘗試了 Rust/WASM 版本。雖然 $O(n^2)$ 的重疊解析 (overlap-resolution) 階段在 WASM 中快了 2.2 倍，但由於 JS-WASM 邊界開銷的影響，整體解析器的速度慢了約 37%。因此，最終版本仍採用純 JavaScript。

社群洞察與替代方案

Hacker News 社群的使用者與開發者強調了關於 ER 圖的實用性與理論性質的幾個觀點。

理論區別

一位使用者指出資料庫表格與實體 (entities) 之間的細微區別，並建議單靠 SQL 並不足以建立真正的實體關係圖，因為實體與表格在根本上是不同的。

與其他工具的比較

社群成員建議了幾種替代方案與互補工具：

  • Mermaid.js：支援 ER 圖，但被描述為視覺效果不如 SQL to ER Diagram 精緻。
  • Azimutt：另一款用於資料庫視覺化的工具。
  • SQLGlot：建議整合像 SQLGlot 這樣的轉換層，透過在生成前將其轉換為基礎方言，以支援更多 SQL 方言。

使用者體驗

使用者稱讚了工具的行動裝置可用性，特別指出在行動裝置上進行平移、縮放和選擇元素時感覺非常流暢。

Sources