1. Project Overview

LogicFlow is a flowchart editing framework that provides essential interaction and editing features, along with simple and flexible node customization and extensible plugin mechanisms, making it easy to quickly implement flowchart-based requirements in business systems.

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

4. Feature Overview

LogicFlow is a flowchart editing framework that provides essential flowchart interaction and editing features, as well as flexible node customization and extensible plugin mechanisms. LogicFlow supports custom front-end development for various visual logic orchestration scenarios, such as flowcharts, ER diagrams, and BPMN workflows. It is well suited for workflow approval configuration, robot logic orchestration, and process configuration in no-code platforms.

Core Capabilities

• Visual Modeling: With the intuitive visual interface provided by LogicFlow, users can easily create, edit, and manage complex logic flowcharts.

• Highly Customizable: Users can customize nodes, connectors, and styles according to their needs to create logic flowcharts tailored to specific use cases.

• Flexible and Extensible: A rich set of built-in plugins is provided. Users can also develop complex custom plugins to meet business requirements.

• Self-Executing Engine: The execution engine supports running flowchart logic in the browser, providing a new approach to no-code execution.

• Data Conversion: Supports converting LogicFlow data into data structures compatible with various backend execution engines, including BPMN and Turbo.

5. Tech Stack

Installation

# npm
$ npm install @logicflow/core @logicflow/extension --save

# yarn
$ yarn add @logicflow/core @logicflow/extension

# pnpm
$ pnpm add @logicflow/core @logicflow/extension

Quick start

<!-- LogicFlow container DOM-->
<div id="container"></div>;

// Prepare data
const data = {
  // Nodes
  nodes: [
    {
      id: '21',
      type: 'rect',
      x: 100,
      y: 200,
      text: 'Rectangle Node',
    },
    {
      id: '50',
      type: 'circle',
      x: 300,
      y: 400,
      text: 'Circle Node',
    },
  ],
  // Edges
  edges: [
    {
      type: 'polyline',
      sourceNodeId: '50',
      targetNodeId: '21',
    },
  ],
};
// Render canvas
const lf = new LogicFlow({
  container: document.querySelector('#container'),
  width: 700,
  height: 600,
});

lf.render(data);

Local development

# Install project dependencies and initialize the build
$ pnpm install

# Navigate to the specified project for development and debugging
cd packages/core
pnpm run build:watch

# Start the example to preview the results
cd examples/feature-examples
pnpm run start

For more information, please refer to the README.md document