企业官网建设流程全解析

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

【免费下载链接】drawdbFree, simple, and intuitive online database diagram editor and SQL generator.项目地址: https://gitcode.com/GitHub_Trending/dr/drawdb

drawDB 是一款免费的在线数据库设计工具：在浏览器里拖拽出 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 Server（MSSQL）：方括号转义等写法差异都照顾到了
• 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 全流程

一次完整的设计流程大致是这样：

1. 点「Add table」建表，在字段行里填字段名、选类型、打钩设置主键 / 唯一 / 非空 / 自增；
2. 从主键拖到外键，画布上就出现一条关系线，基数（一对一、一对多）跟着你的选择变化；
3. 觉得布局乱了，可以用自动排版把表重新理一遍；
4. 从「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