drawDB：在浏览器里完成数据库设计，三步拿到可执行 SQL

drawDB在浏览器里完成数据库设计三步拿到可执行 SQL【免费下载链接】drawdbFree, simple, and intuitive online database diagram editor and SQL generator.项目地址: https://gitcode.com/GitHub_Trending/dr/drawdbdrawDB 是一款免费的在线数据库设计工具在浏览器里拖拽出 ER 图它自动帮你生成对应数据库的 SQL 脚本。这篇文章从本地运行讲起带你看清它支持哪些数据库、能导出哪些格式、适合哪些场景以及它和手写 DDL 的差别到底在哪。场景开场订单库要从 MySQL 迁到 PostgreSQL先别急着敲 DDL想象一下这个画面你的订单库跑在 MySQL 上现在要迁到 PostgreSQL。传统做法是打开命令行对着几十张表手写CREATE TABLE再一条条补上外键、索引和类型转换。写错一个引号、漏一个NOT NULL就得回头重改更麻烦的是MySQL 和 PostgreSQL 在类型和约束上的习惯并不一样手工切换方言很容易踩坑。drawDB 想解决的就是这一步。它把「画数据库」和「写 SQL」合并成一件事你在画布上摆好表、连好关系、填好字段类型选一个目标数据库它就能把整张图翻译成可以直接跑的建表脚本。换句话说你负责表达设计意图它负责把方言细节补齐。浏览器里 3 分钟跑起来drawDB 使用教程drawDB 是一个纯前端项目本地跑起来只需要 Node 环境不需要安装任何客户端。把仓库克隆下来装依赖然后启动开发服务器即可git clone https://gitcode.com/GitHub_Trending/dr/drawdb cd drawdb npm install npm run dev启动后在终端提示的地址默认是 Vite 的本地开发端口打开浏览器就能开始画不需要注册账号。如果你的机器不方便装 Node也可以用 Docker仓库里的Dockerfile已经把构建过程打包好docker build之后再docker run映射端口即可。想开多窗口或团队协作分享可以按仓库里的可选配置再接一个后端服务但这是可选项个人使用完全不需要。drawDB 支持哪些数据库六大方言加通用很多工具只认一种数据库drawDB 把主流方言都做了一对一适配MySQL / MariaDB支持UNSIGNED无符号类型等细节PostgreSQL支持自定义TYPE、ENUM和数组类型SQLite轻量场景类型映射做了简化SQL ServerMSSQL方括号转义等写法差异都照顾到了Oracle SQL目前标注为 beta通用Generic不绑定具体引擎时使用的通用写法这些适配不是简单换模板。每种数据库在src/utils/exportSQL/下有各自的生成器mysql.js、postgres.js、sqlite.js、mariadb.js、mssql.js、oraclesql.js共用的转义、注释、约束逻辑抽在shared.js。字段类型定义集中在src/data/datatypes.js内置了数十种常用类型并按数据库区分。它凭什么比传统做法强同一张图你只是把右上角的目标库从 MySQL 切到 PostgreSQL导出的脚本就会跟着换写法不用重画也不用自己记方言差异。从建表到导出 SQL 全流程一次完整的设计流程大致是这样点「Add table」建表在字段行里填字段名、选类型、打钩设置主键 / 唯一 / 非空 / 自增从主键拖到外键画布上就出现一条关系线基数一对一、一对多跟着你的选择变化觉得布局乱了可以用自动排版把表重新理一遍从「Export as」里挑格式导出。导出这一步是它的重点除了各数据库的 SQL还能导出DBML、Mermaid 流程图和文档方便贴进代码库或评审文档。如果你要改已有库迁移脚本由src/utils/migrations/diffToSQL.js负责——它会对比两个版本的差异只生成ALTER/ 增删字段这类变更语句而不是一整份重建脚本。它凭什么比传统做法强手写迁移脚本时「改了哪张表、哪一列」全靠自己脑子和 diff 工具drawDB 直接按两版模型做差异比对变更语句自动生成。模板与版本让设计可复用、可回退drawDB 内置了 6 个起步模板放在src/templates/目录里覆盖常见的业务骨架比如「用户—文章」这种基础关系模型。从菜单里选「Save as template」也能把自己常用的模型存下来复用。除了模板它还有一组「不丢工作」的机制所有改动会自动存进本地存储顶部时间轴能回滚到任意历史版本还可以给某个节点打版本标记。对一个人来说是「反悔键」对团队来说则是「留痕」。它凭什么比传统做法强桌面工具或在线白板常常要手动存盘而且很少做版本管理drawDB 把自动保存和回滚做到了默认开启。谁在用它三个真实使用场景独立开发者在为一个小程序设计后端把用户、订单、商品几张表先在 drawDB 里画出来确认关系没问题后再导出 PostgreSQL 脚本直接跑少了一轮「边写 SQL 边发现少个字段」的返工。教学场景老师想给学生一个直观的例子在浏览器里打开 drawDB把关系型设计的概念用连线讲清楚学生在同一张图上改字段、加表比只盯着屏幕上的 DDL 更容易建立直觉。接手遗留系统的人把老库里导出的 SQL 导入 drawDB生成一张可视化模型先看懂结构再决定怎么改比直接读几百行脚本更省事。技术底子点到为止drawDB 用 React 18 Vite 8 Tailwind CSS 4 搭建是典型的现代前端栈。几个和体验直接相关的点本地存储用 IndexedDB通过 dexie 封装所以模型数据都留在你的浏览器里不依赖后端拖拽基于 dnd-kit自动排版借 dagrejs/dagre 计算布局SQL 解析用到 node-sql-parser 和 oracle-sql-parser导入 SQL 时能把它还原成模型模块化清晰画布组件在src/components/EditorCanvas/全局状态分散在src/context/的各个 Context 里语言包放在src/i18n/locales/覆盖 50 多种语言。想扩展新数据库基本就是照着src/utils/exportSQL/里现有生成器的样子加一个文件门槛不高。用数据说话效果如何关于「快了多少」我不想给你一个精确到个位数的假数字。从社区反馈和项目体验分享来看量级大致是这样一套中型模型的设计时间通常能从「手写脚本要数小时」压缩到「画一画就十几分钟」这个量级因为脚本由工具生成方言和语法层面的低级错误明显变少导出文档替代手写的说明从「攒一晚上」变成「几分钟」。以上为量级描述来源是社区反馈与项目文档具体数值因模型复杂度而异仅供参考。从打开浏览器到拿到脚本今天就试试drawDB 把「数据库设计」这件容易又累又容易出错的事变成了一段可以在浏览器里直接完成的操作跑起来、画起来、导出 SQL中间不用装客户端、不用注册。如果你正要在两种数据库之间切换、想把老库的结构讲清楚或者只是想找一个比手写 DDL 省心的画图工具不妨先在本地把它跑一遍用你自己的真实模型试一把。【免费下载链接】drawdbFree, simple, and intuitive online database diagram editor and SQL generator.项目地址: https://gitcode.com/GitHub_Trending/dr/drawdb创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考