はじめに
erd-editor は ER 図（Entity-Relationship Diagram）エディタです。
Web アプリ、Google Drive アプリ、VS Code 拡張機能、IntelliJ プラグイン、Obsidian プラグイン、そして自分のページに埋め込める <erd-editor> カスタム要素として提供しています。
どれも同じエディタで、ドキュメント形式も共通です。
入手方法
| プラットフォーム | インストール | 提供内容 |
|---|---|---|
| Web アプリ | erd-editor.io | インストール可能な PWA、オフライン動作、リアルタイム共同編集 |
| Google Drive | Google Workspace Marketplace | Drive の Open with と New のメニューに ERD Editor を追加し、同じファイルに保存し直す |
| VS Code | Marketplace | .erd.json ファイルを開く専用エディタ |
| IntelliJ | JetBrains Marketplace | IntelliJ ベースの IDE で使える同じエディタ |
| Obsidian | Community plugins | .erd と .erd.json ファイルを保管庫のタブで開く（デスクトップ版のみ） |
| 自分のページ | npm install @dineug/erd-editor | フレームワークに依存しない <erd-editor> カスタム要素 — インストールを参照 |
| コーディングエージェント | @dineug/erd-editor-mcp | Claude Code、Codex などのクライアントが、VS Code、JetBrains IDE、Obsidian でライブで、またはファイルそのものに対して、ダイアグラムを編集できるようにする MCP サーバー |
IDE で試すには、拡張子が .erd.json の空ファイルを作成して開きます。
Obsidian では、コマンドパレットから ERD Editor: Create new diagram を実行するか、ファイルエクスプローラーでフォルダのコンテキストメニューから New ERD を選びます。どちらも空の .erd ファイルを作成して開きます。
Google Drive では、New → More → ERD Editor を選び、Google でサインインします。ERD Editor がアクセスできるのは、ERD Editor で作成したり開いたりしたファイルだけです。
Web アプリ、Google Drive、VS Code、JetBrains IDE、Obsidian では、新しい空のダイアグラムはウェルカム画面で開きます。ウェルカム画面は最初の操作を並べたメニューで、New Table、New Memo、Import、Command Palette、Shortcuts があります。
新しいダイアグラムではすべてのロックがオンになっているため、スクロール、拡大・縮小、タブの切り替えをしても、新しいダイアグラムの空のファイルはそのまま変わりません。ロックを参照してください。
VS Code は、Source Control、Local History、Compare with Saved、VS Code のチャットや GitHub Copilot、Claude Code などのコーディングエージェントによる編集のレビュー、GitLens、GitHub Pull Requests、Git Graph などの拡張機能のリビジョン表示では、ERD ファイルを JSON テキストとして開くため、変更を行単位の差分で確認できます。Reopen Editor With... を使うと、Git のリビジョンを読み取り専用のダイアグラムとして表示できます。
Obsidian プラグインを更新したら、Obsidian を再起動してください。再起動するまでは、以前のバージョンが読み込んだエディタがウィンドウに残ります。
ダイアグラムを共有するすべての環境で ERD Editor を更新してください。以前のリリースでは、現在のリリースで保存したファイルに主キーのアイコンが表示されず、そこでファイルを保存するとテーブルグループと Schema SQL のスクリプトが失われます。
以前のリリースで保存したファイルは、ファイルに保存される最初の変更の時点で現在の形式に書き直されます。ロックを参照してください。それまでは、$schema に照らしてファイルを検証する JSON エディタで、無効なファイルとして報告されます。
できること
- 端のないキャンバスにテーブル、カラム、メモを描き、
Zero One、Zero N、One Only、One Nの 4 種類のリレーションシップでつなぎます。編集を始めるを参照してください。インデックスはテーブルのプロパティパネルで定義します。2 つ以上のカラムにまたがるユニークインデックスは代替キーで、Alternate Keyの表示オプションがオンのとき、ダイアグラムはそのカラムにAK1.1、AK1.2などのマークを付けます。インデックスと代替キーを参照してください。 - リレーションシップの終点を、テーブルにすでにあるカラムにできます。マウスやペンでリレーションシップを作成している間、終点のテーブルの横にある
Map to existing columnsは親テーブルのキーをそのテーブルのカラムに対応付け、Create new columnsは新しいカラムを追加します。リレーションシップのコンテキストメニューのMap Columnsで、後からカラムを変更できます。Map Columnsを参照してください。リレーションシップには ON DELETE と ON UPDATE のアクションも設定できます。ON DELETE と ON UPDATEを参照してください。 - すばやく編集できます。
Alt + Nはテーブルを追加し、Alt + Enterはカラムを追加し、Alt + Kはフォーカスしているカラムの主キーを切り替え（そのカラムが選択しているカラムの 1 つであれば、選択しているすべてのカラムが対象です）、DeleteまたはBackspaceは選択しているものを削除します。どれも Undo の 1 ステップです。ショートカットを参照してください。 - テーブル、メモ、テーブルグループに、プリセットとダイアグラムですでに使われている色が並ぶカラーピッカーから色を付け、
No colorまたはRemove colorで色を外せます。テーブルとメモの色指定を参照してください。 - 関連するテーブルをテーブルグループにまとめられます。テーブルグループはテーブルの背後に置かれる枠で、名前と色を付けられます。キャンバスのコンテキストメニューまたはクイック検索の
New Table Groupで描くか、選択しているテーブルのコンテキストメニューのGroup selected tablesで作成します。テーブルは枠の内側にドロップするとグループに加わり、外側にドロップするとグループから外れます。グループをタイトルバーでドラッグすると、そのテーブルも一緒に移動します。DBML はTableGroupブロックとして、読み込みと書き出しの両方向でグループを保持します。 - 既存のスキーマを
json、Schema SQL、GraphQL、DBML、AMLから読み込めます。ファイルの読み込みと書き出しを参照してください。Schema SQL、GraphQL、DBML、AML のファイルは、テーブルがリレーションシップに沿って配置された状態で読み込まれ、リレーションシップがない場合は複数の行に並べて配置されます。Import and Addは、ダイアグラムを置き換えずに、ダイアグラムの下にファイルを追加します。 - ダイアグラムを
jsonとして書き出せるほか、Schema SQL タブから Schema SQL を.sqlファイルとして保存またはコピーでき、Export imageダイアログから PNG または SVG の画像として、あるいはクリップボードへの PNG として書き出せます。 - Databricks、MSSQL、MariaDB、MySQL、Oracle、PostgreSQL、Snowflake、SQLite の 8 つのデータベースベンダーの構文で Schema SQL を記述します。テーブル関連機能を参照してください。Schema SQL タブのオプションパネルでは、書き出すステートメント、ヘッダー、テーブルグループを選べるほか、テーブルの前後に書き出す独自の SQL をダイアグラムに保存しておけます。
- 22 種類のターゲット向けにコードを生成します。言語は C#、Go、Java、Kotlin、PHP、Rust、Scala、Swift、TypeScript、ORM は Doctrine、Drizzle、JPA、SeaORM、Sequelize、SQLAlchemy、TypeORM、そのほかに AML、DBML、GraphQL、JSON Schema、Mermaid、Zod があります。Code Generator タブのオプションパネルでは言語、データベース、名前のケースを選び、コードはその言語の拡張子を付けたファイルとして保存するか、コピーします。コード生成を参照してください。
- 可視化では、スキーマを力学モデルの
Graphとして、またはリレーションシップに沿って並べたテーブルのカードのFlowとして読み取れます。テーブルにマウスを重ねると、そのテーブルが接しているものが一目で分かります。ERD タブでAlt + Fを押すと、選択しているテーブルにフォーカスし、それに関連するテーブルと合わせて表示できます。 - 端のないキャンバスで作業します。ダイアグラムが伸びていく先へどこまでも移動でき、
Ctrl + Wheel（Mac では⌘ + Wheel）、キーボード、ピンチで10%から150%まで拡大・縮小し、Zen モードでダイアグラムだけを残せます。マウスの中ボタンでドラッグすると、テーブルの上を含めてキャンバスのどこからでも表示位置を移動できます。キャンバスの移動を参照してください。 - 自動レイアウトで、ダイアグラム全体を一度に並べ替えます。Force のシミュレーション、左から右へ流れる Flow、縦横 2 方向の Tree から選べ、どれでも各テーブルグループはまとまったまま配置されます。
- クイック検索を使うと、どこからでもコマンドを実行できます。検索を
#、@、:で始めると、それぞれテーブル、カラム、コメントまたはメモへ移動できます。Undo, Redo では編集履歴をたどれ、Time Travel ではこのセッションの履歴をキャンバス上で再生でき、Diff Viewer ではダイアグラムを別の.jsonファイルと比較できます。 - 検索と置換では、テーブル名、カラム名、コメント、メモの中のテキストを検索し、一致した箇所を 1 つだけ、またはすべてまとめて置換できます。
Ctrl + F（Mac では⌘ + F）か、ツールバーのSearchの隣にあるボタンで開きます。 - エディタを 25 の言語で使えます。言語はツールバーの
Display Languageボタンまたはクイック検索から選びます。Systemはブラウザまたはホストアプリの言語に従い、アラビア語、ヘブライ語、ペルシア語ではエディタが右から左のレイアウトになりますが、ダイアグラムは左から右のままです。変わるのはエディタ自身のテキストだけで、名前、SQL、生成したコードは書いたとおりのままです。ツールバーのテーマビルダーでは、外観（System、Light、Dark）、グレーカラー、アクセントカラーを選びます。言語とテーマを参照してください。 - 差分をきれいに保てます。表示位置と拡大・縮小、開いているタブ、Code Generator の言語と名前のケース、括弧の種類は既定でロックされているため、ファイルにはロックした時点の値が残り、スクロール、拡大・縮小、タブの切り替えでファイルが変わることはありません。ファイルは決まった順序で書き込まれ、計測した幅、重なり順、コネクタの接続位置、削除した項目を含まないため、ダイアグラムを開いて編集せずに閉じれば、ファイルは元のまま変わりません。
- Claude Code や Codex などのコーディングエージェントに、MCP サーバーを通じてダイアグラムを編集させられます。VS Code、Obsidian、JetBrains IDE ではライブで編集し、変更がその場でキャンバスに現れます。ファイルそのものを編集させることもできます。
- Web アプリでは、リアルタイムで一緒に編集できます（実験的機能）。セッションはピアツーピアかつエンドツーエンドで暗号化されるため、スキーマがサーバーに保持されることはなく、参加者は互いのマウスカーソル、フォーカス、選択範囲を確認できます。自分のページでは、
getSharedStore()が同じアクションストリームを任意のトランスポート上で提供します。
まずは編集ガイドから始めてください。
このプロジェクトを始めた理由
既存のモデリングツールは、私が求めていた水準のユーザー体験を提供してくれませんでした。
そこで、最高のユーザー体験を届けるためにこのプロジェクトを立ち上げました。
このプロジェクトの最優先事項は、ユーザーの編集体験です。
編集において、驚くような体験をお届けします。