簡介

erd-editor 是實體關聯圖編輯器。 它以網頁應用程式、Google Drive 應用程式、VS Code 擴充功能、IntelliJ 外掛程式和 Obsidian 外掛程式的形式提供，也可作為 <erd-editor> 自訂元素嵌入您自己的網頁。 所有形式都使用同一個編輯器和同一種文件格式。

取得方式

平台	安裝	提供內容
網頁應用程式	erd-editor.io	可安裝的 PWA、可離線運作、即時協作
Google Drive	Google Workspace Marketplace	將 ERD Editor 加入 Drive 的 Open with 和 New 選單，並儲存回同一個檔案
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	一個 MCP 伺服器，可讓 Claude Code、Codex 或其他用戶端在 VS Code、JetBrains IDE 或 Obsidian 中即時編輯圖表，或直接編輯檔案本身

若要在 IDE 中試用，建立一個副檔名為 .erd.json 的空白檔案並將其開啟。 在 Obsidian 中，從命令選擇區執行 ERD Editor: Create new diagram，或在檔案總管中從資料夾的右鍵選單選擇 New ERD。兩者都會建立一個空白的 .erd 檔案並將其開啟。 在 Google Drive 中，選擇 New → More → ERD Editor，然後使用 Google 帳戶登入。ERD Editor 只能存取以它建立或開啟的檔案。 在網頁應用程式、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：在資料表群組推出之前的版本中，目前版本儲存的檔案不會顯示主鍵圖示，而在這類版本中儲存該檔案，會捨棄其中的資料表群組和結構描述 SQL 指令碼。 這類版本儲存的檔案，會在檔案第一次保留變更時以目前的格式重新寫入，請參閱鎖定。在此之前，依據其 $schema 驗證該檔案的 JSON 編輯器會將其回報為無效。

主要功能

• 在無邊界的畫布上繪製資料表、欄位和備忘錄，並以四種關聯類型將它們連接起來：Zero One、Zero N、One Only、One N。請參閱開始編輯。索引在資料表的屬性面板中定義。涵蓋兩個或更多欄位的唯一索引即為替代鍵，開啟 Alternate Key 檢視選項時，圖表會將其欄位標示為 AK1.1、AK1.2，依此類推。請參閱索引和替代鍵。
• 讓關聯的終點落在資料表現有的欄位上：以滑鼠或觸控筆繪製關聯時，終點資料表旁的 Map to existing columns 會將父資料表的鍵與該資料表的欄位配對，Create new columns 則會新增欄位。關聯右鍵選單中的 Map Columns 可在之後變更其欄位。請參閱對應欄位。關聯也可以帶有 ON DELETE 和 ON UPDATE 動作。請參閱 ON DELETE 與 ON UPDATE。
• 快速編輯：Alt + N 會新增資料表；Alt + Enter 會新增欄位；Alt + K 會切換焦點欄位的主鍵，若焦點欄位是選取的欄位之一，則會切換每個選取欄位的主鍵；Delete 或 Backspace 則會刪除選取範圍。每一項都算作一個復原步驟。請參閱快速鍵。畫布底部的畫布工具列也能按一下就新增資料表或備忘錄。
• 從包含預設集和圖表已使用顏色的選擇器中，為資料表、備忘錄或資料表群組設定顏色，並以 No color 或 Remove color 移除顏色。請參閱設定資料表與備忘錄的顏色。
• 將相關的資料表收進資料表群組：位於這些資料表後方、可以命名和設定顏色的方框。使用 Alt + G，或使用畫布的右鍵選單、畫布工具列或快速搜尋中的 New Table Group 繪製群組；也可以先按 T 再按 G，或使用所選資料表右鍵選單中的 Group selected tables，以所選資料表建立群組。資料表放置在群組內時會加入群組，放置在群組外時會離開群組，而拖曳群組的標題列時，其中的資料表會隨之移動。DBML 的匯入和匯出都會以 TableGroup 區塊保留群組。
• 從 json、Schema SQL、GraphQL、DBML 或 AML 匯入現有的結構描述。請參閱匯入或匯出檔案。匯入結構描述 SQL、GraphQL、DBML 或 AML 檔案時，其資料表會沿著關聯配置，沒有關聯時則逐列排列。Import and Add 會將檔案加到圖表下方，而不是取代圖表。
• 將圖表匯出為 json；從「結構描述 SQL」索引標籤匯出為結構描述 SQL，可儲存為 .sql 檔案或複製；或從 Export image 對話方塊匯出為 PNG 或 SVG 圖片，或以 PNG 複製到剪貼簿。
• 以八種資料庫廠商的語法寫出結構描述 SQL：Databricks、MSSQL、MariaDB、MySQL、Oracle、PostgreSQL、Snowflake 和 SQLite。請參閱資料表相關功能。「結構描述 SQL」索引標籤的選項面板可選擇要寫出的陳述式、標頭和資料表群組，並保留您自己的 SQL，這些 SQL 會儲存在圖表中，寫在資料表之前和之後。
• 為二十二種目標產生程式碼：語言有 C#、Go、Java、Kotlin、PHP、Rust、Scala、Swift 和 TypeScript；ORM 有 Doctrine、Drizzle、JPA、SeaORM、Sequelize、SQLAlchemy 和 TypeORM；此外還有 AML、DBML、GraphQL、JSON Schema、Mermaid 和 Zod。「程式碼產生器」索引標籤的選項面板可選擇語言、資料庫和名稱大小寫，程式碼可儲存為使用該語言副檔名的檔案，或加以複製。請參閱程式碼產生器。
• 在視覺化中檢視結構描述，可呈現為力導向的 Graph，或沿著關聯配置資料表卡片的 Flow；將指標停留在資料表上時，與其相連的一切都會亮起。在 ERD 索引標籤上按 Alt + F，即可聚焦所選資料表以及與其相關的資料表。
• 在沒有邊界的畫布上工作：圖表延伸到哪裡就能平移到哪裡，使用 Ctrl + Wheel（在 Mac 上為 ⌘ + Wheel）、鍵盤或雙指縮放，在 10% 到 150% 之間縮放，並以禪模式隱藏圖表以外的一切。以滑鼠中鍵拖曳可從畫布上的任何位置平移，即使在資料表上方也可以。請參閱瀏覽畫布。
• 使用自動版面配置一次排列整個圖表：力導向模擬、由左至右的流程配置，或任一方向的樹狀配置，每個資料表群組都會保持在一起。
• 透過快速搜尋從任何地方執行命令，或以 #、@ 或 : 作為搜尋開頭，跳至資料表、欄位，或註解或備忘錄。使用復原、重做逐步瀏覽編輯歷程記錄，使用時光旅行在畫布上重播此工作階段的歷程記錄，或在差異檢視器中將圖表與另一個 .json 檔案比較。它的樹狀結構位於兩個版本旁，會列出已新增、已修改、已刪除或已重新命名的資料表、欄位、索引、外鍵、備忘錄和資料表群組。
• 在物件總管中瀏覽圖表，這是停駐在畫布左側的樹狀結構：先是各個資料表，每個資料表都附有其欄位、索引和外鍵，接著是資料表群組和備忘錄。按一下某一列即可前往該列在畫布上代表的項目；外鍵列也會讓其關聯亮起。工具列的 Explorer 按鈕位於 Search 旁，可開啟和關閉物件總管。
• 使用物件總管頂端的尋找與取代尋找文字。它會搜尋資料表、欄位、索引和資料表群組的名稱，開啟後也會搜尋註解和備忘錄，並在物件總管的樹狀結構中顯示相符項目。取代一個相符項目或全部相符項目；Preserve Case 會讓每個取代內容沿用被取代文字的大小寫。Ctrl + F（在 Mac 上為 ⌘ + F）會開啟物件總管，並將插入點放在「尋找」輸入框中，再按一次則會關閉物件總管。
• 以 25 種語言使用編輯器，可從工具列的 Display Language 按鈕或快速搜尋中選擇。System 會依循瀏覽器或主應用程式的語言，而阿拉伯文、希伯來文和波斯文會讓編輯器由右至左配置，圖表則維持由左至右。只有編輯器本身的文字會改變：名稱、SQL 和產生的程式碼都會維持原樣。工具列的佈景主題建立器可選擇外觀（System、Light 或 Dark）、灰色調，以及強調色。請參閱語言與佈景主題。
• 保持差異簡潔：捲動位置與縮放比例、開啟中的索引標籤、程式碼產生器的語言與名稱大小寫，以及引號類型，預設都會鎖定，因此檔案會保留鎖定時的值，捲動、縮放或切換索引標籤都不會變更檔案。檔案會以固定順序寫入，並省略測量出的寬度、堆疊順序、連接線錨點和已移除的項目，因此開啟圖表後未經編輯就關閉，檔案會維持原樣。
• 讓 Claude Code 或 Codex 等程式碼代理程式透過 MCP 伺服器編輯圖表：可以在 VS Code、Obsidian 或 JetBrains IDE 中即時編輯，每項變更發生時都會立即顯示在畫布上，也可以直接編輯檔案本身。
• 在網頁應用程式中即時協作編輯（實驗性）。工作階段採用點對點連線並經過端對端加密，因此不會有任何伺服器存放您的結構描述，對等端也能看到彼此的游標、焦點和選取範圍。在您自己的網頁中，getSharedStore() 能透過您選擇的傳輸方式提供相同的動作串流。

請從編輯指南開始。

開發緣由

現有的建模工具無法提供我所期望的使用者體驗水準。
因此，我發起了這個專案，以提供極致的使用者體驗。
本專案最優先考量的是使用者的編輯體驗。
它將為您帶來令人驚豔的編輯體驗。