ERD Editor

データベーススキーマを視覚的に設計：ブラウザーで、IDE で、あるいはコーディングエージェントに頼んで

English | 한국어 | 中文 | 日本語

erd-editor.io を開く — ブラウザーでインストールなしにすぐ使えます。VS Code、JetBrains IDE、Obsidian、Google Drive 向けもあります。

どこで作業しても、エディターはひとつ、ファイルは .erd.json ひとつ。Web、Google Drive、VS Code、JetBrains IDE、Obsidian、自分のアプリの中、そしてコーディングエージェントの手の中でも。

機能

• 設計 — テーブル、列、メモ、テーブルグループ、4 種類のリレーションシップのカーディナリティ、ON DELETE と ON UPDATE、代替キー、自動レイアウト
• 命名規約 — 論理名と物理名、単語・用語・ドメインの辞書から決まる物理名とデータ型、CSV のインポート・エクスポートとチェックを備えた専用の辞書タブ
• インポート — SQL DDL、GraphQL SDL、DBML、AML。図を置き換えることも、既存の図に追加することもできます
• エクスポート — 8 種類のデータベースの DDL、22 の言語・ORM のコード、PNG と SVG
• ナビゲーション — コマンドパレット（Ctrl/Cmd+K）、検索と置換を備えたエクスプローラーツリー、Graph ビューと Flow ビュー
• 履歴 — 元に戻す・やり直し、編集セッションを巻き戻すタイムトラベル、別のファイルと比べる差分ビューアー
• 25 言語、そしてグレーとアクセントカラーを選べる System・Light・Dark テーマ
• 共同編集 — erd-editor.io のリアルタイムセッション、そしてそばで一緒に編集するコーディングエージェント

データベース: Databricks, MariaDB, MSSQL, MySQL, Oracle, PostgreSQL, Snowflake, SQLite

コード: TypeScript, GraphQL, C#, Java, JPA, Kotlin, Scala, Go, SQLAlchemy, TypeORM, Sequelize, Drizzle, DBML, AML, Mermaid, PHP, Doctrine, Rust, SeaORM, Swift, Zod, JSON Schema

各機能の使い方は編集ガイドにあります。

コーディングエージェント

Claude Code、Codex などの MCP クライアントにスキーマの変更を頼み、キャンバス上で変わっていく様子を見てください。

@dineug/erd-editor-mcp は、編集操作ごとにひとつのツールをエージェントに提供します。VS Code、Obsidian、JetBrains IDE がその図を持っていれば、エージェントはもう一人の共同編集者として参加し、エージェントの元に戻す操作は自身の編集だけを戻します。エディターがなければディスク上のファイルを編集し、接続をオフにしたエディターや信頼していないワークスペース・プロジェクトでは、読み取りはできても編集は拒否されます。Node.js 22.12 以降が必要です。プロジェクトフォルダーで、コマンド 1 行で追加します:

# Claude Code
claude mcp add --transport stdio erd-editor -- npx -y @dineug/erd-editor-mcp
# Codex
codex mcp add erd-editor -- npx -y @dineug/erd-editor-mcp

その他のクライアントの設定とツール一覧は README にあります。

使える場所

IDE では、拡張子 .erd.json の空ファイルを作って開きます。Obsidian では ERD Editor: Create new diagram を実行し、Google Drive では 新規 → その他 → ERD Editor を選びます。

リアルタイム共同編集

ERD Editor はすべての編集をアクションのストリームとしてやり取りします。そのため、ブラウザーのタブや分割したエディターなど、ひとつの図を複数の場所で開いても同期し、コーディングエージェントももう一人の共同編集者として参加できます。

erd-editor.io では、サイドバーにある共同編集ボタンから セッションを開始 を選んでリンクを共有すると、リンクを開いた全員が一緒に編集できます。リンクが唯一の鍵なので、編集を任せてよい相手にだけ共有してください。セッションはホストのブラウザーにあり、ホストが最後のタブを閉じると終わるので、図が必要なゲストは先にエクスポートしておきます。

ピアは WebRTC で接続し、図とすべての編集は AES-GCM で暗号化されます。シグナリングリレーは平文を見ることがなく、ルームの鍵は、ブラウザーがどのリクエストにも含めない URL フラグメントにあります。

flowchart TB
    subgraph clientA["Client A"]
        bcA["Broadcast Channel"]
        tabA1["Tab (leader)"]
        tabA2["Tab"]
        swA["Shared Worker"]
        idbA[("IndexedDB")]

        bcA <--> tabA1
        bcA <--> tabA2
        tabA1 <--> swA
        tabA2 <--> swA
        swA <--> idbA
    end

    subgraph clientB["Client B (guest)"]
        tabB1["Tab"]
    end

    relay["Signaling Relay (nostr / mqtt)"]

    tabA1 <-->|"WebRTC (AES-GCM)"| tabB1
    tabA1 -. "signaling" .-> relay
    tabB1 -. "signaling" .-> relay

組み込み

npm install @dineug/erd-editor

import '@dineug/erd-editor/erd-editor.js';

const editor = document.createElement('erd-editor');
// エディターはコンテナーいっぱいに広がり、カスタム要素は既定で inline です
Object.assign(editor.style, { display: 'block', width: '100%', height: '100vh' });
document.body.appendChild(editor);

編集せずに図を表示するだけなら、@dineug/erd-editor/erd-viewer.js をインポートして <erd-viewer src="diagram.erd.json" style="display: block; height: 480px"></erd-viewer> を置きます。スタイルで決めた枠の中で、図のパン、ズーム、検索ができます。パッケージのルートをインポートするだけでは、どちらの要素も定義されません。

スクリプトを読み込めないページ（Wiki やサイトビルダーなど）では、代わりにホストされたビューアーを iframe で埋め込めます。

<iframe src="https://erd-editor.io/embed?src=https%3A%2F%2Fgithub.com%2Fdineug%2Ferd-editor%2Fblob%2Fmain%2Fdata%2Fembed-small.erd.json" width="100%" height="480" style="border: 0" loading="lazy" title="ERD Editor"></iframe>

この 1 行は、このリポジトリの data/embed-small.erd.json を表示します。erd-editor.io/embed のビルダーが、ファイルの URL とビューアーのオプションからこの行を作ります。GitHub 上のファイルや gist は、ここでのようにそのページに表示されるアドレスをそのまま渡せます。ホストされたビューアーはそれを GitHub の raw ホストから取得するため、公開リポジトリと公開 gist でのみ動作します。各ファイルは 5 分間キャッシュされます。gist では最初のファイルを表示します。ほかのサーバーに置いたファイルは、そのサーバーが erd-editor.io からのクロスオリジンリクエスト（CORS）を許可する必要があります。

どちらの要素も、どのフレームワークからでも、フレームワークなしでも使えます。属性と要素の API は packages/erd-editor を参照してください。

ドキュメント

• 編集ガイド — エディターのすべての機能
• 要素 API — 自分のアプリに組み込む <erd-editor>。<erd-viewer> は packages/erd-editor を参照
• MCP — MCP サーバーとツール
• ドキュメント

パッケージ

pnpm ワークスペースです。@dineug/erd-editor、@dineug/erd-editor-mcp、@dineug/erd-editor-yjs は npm に公開され、3 つのプラグインはそれぞれのストアで配布され、app は erd-editor.io で、残りはそれらのビルドが取り込む非公開のライブラリーです。

開発

Node 22.22.1+、24.11+ または 26+（.nvmrc は 22.23.2 を固定）、pnpm 10.34.3、Git 2.32+ が必要で、IntelliJ プラグインには JDK 17+ も必要です。

pnpm install
pnpm --filter @dineug/erd-editor exec playwright install --with-deps chromium # pnpm test 用
pnpm --filter @dineug/erd-editor-app dev # Web アプリ
pnpm check # フォーマット、リント
pnpm test  # 全パッケージの型チェックとスペック
pnpm build

IntelliJ プラグインは packages/intellij-plugin で Gradle を使ってビルドし、e2e スイートは pnpm test とは別に実行します。変更ごとに実行するチェック、カバレッジ、e2e スイート、コミットのルールは AGENTS.md にあります。

コントリビューション

Issue とプルリクエストを歓迎します。コミットメッセージは Conventional Commits に従います。

ライセンス

MIT © SeungHwan-Lee