最近帮朋友弄一个数据库课程设计表建了一堆外键理得七零八落交作业之前必须得画一张像样的ER图附在文档里。我第一反应是装个PowerDesigner一看授权和安装包直接劝退又试了Navicat的ER图功能倒是不错但那个版本得单独准备而且整套软件对只是画图的需求来说实在太重了。后来我索性换个思路既然只是为了画ER图、梳理表关系为什么非得依赖桌面端工具Web端、开源、免费能直接打开浏览器就用不是更省事吗顺着这个方向筛了一圈发现市面上真正靠谱、能在浏览器里完成核心工作的开源ER图设计工具还真不少。但每个工具的定位差异挺大有的是通用画板走手绘反向导入路线有的是自动生成静态文档有的是代码即图表。今天把我实际用过、觉得最值得留下的三款工具一次性说清楚包括它们各自适合什么场景、怎么上手、有哪些坑希望对你选型有帮助。1. 为什么我找了一圈Web端数据库ER图工具想画ER图很多人第一反应是PowerDesigner、Visio这些传统桌面软件。PowerDesigner功能确实全面但授权费用高、安装体积大、界面老气对于只画几张ER图的人来说有点杀鸡用牛刀。Navicat的ER图功能被不少人推荐实测也确实好用但它的完整体验依赖于桌面客户端和特定版本而且整体定位是数据库管理工具为了画图装一整套软件总觉得不划算。更重要的是现在很多人有跨设备、多人协作、快速交付的需求。比如我在公司要看同事建的表结构或者在宿舍换了台电脑想继续画课程设计的那张图如果工具是纯Web端的打开浏览器登录就能继续省去了安装环境的折腾。这也是我把筛选条件定为Web端可用开源的原因。基于这个前提最终长期留下来的三款工具是工具定位Web端形态强烈推荐场景draw.iodiagrams.net通用开源绘图工具在线版/自托管部署手工设计表结构、精修ER图布局SchemaSpy数据库结构自动化文档工具生成HTML站点用浏览器查看整库逆向生成ER关系文档、数据字典Mermaid基于文本的图表渲染引擎mermaid.live在线编辑器/嵌入Markdown快速画简单ER图、嵌入开发文档三款工具的分工很明确draw.io适合当画板用想怎么摆放就怎么摆放SchemaSpy适合自动生成一条命令把数据库翻成一套可视化文档Mermaid适合顺手记录写README或技术方案的时候顺便塞一段ER图代码进去。它们的开源协议也都很友好大家可以放心用。2. draw.io既能手绘也能反向导入的通用ER图画板2.1 两种常见用法从零手绘和从SQL导入draw.io现在叫diagrams.net是老牌开源绘图工具Apache 2.0协议完全免费。浏览器直接打开app.diagrams.net就能用也可以部署到自己的服务器或者集成到Nextcloud、Confluence这类系统里。在ER图这个场景下它有两种主流用法。第一种是当画板用从左侧图形库拖出矩形、菱形、连线手动标注实体、属性和主外键关系。这个方式适合从零开始设计一张新表结构自由度最高画出来的图也最利于排版。draw.io左侧专门提供了数据库相关的图形库和实体关系模板比如crows foot风格的关系线、带主键小钥匙图标的实体框等基本覆盖了ER图常用的符号体系。第二种是从SQL脚本自动生成图形。这个功能非常实用很多人可能不知道。路径是菜单栏的Arrange - Insert - Advanced - From SQL会弹出一个对话框把CREATE TABLE语句粘贴进去draw.io会解析表结构和外键关系自动生成对应的实体框和关系连线。我实际测试过几十张表的结构脚本粘贴进去生成速度很快生成的连线虽然需要手动调整一下排版但表结构、字段、主外键标识都是准确的比自己拖拽省太多事。2.2 从数据库获取结构的关键步骤如果不想复制SQL脚本draw.io还支持直接连接数据库反向导入。在之前的From SQL对话框里可以选择Database连接方式配置数据库类型MySQL、PostgreSQL、SQL Server等、主机地址、端口、库名和账号密码连接成功后选择要导入的表工具会批量生成对应的实体和关系。这里有几个实际操作用的细节提取SQL时要把键、索引、默认值都选上不然生成出来的实体框字段属性不够完整后面还得手动补。draw.io解析SQL时依赖注释和约束声明建议原表结构脚本里都带上PRIMARY KEY和FOREIGN KEY关键字解析出来的关系连线才完整。自动生成的图形排列会有点乱表多的时候可以全选后使用Arrange - Layout里的布局算法自动整理一下能省不少时间。2.3 实际使用感受和注意点draw.io对ER图绘制的支持已经很成熟但有几个经验值得分享。一个是连线吸附问题。默认情况下连线端点会自动吸附到图形边框最近的位置这在ER图里有时候会造成关系线指到错误的属性附近。解决办法是右键点击连线端点选择固定连接点或者直接用方向键微调连线路径。尤其是外键比较多的时候连线交叉严重建议适当调整实体框的摆放位置尽量减少交叉线图面会更清爽。第二个是属性信息的管理。draw.io每个图形元素都可以在右侧属性面板里加自定义属性我习惯把字段类型、长度、是否可空、默认值这些信息都写在属性里。这样做有两个好处一是图面上可以显示关键的字段类型别人看图更直观二是导出的XML文件里会保留这些信息后续二次编辑不会丢失。第三个是导出格式。draw.io支持导出PNG、SVG、PDF、HTML等多种格式课程设计或毕业论文里插ER图建议导出矢量格式SVG放大也不会模糊如果要放进Word文档导出高DPI的PNG更稳妥。注意导出时在选项里把包含背景、透明背景等参数调好。有一点必须提醒draw.io虽然有在线协作的雏形但它不是专注实时多人协同的工具下图对象没有传统意义上的多人同时编辑同一个白板体验更多是基于文件的分享和版本管理。如果团队需要实时协作可以考虑自己部署一个draw.io服务配合网盘或代码仓库使用。3. SchemaSpy一条命令把整个数据库变成可视化文档3.1 工作方式和原理如果你需要的是自动化生成数据库文档而不是手动画图SchemaSpy是我用下来最顺手的开源工具。SchemaSpy是Java编写的命令行工具核心原理是读取数据库的系统表、元数据信息反向分析出表结构、字段、主外键、索引、视图等关系然后渲染生成一套静态HTML站点。这套站点用浏览器打开后左侧是表列表右侧是每张表的字段明细、类型、约束还有一张SVG格式的ER关系图整库的表关系一目了然。它和draw.io的本质区别在于draw.io是画板需要人参与绘制SchemaSpy是文档生成器数据结构和关系图是自动生成的你不需要手动拖任何一个框。所以SchemaSpy特别适合做数据库基线文档、数据字典以及给团队提供一个在线的数据库结构查阅入口。3.2 实际命令和效果使用SchemaSpy需要提前准备Java运行环境同时下载对应数据库的JDBC驱动。以MySQL为例常用命令长这样java -jar schemaSpy_6.0.0.jar -t mysql \ -dp /path/to/mysql-connector-java.jar \ -host localhost -db mydb -u root -p password \ -o /output/html参数含义很直白-t指定数据库类型-dp指定JDBC驱动路径-host是数据库地址-db是目标库名-o是输出目录。执行完成后到输出目录打开index.html就能看到整库的结构文档和ER图。生成结果我实际打开看过SVG格式的ER图可以缩放查看不同表通过外键形成的关联线非常清楚。每张表的详情页还罗列了字段名、类型、是否为主键、是否可空、默认值等信息比在Navicat里一个个点开表看高效得多。对数据字典编制、数据库迁移、系统交接来说这个文档就是一份现成的交付物。3.3 典型使用场景和注意事项我最常用的场景有三个一是项目交付时出具数据库设计文档直接挂到内网Wiki或Tomcat下给大家在线查阅二是在开发迭代过程中定期跑一次SchemaSpy把最新的表结构变更沉淀成文档比维护手工文档省事三是团队新成员熟悉业务数据模型时打开这个HTML就能快速了解表之间是什么关系。使用中有几个容易踩的坑JDBC驱动版本要和数据库版本匹配。尤其是MySQL 8以后驱动类名和认证方式有变化如果连接报错优先检查驱动坐标和URL参数。中文乱码问题。如果表结构包含中文注释生成出来的HTML页面上会有乱码这个大概率是连接字符集问题。在命令里加上-connprops useUnicode\\true或characterEncoding\\utf8就能解决。大库生成时间。几百张表的库生成时间通常几十秒到几分钟不会太久。如果碰到特别大的库可以考虑只针对部分schema执行或者用-schema参数指定范围。只读文档不要当画板用。SchemaSpy生成的HTML是不可编辑的它的定位是结构展示和文档化。如果发现某个关系画得不理想应该去修改数据库定义而不是纠结于文档本身。4. Mermaid代码即图表的轻量ER图方案4.1 ER图语法速览Mermaid是近两年非常火的开源图表工具它的核心思路是用简单的文本语法描述图表结构然后渲染成图片。因为本质是纯文本天然适合嵌入到Markdown文档、代码仓库、Wiki页面里不少开发者在写技术方案或接口文档时都会顺手塞一张Mermaid图。好消息是Mermaid同样可以绘制ER图而且完全Web端可用。Mermaid的ER图语法非常简洁。看一个实际例子erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ ORDER_ITEM : contains PRODUCT ||--o{ ORDER_ITEM : includes这段代码表示CUSTOMER客户实体和ORDER订单实体之间存在一对多关系ORDER和ORDER_ITEM之间是一对多强关系PRODUCT和ORDER_ITEM之间也是一对多关系。符号说明||--o{表示一对多的可选关系||--|{表示一对多的强制关系冒号后面的文本是关系说明比如places表示客户下单定义实体的字段时可以这样写erDiagram CUSTOMER { int customerId PK string name string email } ORDER { int orderId PK int customerId FK date orderDate } CUSTOMER ||--o{ ORDER : placesPK和FK会自动渲染成对应的主键、外键标识非常直观。而且Mermaid的ER图还支持设置字段的数据类型显示对于快速表达模型结构来说完全够用。4.2 在线编辑器与文档嵌入方式Mermaid的Web端入口是mermaid.live左侧写代码右侧实时渲染效果不需要安装任何东西。代码写好后可以直接导出PNG或SVG也可以把代码块复制到支持Mermaid渲染的文档平台里。在实际工作流中我比较常用的几种嵌入方式GitHub/GitLab的Markdown文档在.md文件的代码块里标注mermaid语言类型平台会自动渲染成图表。技术方案、数据库设计文档里随手画一张ER图非常方便。语雀、飞书、Confluence等在线文档这些平台基本都内置了Mermaid渲染支持选择图表类型或代码块即可。自建Web服务Mermaid本身是JavaScript库如果想在内部系统里嵌入ER图直接引入mermaid.js就能实现渲染。4.3 什么时候用Mermaid最合适Mermaid最适合的场景是快速表达不追求精美排版。比如你在写一篇技术博客讲解表结构或者在GitHub上给开源项目写README说明数据模型用Mermaid代码块几行就能出一张ER图干净又省事。但它的短板也很明显复杂结构的排版能力有限。实体一多、关系一密Mermaid自动布局出来的连线可能乱成一团而且可调参数不多不容易做出特别精细美观的图。所以我的建议是简单的ER图、需要嵌入文档的ER图用Mermaid复杂模型、需要交付给外人看的精美图纸交给draw.io这种画板工具。5. 三款工具的同台对比与选型建议把这三款放在一起看各自的边界和优势就很清楚了。对比维度draw.iodiagrams.netSchemaSpyMermaid部署方式Web在线版/自托管Java命令行生成静态HTML网页端/嵌入式渲染操作方式图形拖拽为主全自动生成书写文本代码上手成本低拖拽即可中需配置Java/JDBC低记住少量语法自动化程度中支持SQL导入但没有全自动高一条命令生成整库文档中需手动写代码适合场景交互式设计、绘图交付数据库文档化、数据字典文档嵌入、快速展示对数据库的依赖可选必须连接目标数据库不需要开源协议Apache 2.0Apache 2.0MIT偏离画板能力强可自由排版弱只读展示弱自动布局选型上我个人的经验是如果你在做一个数据库课程设计或者毕业设计最终要交一张和别人讲解的ER图纸直接选draw.io自己拖一拖、排排版效果最可控如果你在维护一个老系统、连数据库表结构都记不清了想快速摸清全貌并生成一份团队能看的数据库结构文档SchemaSpy是最省力的如果你是在写技术方案、做代码评审或者维护开源项目想在文档里附带一段清晰的ER图Mermaid一行代码就能搞定。顺带说一句具备相近思路的开源项目还有一些比如dbdiagram.io采用的也是DSL方式建模不过是闭源在线服务dbdocs之类的工具也有类似设计但同样不是开源自托管方案。如果想完全掌控数据和隐私自托管draw.io或Mermaid是更稳的选择。至于那些标榜免费但核心闭源的在线ERD工具导入导出格式和数据安全性往往有限制选型时一定要看清楚授权条款。写在最后三款工具组合起来才是完整方案我现在的固定习惯是写博客和README里的ER图用Mermaid几行代码维护方便需要交付数据库结构文档或者给团队搭一个查表结构的入口用SchemaSpy自动生成而真正要动脑子设计新表结构、梳理外键关系、向别人完整展示设计思路的时候打开draw.io认真画一张。三款工具覆盖了从画图到自动生成再到文档嵌入的完整链路全部开源、Web端可用基本告别了对桌面端收费软件的依赖。数据库结构本质上是一个项目的骨骼ER图只是把骨骼画出来给人看。工具选得趁手这件事就会轻松很多。