alibaba/butterfly

Features

• Visual Data Flow Builders - Provides a framework for building interactive canvases where users arrange nodes and connect edges to define data-driven workflows.
• Graph Visualization Libraries - An interactive library for rendering complex node-link diagrams with custom components and data-driven workflows.
• Canvas-Based Workflow Editors - Provides a comprehensive framework for building drag-and-drop workflow editors with node alignment, zoom, and pan capabilities.
• Lineage Mapping - Provides visual mapping of the relationship and flow between data fields, tables, and business entities for impact analysis.
• Automated Layout Algorithms - Implements automated layout algorithms to organize nodes based on connection logic for optimal visual clarity.
• SVG Diagramming Libraries - Uses SVG paths and Bézier curves to programmatically create and manipulate complex graph topologies.
• Visual Editor Frameworks - Provides a toolkit for building custom node-based editors with drag-and-drop and connection validation.
• General Purpose Flow Editors - Provides a framework for building interactive canvases where users arrange nodes and connect edges to define workflows.
• Node Graph Connection Routings - Calculates and renders Bézier, straight, and Manhattan paths to connect nodes in a visual graph.
• Interactive Flow Canvases - Provides the core interactive canvas used to render nodes, edges, and groups for workflow visualization.
• Graph Layout Algorithms - Integrates force-directed and radial layout algorithms to automatically position nodes for optimal visual clarity.
• Graph Node Visualizations - Renders a visual canvas of interconnected nodes and edges based on data-driven configurations.
• Interactive Canvases - Provides an interactive SVG-based canvas featuring built-in support for zooming, panning, and automated layout algorithms.
• SVG Path Rendering - Generates dynamic SVG paths for graph edges using Bezier, Straight, and Manhattan styles.
• Node Graph Engines - Implements the core engine for managing the lifecycle, connectivity, and visualization of a node graph.
• Asset Lineage Visualizations - Maps relationships between tables and fields to track the origin and flow of data across business processes.
• Node Graph Event Callbacks - Implements specific callbacks for node creation, connection changes, and zoom adjustments within the flow editor.
• Visual Workflow Designers - Provides an interactive environment for modeling architectures and processes through connected node groups.
• Canvas Pan and Zoom Controls - Provides native interaction controls for panning, zooming, and dragging elements within large-scale visual diagrams.
• Connection Anchors - Provides a mechanism to map DOM elements to specific connection points on nodes to control edge entry and exit.
• Coordinate Space Transformations - Implements systems for transforming interactions between screen-space and canvas-space coordinates to support zooming and panning.
• Custom Component Injection - Allows external UI components to be injected as graph nodes by overriding default rendering and lifecycle hooks.
• Behavioral Node Definitions - Enables defining a node's appearance and behavior by overriding render methods and lifecycle hooks.
• Graph Connection Point Definitions - Enables the creation of precise attachment points on nodes to control edge start and end positions.
• Custom Graph Element Integration - Provides a mechanism to integrate custom UI components to define the appearance and behavior of graph nodes.
• Component-Based Rendering - Renders nodes and sockets as independent components for flexible UI customization.
• Connection Validation Rules - Performs runtime checks for connection compatibility and circular links before finalizing edge creation.
• Graph Node Anchors - Allows adding specific points to nodes to control where edges enter or exit using DOM element mapping.
• Data Lineage Visualizations - Provides specialized support for mapping relationships between data fields and tables to track data provenance.
• Visual Field Mapping - Visualizes relationships between data fields and table columns through interconnected nodes.
• Graph Traversal - Includes utilities for traversing graph topologies to find neighboring nodes and edges for connectivity analysis.
• Force-Directed Layout Arrangers - Supports dynamic node positioning using force-directed and radial layout patterns.
• Visual Data Modeling - Provides a node-based interface for the visual construction of database models and UML structural diagrams.
• Workflow Progress Monitoring - Displays the real-time state and progress of task flows and data pipelines within the graph.
• Hierarchical Tree Visualizers - Renders hierarchical data using tree structures, dendrograms, and mindmaps to represent parent-child dependencies.
• Declarative Flow Graph Rendering - Enables the creation of interactive node-and-edge graphs using a declarative component structure.
• Diagram Layout Organizers - Manages the spatial arrangement and structural flow of nodes and connections to maintain clarity in complex flowcharts.
• Dynamic Task Graphs - Supports adding, removing, and reorganizing nodes and edges at runtime to modify the graph structure.
• Event-Driven Architectures - Uses a custom event bus to enable reactive communication and state exchange between nodes, edges, and the canvas.
• Technical Architecture Diagramming - Enables the creation of visual representations for UML diagrams, database schemas, and technical architectures.
• Canvas Interaction Tracking - Tracks user-driven interactions on the canvas, such as edge creation, deletion, and reconnection.
• Data Pipeline Lineage Inspectors - Enables the inspection and tracing of data flows and provenance across business processes.
• Edge Renderers - Enables overriding default drawing logic to create custom SVG paths and arrow shapes for edges.
• Graph Node Positioning - Allows the programmatic updating of node coordinates to position elements precisely on the canvas.
• Drag-and-Drop Palettes - Ships a side panel containing predefined draggable nodes to populate the graph canvas.
• Graph Entity Organization - Organizes entities into nodes and groups to represent hierarchical or networked data structures.
• Hierarchical Data Visualization Tools - Implements tools for representing complex tree structures and mindmaps with support for recursive manipulation.
• Marquee Selections - Implements a rectangular selection tool to select multiple nodes and edges via intersection.
• Node Grouping and Nesting - Supports clustering nodes within hierarchical container groups using relative positioning and recursive rendering.
• Node Grouping Visuals - Clusters multiple nodes into single visual containers using custom rendering and positioning.
• Viewport State Management - Tracks zoom levels and translation offsets to synchronize the main drawing canvas with a navigational minimap.
• Minimap Navigation - Ships a scaled-down navigational minimap to help users orient themselves and jump to different sections of the graph.
• Diagramming And UI Libraries - Interactive diagram and flowchart rendering engine.
• Visual Programming - Diagramming and flow layout library.
• JavaScript 框架汇总 - Listed in the “JavaScript 项目” section of the Great Open Source Project awesome list.

Star history