butterfly

Butterfly is a JavaScript library from Alibaba for building interactive diagram and flow chart editors inside web pages. You use it to create a visual canvas where boxes (nodes) can be connected by lines (edges), which is the kind of interface you see in workflow builders, data pipeline editors, or any tool where you want to show how things connect to each other.

The library works with plain JavaScript, React, and Vue 2. Developers drop it into their project, define what nodes and connections should appear, and the library handles drawing them, letting users drag nodes around, zoom in and out, and pan across the canvas. You can customize how each node looks using standard web technologies, so the diagrams can match whatever design your application needs.

Alibaba has also built a set of higher-level React components on top of this library for specific business use cases: data field mapping between tables, lineage tracing to show where data came from, visual database modeling, and a monitoring view for task pipelines. These are separate packages but they show the kinds of things you can build with Butterfly as the foundation.

The README is written primarily in Chinese. An English version is available in a separate file linked at the top. Installation is through the npm package manager, and a runnable demo is included in the repository for trying the library locally.