sql_to_ER

# 🗂️ SQL / DBML → ER 图生成器 **优雅的在线 SQL 建表语句转 ER 图工具** [English](/sql_to_ER/README.en.html) · **简体中文** [](./LICENSE) [](https://github.com/ystemsrx/sql_to_ER/stargazers) [](https://github.com/ystemsrx/sql_to_ER/network/members) [](https://github.com/ystemsrx/sql_to_ER/issues) [](https://github.com/ystemsrx/sql_to_ER/commits) [](#) [](#) ### 🌐 [**在线体验 · Live Demo**](https://ystemsrx.github.io/sql_to_ER/sql2er.html)

---

✨ 项目简介

一个基于网页的纯前端工具，用于从 SQL CREATE TABLE 语句和 DBML 代码生成 Chen 模型 ER 图。无需登录，无需付费，完全免费开源。

[!NOTE] 为什么做这个？市面上绝大多数 DBML/SQL 转 ER 图的在线工具都需要登录甚至收费，且样式奇丑无比，体验令人失望。于是直接开源一个免费替代品。

[!TIP] 如果你需要绘制的是逻辑模型（而非 Chen 模型），推荐使用 dbdiagram.io，同样免费。

---

🚀 快速使用

直接访问在线版本即可使用，无需安装：

🔗 ER Diagram Generator

或者克隆到本地运行：

git clone https://github.com/ystemsrx/sql_to_ER.git
cd sql_to_ER

[!WARNING] 请勿直接双击打开 sql2er.html。由于浏览器对 file:// 协议的安全限制，CSS / JS 资源将无法正常加载，页面会显示空白或报错。请使用任意本地 HTTP 服务器启动，例如：

# 方式一：Python 3（推荐，无需额外安装）
python -m http.server 8000

# 方式二：Node.js
npx serve .

# 方式三：VS Code "Live Server" 扩展

然后在浏览器访问 http://localhost:8000/sql2er.html 即可。

---

📖 使用步骤

1. 通过本地 HTTP 服务器打开 sql2er.html（参见上方快速使用，或直接访问在线版）
2. 在输入区粘贴 SQL CREATE TABLE 语句或 DBML 代码
3. 点击 「生成 ER 图」 按钮
4. 若对节点位置不满意，可拖拽节点调整布局；双击节点修改内容
5. 若图形较复杂，只需将每个矩形（实体）拖到大致位置，再点击 「智能优化」，即可自动整理布局

---

🧩 支持格式

📘 SQL 示例

```sql CREATE TABLE users ( id INT PRIMARY KEY, username VARCHAR(255) NOT NULL, email VARCHAR(255) UNIQUE ); CREATE TABLE posts ( id INT PRIMARY KEY, author_id INT, title VARCHAR(255), FOREIGN KEY (author_id) REFERENCES users(id) ); ```

📗 DBML 示例

```dbml Table users { id INT [pk] username VARCHAR(255) [not null] email VARCHAR(255) [unique] } Table posts { id INT [pk] author_id INT title VARCHAR(255) } Ref: posts.author_id > users.id ```

---

🎨 Chen 模型元素

图形	含义	对应数据库概念
🟦 矩形	实体	表
🔶 菱形	关系	外键
⚪ 椭圆	属性	列
下划线	主键标识	主键属性

---

⚖️ 与标准 Chen 模型的差异

[!IMPORTANT] 本工具为简化使用，在以下方面对标准 Chen 模型做了妥协。如需严格符合学术规范，请参考下方说明手动调整。

• 关系命名：标准 Chen 模型要求菱形使用语义化名称（如 属于、拥有），本工具默认显示外键字段名。
• 实体与属性命名：标准建议使用业务术语，本工具默认直接使用表名与列名。
• 自定义修改：
  • ✏️ 双击 图形元素可直接编辑显示内容
  • 🔁 或在源代码（SQL / DBML）中修改后重新生成

---

🖼️ 效果展示

[!TIP] 代码较复杂时，直接生成的图可能不够整齐。此时：

1. 点击 「智能布局」 自动整理——通常此时已足够整齐，仅需微调。
2. 若仍不理想，点击 「强制对齐」 进行更激进的对齐排列，再配合「智能布局」通常可得到理想效果。
3. 极少数情况下，可先手动将矩形（实体）拖到合适位置（其他元素无需调整），再点击「智能布局」即可。

🔧 直接生成

✨ 先对齐 + 智能布局

---

🤝 贡献

欢迎提交 Issue 和 Pull Request！如果这个项目对你有帮助，请点一个 ⭐ Star 支持一下。

---

📄 开源协议

本项目基于 MIT License 开源。

This site is open source. Improve this page.