使用 Hubql 和 React Flow 实现灵活的数据模型可视化

Tobias Meixner
Hubql 联合创始人
Flexible data model visualization with Hubql and React Flow screenshot

您能简单介绍一下 Hubql 吗?

Hubql 是一个协作平台,用于共同构建和可视化数据模式。

您为什么要选择使用 React Flow?

我们正在寻找一个 React 库,它可以帮助我们将数据模型转换为可视化效果,而无需花费太多时间构建抽象和交互元素。为了节省开发时间,我们选择了稳定、成熟且功能丰富的库,我们可以用自定义渲染选项对其进行扩展。

您目前如何使用该库?

我们使用 React Flow 将数据模型(如 JSON 或 Prisma)转换为图表或图形。我们将 AST(抽象语法树)数据传递给 React Flow,以根据数据关系生成节点和边。然后,这些数据将以自定义节点的形式渲染在表格式 UI 中,以便于理解。

React Flow 中哪些功能对您特别有用?

主要是用于控制节点拖放和点击行为的事件,这些事件非常有用,可以扩展功能。此外,自定义节点的渲染在用户界面方面提供了很高的灵活性,可以实现丰富的用户体验和品牌化。

您在使用过程中遇到了哪些问题?

实际上,除了我们这边由于性能问题需要优化 React 代码之外,我们没有遇到任何其他问题。React Flow 本身非常稳定,开箱即用,性能出色。

React Flow 订阅功能的哪些特性对您有所帮助?

有一个 Pro 示例与我们的用例匹配。这为我们节省了自动布局和分组功能的实现时间,这些功能对我们至关重要。直接从 React Flow 团队获得支持,并直接回馈维护人员也是很棒的事情。

使用 React Flow Pro 获取 Pro 示例、优先级错误报告、维护人员一对一支持等更多内容