はじめに
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> カスタム要素 — インストールを参照 |
IDE で試すには、拡張子が .erd.json の空ファイルを作成して開きます。
Obsidian では、コマンドパレットから ERD Editor: Create new diagram を実行するか、ファイルエクスプローラーでフォルダのコンテキストメニューから New ERD を選びます。どちらも空の .erd ファイルを作成して開きます。
新しいダイアグラムは表示位置も拡大・縮小のレベルも保存しないため、スクロールしたり拡大・縮小したりしても、新しいダイアグラムの空のファイルはそのまま変わりません。スクロール情報の保存を参照してください。
Google Drive では、New → More → ERD Editor を選び、Google でサインインします。ERD Editor がアクセスできるのは、ERD Editor で作成したり開いたりしたファイルだけです。
Obsidian プラグインを更新したら、Obsidian を再起動してください。再起動するまでは、以前のバージョンが読み込んだエディタがウィンドウに残ります。
できること
- 端のないキャンバスにテーブル、カラム、メモを描き、
Zero One、Zero N、One Only、One Nの 4 種類のリレーションシップでつなぎます。編集を始めるを参照してください。リレーションシップには ON DELETE と ON UPDATE のアクションも設定できます。ON DELETE と ON UPDATEを参照してください。インデックスはテーブルのプロパティパネルで定義します。2 つ以上のカラムにまたがるユニークインデックスは代替キーで、Alternate Keyの表示オプションがオンのとき、ダイアグラムはそのカラムにAK1.1、AK1.2などのマークを付けます。インデックスと代替キーを参照してください。 - 既存のスキーマを
json、Schema SQL、GraphQL、DBML、AMLから読み込めます。ファイルの読み込みと書き出しを参照してください。 - ダイアグラムを
json、Schema SQL、pngとして書き出します。 - Databricks、MSSQL、MariaDB、MySQL、Oracle、PostgreSQL、Snowflake、SQLite の 8 つのデータベースベンダーの構文で Schema SQL を記述します。テーブル関連機能を参照してください。
- C#、Go、Java、Kotlin、Scala、TypeScript、Drizzle、JPA、Sequelize、SQLAlchemy、TypeORM、AML、DBML、GraphQL の 14 種類のターゲット向けにコードを生成します。コード生成を参照してください。
- 可視化では、スキーマを力学モデルの
Graphとして、またはリレーションシップに沿って並べたテーブルのカードのFlowとして読み取れます。テーブルにマウスを重ねると、そのテーブルが接しているものが一目で分かります。ERD タブでAlt + Fを押すと、選択しているテーブルにフォーカスし、それに関連するテーブルと合わせて表示できます。 - 端のないキャンバスで作業します。ダイアグラムが伸びていく先へどこまでも移動でき、
Ctrl + Wheel（Mac では⌘ + Wheel）、キーボード、ピンチで10%から150%まで拡大・縮小し、Zen モードでダイアグラムだけを残せます。キャンバスの移動を参照してください。 - 自動レイアウトで、ダイアグラム全体を一度に並べ替えます。Force のシミュレーション、左から右へ流れる Flow、縦横 2 方向の Tree から選べます。
- クイック検索を使うと、どこからでもコマンドを実行できます。検索を
#、@、:で始めると、それぞれテーブル、カラム、コメントまたはメモへ移動できます。Undo, Redo では編集履歴をたどれます。 - 検索と置換では、テーブル名、カラム名、コメント、メモの中のテキストを検索し、一致した箇所を 1 つだけ、またはすべてまとめて置換できます。
Ctrl + F（Mac では⌘ + F）か、ツールバーのSearchの隣にあるボタンで開きます。 - Claude Code や Codex などのコーディングエージェントに、MCP サーバーを通じてダイアグラムを編集させられます。VS Code、Obsidian、JetBrains IDE ではライブで編集し、変更がその場でキャンバスに現れます。ファイルそのものを編集させることもできます。
- Web アプリでは、リアルタイムで一緒に編集できます（実験的機能）。セッションはピアツーピアかつエンドツーエンドで暗号化されるため、スキーマがサーバーに保持されることはなく、参加者は互いのマウスカーソル、フォーカス、選択範囲を確認できます。自分のページでは、
getSharedStore()が同じアクションストリームを任意のトランスポート上で提供します。
まずは編集ガイドから始めてください。
このプロジェクトを始めた理由
既存のモデリングツールは、私が求めていた水準のユーザー体験を提供してくれませんでした。
そこで、最高のユーザー体験を届けるためにこのプロジェクトを立ち上げました。
このプロジェクトの最優先事項は、ユーザーの編集体験です。
編集において、驚くような体験をお届けします。