DevToolKits.app
可視化

SQL 轉 ER 圖

解析 CREATE TABLE 語句並自動生成 Mermaid 格式的 ER 圖。在瀏覽器中安全地可視化您的資料庫設計。

指南: How to use & features

  • Enter or paste SQL `CREATE TABLE` statements into the text area.
  • Click the "Visualize" button to generate and display the ER diagram using Mermaid syntax.
  • Table relationships (Foreign Keys) are automatically extracted from `FOREIGN KEY` or `REFERENCES` clauses.
  • Use the "Copy Mermaid Code" button to save the generated syntax to your clipboard.
  • Your schema data is processed entirely in the browser, ensuring privacy and security.

範例: Examples

Users and Posts (One-to-Many)

輸入範例

CREATE TABLE users (
  id INT PRIMARY KEY,
  name VARCHAR(50)
);

CREATE TABLE posts (
  id INT PRIMARY KEY,
  user_id INT REFERENCES users(id),
  title VARCHAR(100)
);

輸出範例

erDiagram
    users {
        INT id PK
        VARCHAR(50) name
    }
    posts {
        INT id PK
        INT user_id
        VARCHAR(100) title
    }

    posts }|--|| users : "user_id -> id"

FAQ: FAQ

  • Does it support all SQL dialects?

    It supports standard SQL CREATE TABLE syntax. Some highly specific proprietary vendor extensions may not be fully parsed as it uses a custom regex-based parser.

  • Is my data sent to a server?

    No. All processing is done locally in your browser via JavaScript. Your SQL code never leaves your computer.

  • What if relationships are not showing up?

    Ensure that your statements include FOREIGN KEY or REFERENCES clauses. The tool relies on these constraints to identify and draw relationships.

使用情境: Common Use Cases

  • Database Documentation

    Quickly visualize and document existing table structures by pasting SQL exports.

  • Schema Design Verification

    Self-check your DDL to ensure that relationships and constraints are correctly defined during the design phase.

  • Team Collaboration

    Share specific sub-system structures with your team using lightweight Mermaid syntax before generating full documentation.

注意: Notes & Limitations

  • Limited SQL Syntax

    Statements other than CREATE TABLE (e.g., stored procedures, triggers, complex INDEX definitions) are ignored.

  • Performance with Large Schemas

    Very large schemas with dozens of tables may significantly impact browser rendering performance.

  • Syntax Errors

    Incomplete or malformed SQL statements (missing parentheses, typos) will result in parsing failures.
erDiagram USERS ||--o{ POSTS : "user_id -> id" USERS { int id PK string name } POSTS { int id PK int user_id string title }

最新文章

Story
2026-03-09

用遞迴解決 JSON 轉 TypeScript：不依賴第三方庫的強大之處

「從 API 回應中瞬間生成型別定義。介紹不使用外部解析器、僅憑遞迴演算法實現輕量且高速轉換的幕後故事。」

Read more →
Story
2026-03-09

將安全的 JWT 驗證環境帶入瀏覽器：從資安工程師的觀點出發

「為了安全地處理高敏感 Token。解說結合 jose 函式庫與本地處理機制的 JWT 工具設計思想。」

Read more →
Story
2026-03-09

讓 QR Code 生成更輕便、更安全

「結合 Canvas API 與 node-qrcode，在瀏覽器上同時實現即時生成與隱私保護的工具開發實錄。」

Read more →
Story
2026-03-09

資料不外傳最安心：瀏覽器端 Diff 工具的開發背景

「為了安全且快速地比較文字差異，我們採用了以隱私為最優先、僅在瀏覽器端運作的設計架構。」

Read more →
Story
2026-03-09

免用函式庫的時區轉換：Intl API 的真本事

「不依賴 Moment.js 或 date-fns，僅憑瀏覽器內建的 Intl API 實現輕量級時區處理的開發幕後。」

Read more →
Story
2026-03-03

SQL to ER 圖轉換工具開發秘話：對「瀏覽器端完結」的堅持

「介紹從 SQL 生成 ER 圖工具的開發背景，以及為兼顧安全性與便利性所面臨的技術挑戰。」

Read more →

廣告

其他工具的捷徑

透過站內捷徑快速切換常用工具。

DevToolKits.app
文章
1 items
文章列表 →
開發與 DevOps
8 items
GitHub Actions 可視化 → SQL 格式化 → 視覺化 SQL 構建器 → SQL → ER 圖轉換 → Curl 轉換器 → Chmod 計算機 → Cron 編輯器與解析器 → 基礎架構架構圖生成器 →
資料轉換與 Schema
6 items
JSON 格式化 → JSON → TypeScript → JSON → Zod → JSON → OpenAPI → JSON ⇔ YAML 轉換 → CSV ⇔ JSON 轉換 →
安全與加密
5 items
Base64 / 58 / 32 → JWT 工具 → 雜湊與 HMAC 產生器 → JWKS 產生器 → UUID 產生器 →
文字與程式碼輔助
4 items
Markdown 表格產生器 → 文本＆程式碼工具 → 正則表達式測試器 → Diff 檢視器 →
URL 與網路
4 items
URL 編碼 / 解碼 → URL 參數 → JSON → QR 生成器 → QR 讀取器 →
設計與 UI
2 items
顏色工具 → Favicon 產生器 →
日期與時間
3 items
時區轉換工具 → 時間單位換算 → UNIX 時間戳轉換 →

廣告