← 返回项目库

DrawDB 中文数据库图表编辑器

DrawDB 中文数据库图表编辑器源码与真实运行演示，可在浏览器中设计数据库结构、管理图表并导出 SQL。

DrawDB 是一套基于 React 和 Vite 的浏览器端数据库实体关系图编辑器。用户无需登录即可创建表、字段和关系，调整画布视图，并使用文件保存、图表克隆、图片复制与 SQL 导出等功能。本次收录保留完整源码和上游 GNU AGPL v3 许可证，默认启用中文核心界面，适合学习数据库建模工具、画布交互和前端本地数据存储的实现。

真实界面

项目截图

共 6 张

中文数据库图表编辑工作台
文件另存与多格式导出菜单
图表克隆与画布图片复制
严格模式与网格视图设置
快捷键和问题反馈入口
画布缩放与窗口自适应

Capabilities

核心功能

✓在浏览器中创建表、字段与数据库关系
✓无需登录即可使用核心图表编辑能力
✓文件另存与多格式导出操作
✓图表克隆和画布图片复制
✓严格模式、网格显示与画布视图控制
✓快捷键、问题反馈和帮助入口
✓基于 IndexedDB 的浏览器本地数据存储
✓中文界面与多语言扩展机制

适用场景

学习数据库实体关系图编辑器的源码结构
快速绘制数据库原型并生成 SQL
研究复杂画布、快捷键和菜单交互实现
为数据库设计课程准备可运行的中文示例

适合谁

数据库设计学习者、前端开发者、数据建模人员、技术培训团队，以及需要研究可视化图表编辑器实现的社群用户。

商业化思路

用于社群学习和研究数据库建模、前端画布交互、SQL 生成、多语言界面与浏览器本地存储的工程实现。

你会拿到什么

  • ✓固定提交版本的完整中文源码包
  • ✓上游 GNU AGPL v3 许可证与版权声明
  • ✓六张真实运行中文功能截图
  • ✓构建、运行、截图和生产验收记录

部署流程

  1. 1安装 Node.js 18 或更高版本并进入项目目录。
  2. 2执行 npm ci 安装锁定依赖。
  3. 3执行 npm run build 生成 dist 静态产物。
  4. 4将 dist 部署到静态 Web 服务器并为前端路由启用 SPA 回退。

真实验证结果

npm ci 与 npm run build 已通过；最终 dist 产物由候选自身服务启动并完成浏览器验收。六张截图覆盖编辑工作台、文件导出、图表克隆、视图设置、帮助入口和画布缩放，HTTP 均为 200，控制台错误、坏图、登录拦截、404、横向溢出和语义阻断均为 0。

部署前须知

本次交付验证浏览器端核心编辑能力；可选的在线分享服务不在交付范围内。GNU AGPL v3 的再分发和网络服务义务需由实际使用者按具体使用方式履行。

部署难度

简单

最低配置

Node.js 18+、npm；构建后的 dist 目录可部署到支持 SPA 回退的静态 Web 服务器。

开源许可证

GNU AGPL-3.0

最后验证

2026-08-21

技术栈

React 18Vite 6Semi UIDexie / IndexedDBi18nextSQL parser

授权说明

上游仓库提供 GNU Affero General Public License v3；源码包保留完整 LICENSE 和版权信息。修改、分发或通过网络提供修改版时，应按许可证履行对应源码提供与声明义务。

Release notes

版本记录

1 个已发布版本

va62c20d-cn.1 当前推荐

首个中文学习版本：默认中文界面，移除本地验收时无效的外部分析脚本，并完成数据库编辑器六类真实交互截图验收。

部署要求：Node.js 18+、npm；现代桌面浏览器或支持 SPA 回退的静态 Web 服务器。

已知问题：可选在线分享能力需要单独部署上游服务；本次验证和交付不包含该外部后端。

登录后领取