Web端ER可视化

背景介绍

因业务需要，团队决定对原ER图功能进行重构。重构来自两方面，一是功能上进行了细分，二是实现方式发生了变化。下面是重构前后对比：

	重构前	重构后
功能方面	只有逻辑模型层面的ER图	包括概念模型、逻辑模型、物理模型3个层面的ER图
实现方式	单页面、antv/g6	微前端、React Flow、Elkjs

至于为什么前后采用的技术变化这么大，是因为我们采用了一个叫作ChartDB的开源仓库进行二开,本文主要围绕作者实现功能过程中遇到的问题进行展开。

ChartDB介绍

既然用到了ChartDB，这里有必要先对其进行简单介绍。

ChartDB一款基于 Web 的开源数据库可视化工具，旨在通过智能查询快速生成数据库架构图，并支持交互式编辑与 AI 驱动的数据库迁移功能。其设计理念是简化数据库结构的可视化与管理流程，适用于开发、文档生成、团队协作等场景。更多内容，读者可以参考其官网。

涉及到的核心前端技术包括下面几项：

• Vite构建工具
• React Flow
• IndexedDB

在本项目中我们并没有用到ChartDB的全部能力，出于工时成本的考虑，我们只用了该项目的已有的可视化能力，同时结合实际需求做了一些改造。

实现过程

开发过程并不繁琐，但遇到了两个对我们来说算难点的地方，其余的就只是需要一定的时间了。

首先，我们得先熟悉ChartDB这个开源项目，理解其设计细节和实现细节，这样我们的改造才能更随心所欲，遗憾的是我们并没有那么多时间去了解全部细节。所以，在大致了解系统运行逻辑之后，我们就以功能性作为目标，开始了改造。

之后我们梳理了已有功能和目标功能的差异，概念模型功能用React Flow这款基于节点和连线的可交互图库自己实现，逻辑模型和物理模型图形部分用已有的，再根据需要扩展。

最后是功能放在什么地方，我们有两个选择，一是放在重构前的代码模块中，二是另开一个微前端。

如果选择第一种