[JS/TS] drawdb-io / drawDB：浏览器里画ER图，这款开源工具让数据库设计变简单了

上周接手一个老项目，拿到一堆SQL建表语句，看着几十张表的关系头都大了。同事推荐了DrawDB，把SQL往里一粘，表结构和外键关系瞬间生成可视化图表，半小时就理清了整个数据库架构。

这个工具是干什么的

DrawDB是一款数据库ER图编辑器，最大的特点是打开浏览器就能用，不用下载安装任何软件。它支持MySQL、PostgreSQL、SQLite这些常见数据库，既能导入SQL生成图表，也能从图表导出SQL脚本。

项目完全开源，目前在GitHub上有3.4万多个星标，代码更新很活跃。

解决了哪些实际问题

需求评审的时候，产品经理问用户表和订单表怎么关联的，直接打开DrawDB展示可视化关系图，比口头解释清楚多了。

接手老项目时，面对几十个建表语句，把SQL导入DrawDB自动生成ER图，表结构和外键约束一目了然。

设计新数据库，不用在纸上画草图，直接在DrawDB里拖拽设计，完成后导出SQL脚本就能在数据库里执行。

主要功能

可视化设计：拖拽创建表格，添加字段，设置主键、外键、索引，操作很直观。支持添加注释，方便团队成员理解。

SQL双向转换：粘贴SQL建表语句能自动解析生成ER图；根据设计好的图表可以生成MySQL、PostgreSQL等不同数据库的SQL脚本。

多格式导出：导出JSON文件方便做版本管理，导出PNG图片可以直接放进技术文档，导出SQL脚本能在数据库中执行。

本地存储：数据保存在浏览器的IndexedDB里，不用担心隐私问题。也可以自己部署到服务器给团队用。

技术实现

项目用React和Vite搭建，代码组织得比较清晰。用SVG绘制表格和关系线，渲染性能不错。通过自定义Hooks管理图表状态，SQL解析器能识别标准的DDL语法，还支持Docker部署。

代码质量挺好的，想学React项目架构的可以看看源码。

怎么用

在线使用：访问 www.drawdb.app 就能直接开始设计

本地部署：

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

适合谁

后端开发设计数据库表结构、生成建表脚本；架构师梳理系统数据模型、绘制ER图；写技术文档时导出图片；学生学习数据库设计、理解表关系。

最后说两句

DrawDB不是功能最全的数据库设计工具，但它简单、够用、免费。日常的数据库设计工作基本都能覆盖。

更重要的是它开源，可以看源码学习，可以提交代码贡献，可以私有化部署。

---

关注《云栈开源日记》，每天发现实用开源项目

📦 项目地址：https://github.com/drawdb-io/drawdb
🌐 在线体验：https://www.drawdb.app
📄 数据库教程：https://yunpan.plus/t/39-1-1
📄 前端教程：https://yunpan.plus/t/32-1-1

标签：#DrawDB #GitHub #数据库设计 #ER图 #开源工具 #React #前端开发