上周给一个交接了五年的老项目补数据库文档光是建表语句就翻得头大我第一反应还是打开Navicat这类客户端工具。结果公司新配的笔记本有软件安装白名单连数据库客户端都装不上。没辙只能把目光转向Web端可用的ER图设计工具不用装客户端、浏览器打开就能画、能导入导出SQL而且要开源免得动不动就弹授权。市面上这类工具我基本都试了一遍长期留在手边的有三款——DrawDB、ChartDB、WWW SQL Designer。这篇文章就把它们分别怎么部署、怎么画图、有哪些坑一次性说清楚。1. 为什么我放弃了桌面客户端把 ER 图搬进浏览器1.1 桌面端三个我忍了很久的痛点先说我自己碰到的实际情况。以前画数据库ER图桌面工具是主流Navicat、DataGrip、PowerDesigner、MySQL Workbench我用过好几款。它们有个共同问题要先装软件。这个先装软件在个人电脑上不是事但在公司环境里很麻烦。研发团队经常换人新同学入职要配数据库工具客户端要一个个装内网和公网环境隔离有些工具还要配代理才能连通数据库更头疼的是授权Navicat正版授权不便宜项目组规模一大费用就上去了。第二痛点是跨设备。我在工位电脑上画好的ER图回家或者出差用笔记本没法直接打开。一旦换电脑又要重新装、重新连、重新调效率损耗很大。第三痛点是团队协作。表结构评审的时候传统做法是把ER图截图或者导出成PDF发到群里评审意见满天飞改一版图就要重新截图非常痛苦。如果能让参与的人直接打开浏览器看到同一张ER图讨论会顺畅很多。1.2 Web 端开源工具带来的变化Web端ER工具能解决上面几个问题核心在于它把工具和图分开了。工具跑在浏览器里不需要安装客户端图可以导出成文件或者用链接分享协作成本一下就降下来了。开源的好处则在于两点一是免费、没有授权风险二是可以私有化部署到内网环境。很多公司内部数据库是隔离的外网工具连不进来用开源项目自己搭一套Web服务刚好能解决这个合规问题。1.3 我说的Web 端开源筛选标准是什么开源ER图工具其实不少但很多项目只是把桌面版做成了网页壳画图体验非常差。我筛选时主要看四条代码仓库确实开源有活跃的维护记录而不是挂在GitHub上两三年不更新的空壳。能通过浏览器完整走完建表 - 建关系 - 导出SQL的全流程而不是只能看不能改。支持导入已有数据库结构方便反向画图这个对老项目特别重要。可以私有化部署而不是必须依赖厂商的SaaS在线服务。按这个标准从十几款工具里筛下来DrawDB、ChartDB、WWW SQL Designer是现阶段我真正长期在用的三款。提示如果你只是临时画一张草图其实没必要部署任何东西直接用后面提到的在线Demo页面就够了。2. DrawDB纯前端架构一条命令就能跑起来的入门首选2.1 项目概况与技术栈DrawDB是GitHub上一个很火的开源项目仓库名是drawdb-io/drawdb主打浏览器里的数据库ER图编辑器。整个项目基于React前端SPA数据存在浏览器localStorage里不需要任何后端服务。这一点对部署非常友好。你clone下来、npm install、再npm run dev就能以开发模式跑起来要部署到服务器构建静态文件丢到Nginx里就能对外提供服务。因为它是纯前端服务器上连数据库都不需要装。2.2 从零部署到画完第一张 ER 图我拆一遍实际部署步骤。前提是本地已经装好Node.js推荐18或20版本再装好git。git clone https://github.com/drawdb-io/drawdb.git cd drawdb npm install npm run dev启动后浏览器打开 Vite 输出的那个本地地址通常是http://localhost:5173。没有后端服务所以没有登录、没有环境变量配置零配置直接进编辑器。进去之后界面非常简洁左侧是表列表中间是画布右侧是属性面板。画ER图的完整流程可以分成四步新建项目时先选数据库类型。DrawDB支持MySQL、PostgreSQL、SQLite、MariaDB、SQL Server、Oracle等选对方言后面导出的SQL语句才会准确。在画布上新建表填写表名、字段名、字段类型、是否主键、默认值、备注。用鼠标从一个表的主键拖到另一个表的外键关联关系会自动生成成一条连线。画完点Export可以导出SQL建表脚本或者JSON格式的模型文件。以MySQL为例导出SQL大概长这样CREATE TABLE user ( id int NOT NULL AUTO_INCREMENT, username varchar(64) NOT NULL, email varchar(128) DEFAULT NULL, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;2.3 实测体验与我最常用的一个小功能我用它给一个有20多张表的新模块建过模型整体体验是画布交互很接近现代设计工具拖拽、缩放、框选都流畅右侧属性面板里字段信息可以批量编辑支持往表里加索引和备注这在评审时很有用。个人最喜欢的一个小功能是从SQL导入的时候DrawDB会把外键关系一起解析出来。之前我接手过一个手写了200行建表SQL的老库用导入功能直接生成ER图至少省了我一个下午。2.4 局限与我的应对方式DrawDB的局限也很明显。第一数据存在浏览器localStorage里换浏览器或者清理缓存容易丢所以我习惯画完就导出JSON文件存档。第二几百张表的大项目画布渲染会有卡顿需要拆模块分图处理。第三没有用户体系多人同时编辑同一张图是不支持的团队协作能力约等于零。因此这支工具更适合个人开发者、小团队在项目早期画模型或者快速把零散SQL变成结构图。3. ChartDB反向梳理存量数据库它的导入能力是杀手锏3.1 项目定位为已经有库需要画图的人而生ChartDB是后来才火起来的项目仓库名叫chartdb/chartdb社区热度上升很快。它的核心场景和DrawDB不一样DrawDB更擅长从零新建模型ChartDB则主攻从已经存在的数据库反向生成ER图。这几年业务系统越叠越厚很多老库根本没人维护ER图全靠翻建表语句猜关系。ChartDB的导入功能正好解决这个痛点它支持通过数据库连接串直接读取Schema也可以粘贴SQL导入然后自动生成可视化的ER图。3.2 Docker Compose 部署与连接配置ChartDB提供Docker镜像部署非常简单。先准备docker-compose.ymlservices: chartdb: image: chartdb/chartdb:latest ports: - 8090:8090 environment: - LAN_ADDR8090然后执行docker compose up -d浏览器打开http://localhost:8090。首次使用会让你选择导入方式支持PostgreSQL、MySQL、SQL Server、SQLite、MariaDB等常见数据库。连接远程MySQL的话要填主机、端口、用户名、密码、数据库名还要注意SSL模式的配置。我在内网连一个MySQL 5.7实例时就遇到过因为SSL参数不对导致的握手失败改成DISABLED模式才连上。3.3 连接生产库前必须做的安全准备用ChartDB连生产库的时候一定要用只读账号。它不是设计来写库的工具正常情况下只读取表结构和字段定义但万一操作失误或者工具自身有bug风险不可控。我自己的习惯是先在测试环境复制一份生产Schema拿这份复制去画图如果确实需要连接生产环境账号只授予SELECT权限并且限制只允许访问information_schema和要看的业务库。连接串示例mysql://er_readonly:xxxxxx10.20.30.40:3306/legacy_oms这里密码建议用xxxxxx代替真实环境请换成随机生成的强密码不要复用管理员凭证。3.4 实际导入与布局体验实际体验下来ChartDB对中大型库的展示效果确实比DrawDB好。它有自动布局算法表之间的外键关系会尽量拉成直线减少交叉线。我导入过一个80多张表的订单系统出来的图虽然还是需要手动微调但已经能直接拿去评审了。另外它内置了AI辅助能力比如选中一个表可以用自然语言生成SQL查询、生成ERD描述文档等。这个属于锦上添花但确实能在画完图之后顺手写说明文档省不少事。局限是在线版是托管服务需要登录私有化部署的Docker镜像是社区版部分高级功能有限制。不过对画ER图这个核心需求来说社区版完全够用。4. WWW SQL Designer一个 HTML 文件打发的极简工具4.1 项目介绍与它能活到现在的原因WWW SQL Designer是一个非常老牌的开源项目作者是Ondřej Žára。它的理念和前面两款完全不同整个工具可以打包成一个纯HTML文件浏览器双击打开就能用连本地Web服务器都不需要。第一次打开它的界面你会觉得回到了十年前的网页风格但用下来会发现功能一点不少。它支持MySQL、PostgreSQL、Oracle、SQL Server等多种数据库方言画图时生成的DDL语句会按方言格式化输出。4.2 离线使用与基本画图流程懒人用法是直接打开项目的GitHub Pages在线版但更推荐下载整个仓库找到dist目录下的HTML文件本地打开。因为它是纯静态实现离线、断网都能正常工作这在内网研发环境里非常重要。打开后界面分成中间画布、左侧工具栏、下方关系面板几个区域。顶部选择数据库类型然后从左侧工具栏拖一个表对象到画布双击进入编辑状态添加字段名、类型、长度、是否为空、主键、默认值等。表之间画连线用的不是拖拽而是用工具栏上的关联按钮从一个字段拖动到另一个字段关系类型一对多、多对多可以在面板里设置。4.3 SQL 生成与编码注意画完之后在菜单栏的SQL选项里可以生成建表语句也可以生成带外键约束的完整DDL。生成的SQL可以直接拿到数据库客户端执行。一个需要注意的点是WWW SQL Designer的编辑器对中文支持不算好字段注释里如果带中文导出后有时会变成乱码。我的处理方式是导出SQL后用VS Code手动转成UTF-8再执行或者在画图时就尽量用英文注释最后统一补中文文档。4.4 什么场景下我会专门用它虽然界面老但我个人仍然在某些场合专门用WWW SQL Designer比如在完全没有外网的隔离环境里想快速把需求文字转成表结构草图或者给不懂数据库的新同学演示什么是主键、外键、关系基数因为它的界面足够简单不会被一堆复杂功能干扰。5. 一张横评表看懂三款工具怎么选5.1 三条核心参数对照把三款工具放在同一张表里选型逻辑会清晰很多。对比项DrawDBChartDBWWW SQL Designer部署方式纯前端静态站点Docker / 托管单HTML文件是否需要后端不需要需要Docker容器不需要支持数据库MySQL、PG、SQLite、SQL Server、Oracle等MySQL、PG、SQL Server、SQLite等MySQL、PG、Oracle、SQL Server等核心画图能力从零建模、SQL导入导出从数据库反向导入、自动布局从零建模、SQL生成多人协作不支持部分云版本不支持离线可用是否是学习成本低中非常低最适合场景新项目快速建模存量库反向梳理极简/离线环境5.2 不同角色按需求对号入座如果你是一个后端开发手头新项目刚立项数据库结构还在一张白纸阶段DrawDB最合适。它画图流畅导出的SQL基本可以直接用不用额外装客户端。如果你是DBA或者要接手一个老系统面对几百张表没有文档别犹豫直接上ChartDB。它能通过连接串把整库Schema拉到图表里然后自动布局这是它最值钱的能力。如果你处在网络环境非常封闭的研发区域或者只是想随手画两张表给同事看那WWW SQL Designer的单文件设计天然有优势U盘里拷个HTML就能跑。5.3 如果只能长期留一款三个选项各有边界但如果非要我长期只留一款我选DrawDB。理由很简单纯前端部署最省心主流数据库方言都支持导入导出逻辑成熟日常70%的ER图画图需求它都能覆盖。ChartDB则在我需要反向梳理存量库时再启用。我现在的实际工作流更像是DrawDB为主、ChartDB为辅、WWW SQL Designer兜底的组合。6. Web 端 ER 图工具绕不开的四个坑6.1 表一多就卡渲染性能的极限第一个坑是渲染性能。DrawDB在画布上拖到两三百张表时节点渲染开始明显卡顿缩放和拖拽都发飘。ChartDB表现稍好但导入千表级别Schema时布局计算也要等一会儿。解决办法很直接拆模块画。把数据库按业务域拆成多个ERD文件比如订单域一张图、用户域一张图而不是试图把全库塞进一张画布。需要全局视图时再用数据库自带的信息架构工具做总览图Web工具负责局部详图。6.2 连线绕成蜘蛛网外键自动布局第二个坑是外键连线。Web端工具自动布局算法参差不齐表一多连线就会交叉成蜘蛛网图根本没法看。我的做法是在DrawDB里手动把相关业务表拖到同一块区域形成视觉上的域再把不重要的关系暂时隐藏只保留核心外键导出的图才看得下去。ChartDB的自动布局比DrawDB好但大库导入后也建议先按Schema分组调一轮。6.3 中文注释乱码编码的锅第三个坑是中文。数据库里字段注释大多有中文导入导出时容易乱码。问题大多出在编码上而不是工具本身。以ChartDB连接MySQL为例连接参数里要指定characterEncodingutf8否则读到表注释时常常出现问号。WWW SQL Designer导出SQL后用编辑器转成UTF-8再执行。总之碰到乱码先检查编码不要急着怪工具。6.4 浏览器直连数据库的安全边界第四个坑是安全边界。DrawDB是纯前端它如果要直连数据库相当于把数据库口令暴露在浏览器环境里非常危险。实际上DrawDB本身并不直接执行远程连接它依赖导入SQL或JSON文件反而是安全的。而ChartDB的Docker实例在连接数据库时连接串是交给后端服务的相对安全。但不管用哪款我都建议用只读账号、限制来源IP、不填管理员凭证。我见过有人把生产数据库的管理员账号明文填到在线SaaS工具里做逆向那基本等于把数据库大门钥匙交出去了。工具本身的代码可能没问题但使用习惯一旦放松迟早出事。我现在的固定工作流基本是这样新项目建模直接开DrawDB两三天就能把模块表结构捋顺碰到需要逆向补文档的老库再启动ChartDB至于隔离内网里的临时讨论WWW SQL Designer随手打开就能用。工具不在多选一款能长期留在工作流里的比什么都重要。
