流程图布局在项目中的实践

背景

随着项目中流程图被运营同学画的越来越复杂，出现了一个流程图上存在几百个节点的情况，流程图带来的业务逻辑可视化效果越来越不明显。虽然我们提供了分组、注释、记号等修饰性功能去支持标识流程中重要的业务关键点，但是效果仍然不明显。这个时候想再去通过人为调整去让混乱的流程图变得清晰，比我们代码重构还难。所以为了解决这个问题，我们增加了自动布局和一键美化功能，通过实践发现这两种方案效果都不错，有自己独特的应用场景。

自动布局

自动布局大家最常见到的效果应该是脑图。画图的人不需要手动调整节点的位置，由系统自动计算出节点合适的位置。

自动布局的优缺点

在实际项目中，并不是所有的流程图都可以用自动布局，需要基于具体的产品来结合自动布局的优缺点来权衡。

自动布局优点：

1. 操作便捷，省去了传统绘制流程图的位置调整的操作成本。
2. 流程图风格统一，整个流程图美观度下限更高。

自动布局的不足：

1. 首先能用的业务场景有限，一般用于树型结构（如脑图）或者布局有规律的场景。
2. 画布空间利用率不高，系统引导的节点位置在很多情况下不是最优的，但是因为自动布局不允许调整节点位置，所以在节点较多的情况下，整个画布空白的地方比较多。

实现自动布局

对于布局目前社区有很多方案，在很多数据可视化库中都有使用。我们在流程图这边最常用一般都是结构化布局hierarchy。在结构化布局里面，又有基于不同的情况，使用不同的布局方案，例如tree、dagre、elk等。关于图布局的详细介绍，大家可以看这篇文章：Using layouts · Cytoscape.js, 这里就不详细介绍了。

在我们需要用到自动布局的业务场景中，比较适合的是树布局。我们就直接使用了GitHub - antvis/hierarchy: Layout algorithms for visualizing hierarchical data. 。用它的原因主要是API使用起来比较方便(API上比