课设数据库建模不用愁：浏览器里画 ER 图还能导出 SQL｜drawDB

课设和毕设写到数据库这一段，最怕两件事：ER 图画得乱、建表 SQL 对不上图。drawDB 是浏览器里就能用的开源数据库设计器：拖几张表、连好关系，就能导出对应方言的 SQL，也能反过来把已有 SQL／DBML 画成图。不用注册账号，图画在自己浏览器里。

本机用官方 Docker 镜像即可开；界面有简体中文，适合截一张完整的 ER 图当课设附录。本帖免费。

能做什么

• 画 ER 图：拖表、加字段、拉外键连线，课设「图书／用户／借阅」这类模型几分钟就能摊开
• 导出 SQL：按所选方言生成建表语句，图和脚本对着看，减少「图画一套、SQL 另写一套」
• 导入 SQL／DBML：已有脚本也能贴进来自动排版成图
• 从已有库导入：选好方言，复制它给出的只读查询，在你自己的客户端（Navicat、DBeaver、psql 等）跑完，把结果贴回去——连接串和行数据都不会交给这个编辑器
• 模板起步：内置 Templates，不想从零拖表也能先套一版再改
• 简体中文界面：设置里切语言即可

技术栈一览

本机部署（已跑通）

推荐预构建镜像（常规 Linux／macOS 有 Docker 网桥时）：

docker run -d --name drawdb --restart unless-stopped \
  -p 127.0.0.1:3000:80 \
  ghcr.io/drawdb-io/drawdb:latest

浏览器打开 http://127.0.0.1:3000/。容器内 Nginx 监听 80，宿主映射 3000；3000 被占用时只改宿主映射，例如 -p 127.0.0.1:3080:80，容器内仍是 80。

备选本地构建：

docker build -t drawdb .
docker run -p 127.0.0.1:3000:80 drawdb

源码调试（Vite 默认 5173）：

npm install
npm run dev

说明：根目录 compose.yml 是开发编排（5173 + Vite），和上面生产写法（容器内 80）不是同一条路，不要混用。本机若遇到 Docker 无网桥、-p 映射连不上的情况，可临时改用 host 网络并自行改监听端口——多数桌面环境按官方 -p 即可，不必折腾。

验收闭环：画图 → 导出 SQL → 看导入对话框

1. 打开首页，把界面切到简体中文
2. 进入编辑器，自建 2–3 张表示例（如图书／用户／借阅，或从 Templates 起步），字段写全，外键拉好连线
3. 导出 SQL，确认能看到对应方言的建表语句
4. 打开 File → Import from database，看一眼导入对话框；若本机有库，按它给出的只读查询在自己的 SQL 客户端执行后再贴回结果
5. 再导出一份 JSON 或 SQL 当作备份——图存在浏览器里，清站点数据会丢

从已有数据库导入（怎么用）

这条路径不会让编辑器拿走你的数据库连接串：

1. 在对话框里选好方言
2. 复制它给出的只读查询
3. 到你自己的客户端（Navicat、DBeaver、psql 等）执行
4. 把查询结果粘贴回去，编辑器按元数据自动排版成图

适合课设答辩前「把现成库结构画成一张图」；演示用本机库即可，不必把生产连接交给浏览器插件。

实测踩坑

1. 图只活在当前浏览器配置里
   画布与自定义模板在 IndexedDB（Dexie），偏好在 localStorage。清站点数据、换浏览器或换设备会看不到原图——重要图先导出 JSON／SQL。
2. 生产镜像 vs 开发 compose
   docker run -p 3000:80 是生产静态站；根目录 compose.yml 走的是 Vite 开发服 5173。按目标选一条，别混着用。
3. 端口冲突只改宿主映射
   -p 127.0.0.1:3080:80 这类写法即可；容器内仍监听 80。
4. ghcr 拉镜像偏慢时
   可改本地 docker build；Dockerfile 给 Node 配了约 4GB 堆，内存偏小可能在 npm run build 阶段 OOM。
5. 分享不是开箱功能
   需要另外部署分享后端并配置后端地址；本地验收画图、导出 SQL、看导入对话框即可，不必开分享。也不要把商业协作／云端 Pro 能力写成这次本机开源版功能。
6. 不要用 file:// 打开
   按 Docker 或 npm run dev 用 HTTP 访问。

安全与合规提醒

• 协议为 AGPL-3.0：分发源码包须保留 LICENSE 与版权声明；若对外提供网络服务，需自行满足协议相应义务
• 无默认账号密码，也无 privileged 容器；即使没有登录页，也不要把端口裸奔到公网
• 图与偏好存在本机浏览器，重要设计请导出备份
• 本帖截图均来自本机 http://127.0.0.1:3000/，不是在线演示站页面
• 源码包可在本帖下载区免费获取（已去掉 .git，保留 LICENSE）。解压后按上文 Docker 或 npm run dev 即可复现

按上文起容器 → 切中文 → 自建几张表并连线 → 导出 SQL，再顺手看一眼「从已有库导入」对话框，课设数据库建模这一段就有一张能交差、能对上脚本的图了。