一个基于网页的纯前端工具，用于从 SQL CREATE TABLE 语句和 DBML 代码生成 Chen 模型 ER 图。无需登录，无需付费，完全免费开源。
Note
为什么做这个？市面上绝大多数 DBML/SQL 转 ER 图的在线工具都需要登录甚至收费，且样式奇丑无比，体验令人失望。于是直接开源一个免费替代品。
Tip
如果你需要绘制的是逻辑模型（而非 Chen 模型），推荐使用 dbdiagram.io，同样免费。
直接访问在线版本即可使用，无需安装：
或者克隆到本地开发运行：
本项目使用 pnpm 作为包管理器（已通过 packageManager 字段锁定版本，建议先 corepack enable 让其自动安装）。
git clone https://github.com/ystemsrx/sql_to_ER.git
cd sql_to_ER
corepack enable # 一次性，启用 Corepack 自动管理 pnpm 版本
pnpm install
pnpm devWarning
请勿直接双击打开 sql2er.html，也不要用 npx serve . 直接服务源码目录。 本项目使用 Vite + TypeScript，源码中的 .ts/.tsx 和 npm 依赖需要 Vite 编译与模块解析。开发时请使用：
pnpm dev然后在浏览器访问 Vite 输出的地址，例如 http://localhost:5173/sql2er.html。如果要用静态服务器，请先执行 pnpm build，再服务 dist/ 目录。
- 通过
pnpm dev打开sql2er.html（参见上方快速使用，或直接访问在线版） - 在输入区粘贴 SQL
CREATE TABLE语句或 DBML 代码 - 点击 「生成 ER 图」 按钮
- 若对节点位置不满意，可拖拽节点调整布局；双击节点修改内容
- 在画布上使用滚轮可平滑缩放，按住 Ctrl + 滚轮可围绕图形中心平滑旋转（节点形状与文字方向保持不变）
- 若图形较复杂，只需将每个矩形（实体）拖到大致位置，再点击 「智能优化」，即可自动整理布局
📘 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 示例
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
| 图形 | 含义 | 对应数据库概念 |
|---|---|---|
| 🟦 矩形 | 实体 | 表 |
| 🔶 菱形 | 关系 | 外键 |
| ⚪ 椭圆 | 属性 | 列 |
| 下划线 | 主键标识 | 主键属性 |
Important
本工具为简化使用，在以下方面对标准 Chen 模型做了妥协。如需严格符合学术规范，请参考下方说明手动调整。
- 关系命名：标准 Chen 模型要求菱形使用语义化名称（如 属于、拥有），本工具默认显示外键字段名。
- 实体与属性命名：标准建议使用业务术语，本工具默认直接使用表名与列名。
- 自定义修改：
- ✏️ 双击 图形元素可直接编辑显示内容
- 🔁 或在源代码（SQL / DBML）中修改后重新生成
Tip
代码较复杂时，直接生成的图可能不够整齐。此时：
- 点击 「智能布局」 自动整理——通常此时已足够整齐，仅需微调。
- 若仍不理想，点击 「强制对齐」 进行更激进的对齐排列，再配合「智能布局」通常可得到理想效果。
- 极少数情况下，可先手动将矩形（实体）拖到合适位置（其他元素无需调整），再点击「智能布局」即可。
- 实体 / 关系特别多时，可先点击画布左上角的 「隐藏属性」，先把矩形（实体）和菱形（关系）骨架摆到理想位置，再点一次切换回「显示属性」——属性会自动根据当前矩形的位置围绕其均匀分布，避免一上来就被属性干扰拖动。
|
|
每次生成 ER 图时都会自动保存一份快照（含缩略图、节点位置、当前显示设置），整理过的布局不会因为重新生成而丢失。
- 打开：点击画布左上角的 🕘 时钟图标打开历史页面。
- 浏览：直接 拖拽 卡片，或在面板上 滚轮 翻动；最近的快照在最前面。
- 恢复：拖拽任意卡片先把它吸附到中央，再次点击「恢复」即可按当时的节点位置 / 标签重建图（不会重新布局）。
- 删除：单张快照右下角的 🗑 按钮可单独移除该条记录。
- 持久化：所有数据都存在浏览器本地的 IndexedDB 中（首次生成非示例 ER 图后才会出现条目）。
Tip
想撤回上一次手动调整？面板里的「恢复」是按输入文本归档的版本切换，单步撤销 / 重做请用 Ctrl + Z / Ctrl + Y。
欢迎提交 Issue 和 Pull Request！如果这个项目对你有帮助，请点一个 ⭐ Star 支持一下。
本项目基于 GNU AGPL v3.0 开源。