DrawDB 数据库图表工具

项目概述

drawDB 是一款免费、轻量、直观的数据库模式（Schema）编辑器与 SQL 生成工具，完全运行在浏览器中。用户无需注册账号，即可通过可视化操作快速绘制数据库 ER 图、导出与导入 SQL 脚本、生成迁移语句，并对编辑器外观进行个性化定制。

核心特性

• 可视化 ER 图编辑：基于画布的拖拽式操作，快速建立表与字段之间的关联关系。
• SQL 脚本互转：支持将 ER 图导出为标准 SQL，同时可将已有 SQL 脚本导入并自动解析为图形结构。
• 迁移语句生成：根据模式变更生成对应的数据库迁移脚本，便于版本化管理。
• 编辑器定制：主题、布局等可配置项丰富，适应不同团队的使用习惯。
• 可选共享能力：通过部署配套服务端并配置环境变量，可启用文件共享功能。

技术架构

drawDB 是典型的前后端分离应用：

• 前端：使用 React 构建界面，借助 React Flow 处理画布渲染与节点连线，通过 JSZip / file-saver 等库完成文件打包与下载。
• 构建工具：基于 Vite 进行开发与打包，启动迅速。
• 服务端（可选）：drawdb-server 单独提供，用于开启文件共享能力；本地模式下默认关闭。

本地开发

克隆项目后安装依赖并启动开发服务器：

git clone https://github.com/drawdb-io/drawdb
cd drawdb
npm install
npm run dev

开发服务器默认监听 Vite 指定端口（通常为 5173），可在浏览器中实时预览编辑效果。

生产构建

git clone https://github.com/drawdb-io/drawdb
cd drawdb
npm install
npm run build

构建产物输出至 dist/ 目录，可直接部署至任意静态托管服务（Nginx、GitHub Pages、Vercel 等）。

Docker 部署

docker build -t drawdb .      # 构建镜像
docker run -p 3000:80 drawdb  # 启动容器，宿主 3000 端口映射容器 80 端口

启动后访问 http://localhost:3000 即可使用。

环境变量与共享功能

默认情况下 drawDB 完全在本地运行，不依赖任何后端。若需启用文件共享功能，需：

1. 部署配套的 drawdb-server；
2. 在项目根目录参考 .env.sample 创建 .env 文件，填写服务端地址、密钥等配置项。

贡献指南

项目欢迎社区参与。提交代码前请阅读 CONTRIBUTING.md，了解分支策略、提交规范与代码风格要求。

社区支持

• Discord 频道：用于功能讨论、问题反馈与经验交流，开发者与活跃用户常驻其中。