Mermaid ER 圖檢視器
貼上 Mermaid erDiagram 程式碼，立即預覽您的資料庫結構。匯出為 SVG 或 PNG。免費、僅限瀏覽器的 ER 圖工具。
輸入 Mermaid 程式碼以預覽您的圖表
實體關聯（ER）圖是視覺化關聯式資料庫結構的標準標記法。它們顯示實體（表格）、其屬性（欄位）以及它們之間的關聯——一對一、一對多、多對多。Mermaid 的 `erDiagram` 語法將 ER 圖繪製帶入了「程式碼即文件」的世界，讓在 README、ADR（架構決策記錄）和合併請求描述中記錄資料庫結構變得更加容易。 當資料庫工程師或後端開發人員向 AI 助理請求設計結構時——例如「為一個包含使用者、產品和訂單的電子商務平台建立資料庫」——回應通常會包含一個 Mermaid ER 圖。將該程式碼貼到 Zolkit 中，您可以立即驗證關聯和基數是否反映了預期的業務規則。 Zolkit 的 ER 圖檢視器完全支援 Mermaid 的 `erDiagram` 語法，包括帶有類型屬性的實體定義、主鍵和外鍵註解、帶有烏鴉腳標記法的關聯線以及內嵌的關聯標籤。後端開發人員、資料庫架構師和技術寫作人員都可以使用它來記錄結構，而無需離開瀏覽器。
免費線上 Mermaid 圖表檢視器與匯出工具
Zolkit 的 Mermaid 圖表檢視器可讓您貼上任何 Mermaid 程式碼，並立即看到渲染後的圖表 — 無需安裝、無需註冊、無需上傳伺服器。所有操作都在您的瀏覽器中進行，這是驗證 Claude、ChatGPT 或 Gemini 生成的 AI 圖表最快的方式。支援所有主要的 Mermaid 圖表類型：流程圖、時序圖、類別圖、ER 圖、甘特圖、狀態圖、心智圖、Git 圖、圓餅圖和時間軸。
即時預覽
輸入時自動渲染圖表，具有 300 毫秒的延遲，確保流暢體驗。
100% 私密
所有渲染都在您的瀏覽器中使用 mermaid.js 進行。您的程式碼絕不會傳送至任何伺服器。
匯出 SVG 與 PNG
將您的圖表下載為清晰的向量 SVG 或高解析度 2× PNG，適用於文件和簡報。
所有 Mermaid 圖表類型
支援流程圖、時序圖、類別圖、ER 圖、甘特圖、心智圖、Git 圖等。
適用於 AI 圖表
為 AI 時代而生 — 直接預覽由 Claude、ChatGPT、Gemini 或任何 LLM 生成的圖表。
永久免費
無需帳戶、無使用限制、無浮水印。Zolkit 的 Mermaid 檢視器永久免費。
如何預覽 Mermaid 圖表
- 1
將您的 Mermaid 程式碼貼到左側的編輯器中 — 您可以從 AI 助理複製，或手動編寫。
- 2
圖表會立即在右側的預覽面板中渲染。如果出現語法錯誤，將會顯示說明問題的訊息。
- 3
點擊「匯出 SVG」或「匯出 PNG」即可下載您的圖表檔案，用於文件、簡報或分享。
常見問題
Mermaid 在 ER 圖中使用哪些基數符號？
Mermaid 使用烏鴉腳標記法：`||--||` 表示一對一，`||--o{` 表示一對零或多，`}o--o{` 表示零或多對零或多，以及 `||--|{` 表示一對一或多。這些符號會渲染為關聯線上的標準烏鴉腳符號，使基數一目了然。
如何在 Mermaid ER 圖中標記主鍵和外鍵？
在實體定義的欄位類型後添加 `PK` 或 `FK`：`int id PK` 表示主鍵，`int userId FK` 表示外鍵。您也可以添加 `UK` 表示唯一鍵。這些註解會以標籤形式出現在實體框內，對於溝通結構的關聯性至關重要。
可以在 Mermaid ER 圖中記錄多對多關聯嗎？
可以。直接使用 `}o--o{` 或透過一個連接實體來表示多對多關聯。使用連接實體（例如 ORDER 和 PRODUCT 之間的 ORDER_ITEM）通常是更好的做法，因為它能更準確地模擬實際的結構設計，並允許您為關聯本身添加屬性，例如數量或價格。
在專案中使用 Mermaid ER 圖的最佳方式是什麼？
將 ER 圖作為 Mermaid 程式碼區塊添加到您的專案 README 或專用的 `SCHEMA.md` 檔案中。GitHub、GitLab 和 Notion 都原生支援渲染 Mermaid，因此圖表能與程式碼保持同步更新。每次執行遷移時更新圖表——將其視為活文件，而非一次性產物。