浏览器端 SQL 解析与 ER 图渲染：零上传架构的工程实践

在数据 schema 可视化领域，传统的 ER 图生成工具往往依赖服务端处理：用户上传 SQL 文件，服务器解析后返回渲染结果。这种模式虽然实现简单，却带来了隐私泄露风险和部署复杂度。近年来，纯浏览器端的 SQL 解析与 ER 图渲染方案逐渐成熟，实现了 "数据零上传" 的架构目标。

零上传架构的核心价值

零上传架构意味着用户的 SQL Schema 从始至终不会离开本地浏览器。这种设计在隐私敏感场景（如企业核心数据库结构分析）中具有不可替代的优势。技术实现上，它要求所有计算密集型任务 —— 包括 SQL 语法解析、抽象语法树（AST）遍历、图形布局计算 —— 都必须在客户端完成。

这一架构的关键在于合理分配计算负载。SQL 解析器需要处理多种方言的 CREATE TABLE 和 ALTER TABLE 语句，提取表名、列定义、主键、外键及约束信息；图形引擎则需要将解析结果映射为可交互的节点和边，并处理拖拽、缩放、导出等用户操作。

客户端 SQL 解析的技术选型

浏览器端 SQL 解析面临的核心挑战是方言多样性和语法复杂度。主流方案包括纯 JavaScript 解析器和 WebAssembly 方案两类。

纯 JavaScript 方案以 node-sql-parser 为代表，它通过 npm 提供浏览器兼容的 ESM 构建版本。该库支持 MySQL、PostgreSQL、SQLite、SQL Server 等主流方言，能够生成标准化的 AST。对于 DDL 语句，AST 节点包含表名、列数组、约束定义等结构化信息，便于后续遍历提取。其优势在于无需额外加载 WASM 模块，首屏加载更快；劣势是包体积较大（约数百 KB），且复杂嵌套类型的解析可能存在边界情况。

WebAssembly 方案如 wasm-sqlparser 将 Go 编写的解析器编译为 WASM，在浏览器中以接近原生的性能执行。这类方案适合需要处理超大型 Schema 或特定方言的场景，但增加了构建复杂度和运行时内存开销。

工程实践中，建议采用分层策略：基础层使用成熟的 JS 解析器覆盖 90% 的常见 DDL 模式；对于特殊方言或复杂语法，通过正则预处理和自定义解析规则作为补充。

ER 图渲染：SVG 与 Canvas 的权衡

解析完成后的 ER 图渲染需要在 SVG 和 Canvas 两种技术路线间做出选择。

SVG 方案将每个表、列、关系线渲染为 DOM 元素，天然支持事件绑定和 CSS 样式控制。对于交互式 ER 图（拖拽表位置、双击编辑、悬停高亮关系），SVG 的开发效率更高。开源库如 AntV X6 和 JointJS 提供了成熟的图编辑能力，支持自动布局、网格对齐、缩略图导航等功能。SVG 的矢量特性也确保了导出 PNG/SVG 时的清晰度。

Canvas 方案通过 2D 上下文直接绘制像素，在超大型 Schema（数百个表）场景下具有更好的渲染性能。但 Canvas 需要手动实现命中检测、事件处理和重绘优化，开发成本显著更高。实践中，可采用混合策略：交互编辑阶段使用 SVG，导出阶段如需高性能光栅化可借助 canvg 等库将 SVG 转为 Canvas 再生成位图。

布局算法是 ER 图渲染的另一关键。力导向布局（Force-directed）适合展示关系密度，但可能导致表节点重叠；层次布局（Hierarchical）更适合主从关系明确的 Schema。建议提供多种布局选项，并允许用户手动调整节点位置后保存布局状态。

工程化参数与性能优化

实现生产可用的浏览器端 ER 图工具，需要关注以下可落地参数：

解析性能阈值：单文件 10MB 以内的 SQL Dump 应在 500ms 内完成解析。可通过 Web Worker 将解析任务移出主线程，避免阻塞 UI。

渲染节点上限：SVG 方案建议单画布不超过 200 个表节点（含列展开视图），超过此阈值应启用虚拟滚动或分层折叠。Canvas 方案可支撑至 500+ 节点，但需实现视口裁剪和层级渲染优化。

状态持久化：支持将图表状态（节点位置、缩放级别、注释内容）序列化为 JSON 或编码进 URL Hash。后者允许通过链接直接分享特定视图，而无需服务器存储。

导出配置：PNG 导出建议默认 2x 分辨率（Retina 适配），SVG 导出需内联所有样式以确保跨平台兼容性。

应用场景与扩展方向

零上传架构的 SQL 可视化工具适用于以下场景：数据库设计评审、遗留系统文档化、Schema 变更对比、新人培训材料制作。由于数据不离开本地，金融机构和医疗行业等对合规要求严格的组织也能安全使用。

扩展方向上，可集成 AI 辅助功能（如基于 Schema 生成自然语言描述）、支持版本控制系统的 Schema 差异可视化、或作为低代码平台的内置设计器模块。核心架构保持不变：解析在本地，渲染在本地，数据零上传。

参考来源

• SQL to ER Diagram 官方站点：https://sqltoerdiagram.com
• node-sql-parser 浏览器构建版本：https://www.npmjs.com/package/@tluyben/node-sql-parser
• AntV X6 图编辑引擎：https://github.com/antvis/X6
• JointJS 交互式图表库：https://www.jointjs.com

web