What is butterfly?

alibaba/butterfly — explained in plain English

Analysis updated 2026-06-26

★ 4,654JavaScriptAudience · developerComplexity · 3/5Setup · easy

Mindmap

mindmap
  root((butterfly))
    What it does
      Interactive diagrams
      Node-edge canvas
      Drag and drop
    Tech stack
      JavaScript
      React
      Vue 2
      npm
    Use cases
      Workflow builders
      Data pipeline editors
      DB schema designers
    Features
      Zoom and pan
      Custom node styles
      Data lineage
    Higher-level packages
      Field mapping
      Lineage tracing
      Task monitoring

mindmap root((butterfly)) What it does Interactive diagrams Node-edge canvas Drag and drop Tech stack JavaScript React Vue 2 npm Use cases Workflow builders Data pipeline editors DB schema designers Features Zoom and pan Custom node styles Data lineage Higher-level packages Field mapping Lineage tracing Task monitoring

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Build a visual workflow editor where users can drag and connect task nodes on a canvas.

USE CASE 2

Create a data lineage diagram showing where data flows from source tables to output tables.

USE CASE 3

Design a database schema editor where tables are nodes and foreign keys are connecting lines.

USE CASE 4

Add a zoomable, pannable diagram canvas to a React or Vue 2 app using npm install.

What is it built with?

JavaScriptReactVue 2npm

How does it compare?

	alibaba/butterfly	electerious/ackee	alexnisnevich/untrusted
Stars	4,654	4,655	4,652
Language	JavaScript	JavaScript	JavaScript
Setup difficulty	easy	moderate	easy
Complexity	3/5	3/5	1/5
Audience	developer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Install via npm, requires basic React or Vue 2 setup to use the framework-specific components.

Check the repository for the exact license terms, maintained by Alibaba as open-source.

So what is it?

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.

Copy-paste prompts

Prompt 1

Using the Butterfly library, show me how to create a React canvas with two nodes connected by an edge that users can drag around.

Prompt 2

How do I customize the appearance of nodes in Butterfly to match my app's design using CSS?

Prompt 3

Show me how to use Butterfly's data field mapping component to visualize how columns from one table map to another.

Prompt 4

How do I export the current diagram state from Butterfly as JSON so I can save and reload it?

Frequently asked questions