在开发者社区里“Drop a SQL schema, get an interactive ER diagram” 这类工具经常出现。它的核心价值很直接把一段 CREATE TABLE 语句丢进去就能得到一张可以交互查看的实体关系图。SQL schema 转成 ER 图是数据库文档、表结构评审、新同学接手项目、慢 SQL 分析时最常见的需求之一。手工画 ER 图有两个明显痛点表一多就费时间表结构一变图就过期。更合理的方式是让 DDL 成为唯一设计输入自动解析出表、字段、主键和外键再渲染成交互式 ER 图。这篇文章按这个思路实现一个最小可运行项目后端接收 SQL Schema解析后返回节点和边前端用 vis-network 展示可拖拽、缩放、点击查看的 ER 图。读完可以直接跟着跑一遍也可以把其中的解析逻辑换成更完整的 SQL 解析器扩展成生产工具。1. 先拆解需求从 SQL Schema 到交互式 ER 图分了几层1.1 SQL Schema 能提供哪些 ER 图素材一张 ER 图要表达的信息在 SQL 的 DDL 里大部分都能找到。最基础的是表名和字段列表。CREATE TABLE users (id INT PRIMARY KEY, ...)已经包含了表名users和字段id的信息。字段类型、是否为空、是否唯一、默认值通常也写在列定义里。主键可能直接写在列上也可能写成表级PRIMARY KEY (id)。外键关系一般出现在FOREIGN KEY (user_id) REFERENCES users(id)这是 ER 图中“关系”的核心来源。所以从技术任务来看解析 SQL Schema 本质上要做两件事第一把表以及表中的字段信息提取成结构化数据第二把外键约束提取成ER图里的连线。如果 DDL 里有注释还可以把注释作为字段描述展示在图中让 ER 图兼任数据字典。这带来的一个额外好处是不需要连接数据库只要有一份 migration SQL 或表结构 SQL就能生成文档。很多项目会把 schema 存在版本控制里这让 ER 图可以跟着代码走不会因为有人手工更新数据库而产生偏差。1.2 为什么要选择交互式 ER 图而不是静态图静态 ER 图适合打印或者直接放进文档但查问题的时候非常不方便。表一多视觉上很难找到某个具体表想看字段内容图上的字要么太小要么看不清。交互式 ER 图则可以解决这几种问题可以拖拽节点按自己的关注点重新布局。可以缩放从整体关系切到局部字段。点击