HubLensJavaScriptdidi/LogicFlow
// archived 2026-04-19
didi

LogicFlow

Frontend#JavaScript#TypeScript#Visualization#Diagramming
View on GitHub
11,279

// summary

LogicFlow is a flowchart editing framework specifically designed for business systems, providing a series of core interaction and editing functions. The framework is highly customizable, allowing users to define nodes, connectors, and styles according to their specific requirements. Furthermore, it features a rich plugin mechanism and data conversion capabilities, easily meeting the development needs of various complex flowcharts.

// technical analysis

LogicFlow is a framework focused on flowchart editing, designed to provide efficient process visualization and interaction capabilities for business systems. Its core design philosophy lies in high customizability and flexibility, meeting the diverse needs of developers in complex business scenarios through a plugin mechanism and node customization features. The framework not only solves the interaction challenges of flowchart drawing but also effectively connects frontend visualization with backend business logic through its built-in execution engine and data transformation capabilities, making it an ideal choice for building no-code or low-code platforms.

// key highlights

01
Provides an intuitive visualization interface, supporting users to easily create, edit, and manage complex logic flowcharts.
02
Possesses extremely high customizability, allowing developers to customize nodes, connectors, and styles according to specific use cases.
03
Includes a rich built-in plugin system and supports users in developing complex plugins to extend business functionality.
04
Features a built-in browser-side execution engine, providing an innovative technical path for implementing no-code process logic execution.
05
Supports data format conversion, enabling seamless integration with data structures from various backend execution engines such as BPMN and Turbo.

// use cases

01
Visual flowchart creation and editing
02
Highly customizable node and style extensions
03
Support for various data structure conversions such as BPMN

// getting started

Developers can install the @logicflow/core and @logicflow/extension packages via npm, yarn, or pnpm. Create a container DOM element in your project, then instantiate the LogicFlow object and pass in the container configuration, and finally call the render method to load node and edge data to complete the basic rendering.