分享一个阿里云轻量级开源前端图编排，流程图js组件——butterfly-dag

背景

      在阿里云，可能每时每刻都在身边充斥着“数据表”“模型”“调度”等等抽象概念。作为阿里云的前端，如何将这种抽象的概念实体化可视化地给客户或者其他合作伙伴展示出来显得尤为重要。

      与此同时，在阿里云数据智能产品的孵化速度和迭代速度大大超乎大家的想象，总结起来就是“人少事多繁琐”，经常出现拉几个外包就开始孵化一个中台项目，此时，集团内各种搭建系统能缓解一部分的工作量，可是当遇到了可视化“编排”，“流程图”，“关系图”这种场景，就显得捉襟见肘了。

通过盘点在不同业务支持过的此类场景，总结DAG面临以下痛点：

• 产品业务逻辑复杂，且形态差异大
• 样式丰富，交互复杂且有较高视觉质量诉求
• 定制性要求高，开发速度要求快
  

解决方案

小蝴蝶(https://github.com/alibaba/butterfly)脱胎于阿里云数据智能事业部实际的业务场景，在覆盖了我们业务需求的情况下，同时支持了多个兄弟部门抽象出来的前端图组件库，其特性如下：

• “零件式开发”，定制性强，入门门槛低：利用了DOM的便利性，提供非常强大的样式定制和复杂的交互定制的能力

// 继承式的定制
const Node = require('butterfly-dag'