SQL to ER Diagram: Free Browser-Based SQL Schema Visualization

SQL to ER Diagramは、SQLスキーマ定義をウェブブラウザ内で直接、インタラクティブな実体関連図（ERD）に変換する無料のオープンソースツールです。CREATE TABLE文をローカルで処理することで、機密性の高いスキーマデータを外部サーバーにアップロードすることなく、テーブル、カラム、主キー、および外部キーを可視化できます。

Local-First Architecture and Privacy

SQL to ER Diagramは完全にクライアントサイドで動作するため、データベーススキーマがサーバーにアップロードされたり保存されたりすることはありません。このアーキテクチャにより、アカウント作成、サインアップ、またはペイウォールが不要となり、プライバシーを重視する従来のデータベース可視化ツールに代わる選択肢を提供します。

Key Features

  • Multi-Dialect Support: このツールは、PostgreSQL、MySQL、SQLite、および SQL Server の標準的な CREATE TABLE および ALTER TABLE DDLを解析します。
  • Interactive Visualization: ユーザーはテーブルをドラッグしてレイアウトを配置し、自動整列機能を使用し、ノートやグループボックスを追加できます。
  • Export Options: 図は高解像度の PNG またはベクトル SVG ファイルとしてエクスポートできます。
  • State Persistence: プロジェクト全体をファイルとして保存したり、スキーマ全体をリンクに直接エンコードする URL を通じて共有したりできるため、バックエンドデータベースは不要です。

Technical Implementation Details

開発者の robhati は、フレームワークを使用しないプレーンな JavaScript を使用してこのツールを構築しました。その結果、gzipped サイズは約 32KB になりました。

Rendering Engine

数百のテーブルをレンダリングする際の滑らかさを維持するために、このツールは DOM や SVG ではなく、HTML5 <canvas> 要素を使用しています。テーブルはビューポート・カリングを備えたキャッシュされたビットマップにラスタライズされ、大規模なスキーマのパフォーマンスを最適化します。

Surgical SQL Parsing

SQLパーサーは、すべてのトークンに対してソーススパンを追跡します。これにより、ツールは「外科的」な編集が可能になります。例えば、ユーザーがキャンバス上で直接テーブル名を変更した場合、ツールは元のコメントやフォーマットを保持しながら、関連する識別子とその参照を SQL コード内でのみ更新します。

JavaScript vs. WASM Experimentation

開発中、作成者は Rust/WASM バージョンを試行しました。$O(n^2)$ の重なり解決パスは WASM で 2.2 倍速くなりましたが、JS-WASM 境界のオーバーヘッドにより、全体のパーサーは約 37% 遅くなりました。その結果、最終版はプレーンな JavaScript のままとなりました。

Community Insights and Alternatives

Hacker News コミュニティのユーザーや開発者は、ER図の有用性と理論的な性質に関して、いくつかの点を指摘しました。

Theoretical Distinctions

あるユーザーは、データベースのテーブルと実体（エンティティ）の間の厳密な区別について言及し、SQL だけでは真の実体関連図を作成するための十分な情報が提供されない可能性があると指摘しました。エンティティは根本的にテーブルとは異なるためです。

Comparison to Other Tools

コミュニティメンバーは、いくつかの代替案や補完的なツールを提案しました：

  • Mermaid.js: ER図をサポートしていますが、SQL to ER Diagram よりも視覚的な洗練さに欠けると説明されています。
  • Azimutt: データベース可視化のための別のツールです。
  • SQLGlot: 生成前にベースとなる方言を翻訳することで、より多くの SQL 方言をサポートするために SQLGlot のような翻訳レイヤーを統合するという提案がありました。

User Experience

ユーザーは、ツールのモバイルでの使いやすさを称賛し、特にモバイルデバイスでのパン、ズーム、および要素の選択がシームレスに感じられると指摘しました。

Sources