erd-editor

erd-editor 概覽

這是什麼

ERD Editor 是一個視覺化資料庫綱要設計工具，可作為網頁應用程式（PWA）、Google Drive 編輯器、VS Code 擴充功能、JetBrains IDE 外掛、Obsidian 外掛、自訂 HTML 元素，以及供程式碼代理使用的 MCP 伺服器。所有平台共用單一的 .erd.json 檔案格式。本專案採用 MIT 授權，為開放原始碼。

主要功能

• 設計資料表、欄位、備忘錄、資料表群組、四種關聯基數、ON DELETE/UPDATE、替代鍵，以及自動佈局。
• 匯入 SQL DDL、GraphQL SDL、DBML 與 AML；匯出八種資料庫的 DDL（Databricks、MariaDB、MSSQL、MySQL、Oracle、PostgreSQL、Snowflake、SQLite）以及 22 種語言/ORM 的程式碼（TypeScript、GraphQL、C#、Java、JPA、Kotlin、Scala、Go、SQLAlchemy、TypeORM、Sequelize、Drizzle、DBML、AML、Mermaid、PHP、Doctrine、Rust、SeaORM、Swift、Zod、JSON Schema），另可匯出 PNG 與 SVG。
• 透過指令面板（Ctrl/Cmd+K）、包含尋找與取代的 Explorer 樹狀檢視、圖形與流程檢視進行導覽。
• 復原/重做、階段歷程時間回溯，以及與其他檔案比對的差異檢視器。
• 支援 25 種 UI 語言，提供系統、淺色或深色主題，可自訂灰色與強調色。
• 透過 WebRTC 即時協作，使用 AES-GCM 加密；程式碼代理可透過 MCP 伺服器加入成為協作者。

使用情境

• 視覺化設計新的資料庫綱要，或透過匯入 DDL、GraphQL、DBML 或 AML 逆向工程現有綱要。
• 將綱要定義匯出為多種資料庫的 DDL，或轉換為多種程式語言與 ORM 的程式碼。
• 在 erd-editor.io 上或透過共用階段與團隊成員即時協作。
• 使用 `` 自訂元素將編輯器嵌入自訂網頁應用程式。
• 讓程式碼代理（Claude Code、Codex 等）透過 MCP 伺服器即時修改綱要。

快速開始

在瀏覽器中開啟 erd-editor.io 即可使用，無需安裝。若要在 IDE 中使用，請建立一個空的 .erd.json 檔案，並以對應的擴充功能開啟。若要嵌入網頁應用程式：shnpm install @dineug/erd-editor``````jsimport '@dineug/erd-editor';const editor = document.createElement('erd-editor');Object.assign(editor.style, { display: 'block', width: '100%', height: '100vh' });document.body.appendChild(editor);若要加入程式碼代理（需 Node.js 22.12 以上）：sh# Claude Codeclaude mcp add --transport stdio erd-editor -- npx -y @dineug/erd-editor-mcp# Codexcodex mcp add erd-editor -- npx -y @dineug/erd-editor-mcp

授權與價格

採用 MIT 授權。本軟體為開放原始碼且免費使用。除開放原始碼授權外，未提供其他價格資訊。

內容整理自該專案公開的 README 與儲存庫資訊。