Reactflow图形库结合Dagre算法实现函数资源关系图

Reactflow 图形库结合 Dagre 算法实现函数资源关系图

摘要

在进行函数计算开发时，函数资源关联关系错综复杂，为了方便用户对资源信息的全量感知，决定把函数所有资源信息用关系图的方式进行呈现。同时可灵活操作实现对资源的管控，从而提升用户体验，下面为大家介绍如何实现。

主要技术使用了Reactflow 图形库进行节点与边的绘制渲染，并结合Dagre层次布局计算各节点的位置，从而实现最优布局。

本文将依据下图，从数据处理、布局算法、图形绘制三个方面分别阐述，并将重点介绍Dagre布局算法与Reactflow的画布绘制。