Butterfly
A JavaScript/React/Vue2 diagramming library focused on flow layout and node-based orchestration.
What is Butterfly?
Butterfly is a JavaScript diagramming library that specializes in creating flow layouts and node-based orchestration diagrams. It provides a data-driven canvas for visualizing processes, dependencies, and relationships, commonly used for workflow design, data mapping, and system modeling. The library handles core diagram interactions so developers can concentrate on customizing nodes and edges.
Frontend developers and teams building applications that require interactive flowcharts, data lineage visualizations, UML diagrams, or any node-and-edge-based diagramming interface.
Developers choose Butterfly for its comprehensive canvas management, framework-agnostic customization (supporting DOM, React, and Vue2), and rich set of built-in features and plugins. It reduces the complexity of implementing interactive diagrams while offering the flexibility to tailor visuals to specific business needs.
Overview
🦋Butterfly，A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件)
Use Cases
Best For
- Creating interactive workflow or process flow diagrams
- Building data field mapping or table relationship visualizations
- Visualizing data lineage or business dependency graphs
- Designing UML diagrams or database modeling interfaces
- Implementing monitoring dashboards with status flow displays
- Developing custom node-based orchestration or editing tools
Not Ideal For
- Projects needing pre-styled, out-of-the-box diagram components with minimal customization
- Applications requiring server-side rendering with zero client-side JavaScript
- Teams heavily invested in React who demand a fully maintained React-native diagramming solution
- Use cases involving complex 3D visualizations or geographic mapping beyond 2D node-and-edge diagrams
Pros & Cons
Pros
The library comes with extensive examples for quick start and common use cases, highlighted in the README as '丰富DEMO' to accelerate development.
Handles zooming, panning, dragging, and layout automatically, freeing developers to focus on customization, per the '全方位管理画布' feature description.
Supports defining nodes and edges using DOM, React, or Vue2, offering high flexibility and extensibility, as stated in the README's feature list.
Draws diagrams based on structured data (nodes, edges, groups), enabling dynamic visualization updates from backend sources, which aligns with its data-driven philosophy.
Includes plugins for arrows, side panels, and hotkeys, allowing easy extension of functionality without modifying core code, as documented in the plugins section.
Cons
The README explicitly states that React butterfly component support is '不维护' (not maintained), recommending native use instead, which can be a significant drawback for React-centric teams.
Much of the documentation and community resources are primarily in Chinese, as seen in the README's language options, posing a barrier for non-Chinese speaking developers.
The full version bundles jQuery and lodash, increasing bundle size, and the setup requires careful management if these are already in the project, as noted in the installation instructions.
While excellent for flow and node-based diagrams, it lacks built-in features for other chart types like bar or pie charts, limiting its applicability to broader visualization needs.
Frequently Asked Questions
Related Projects
VueThis is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
BootstrapThe most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
electron:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS
d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.