This issue recommends a flowchart editing framework based on TS development – LogicFlow</ p>

LogicFlow is a flowchart editing framework developed by Didi Experience Platform technology. It provides a series of necessary functions for flowchart interaction and editing, as well as simple and flexible node customization, plugins, and other extension mechanisms, making it easy for us to quickly meet the needs of class flowcharts in business systems. At present, LogicFlow has supported multiple operational systems such as IVR, work order flow, and intelligent robots under customer service business, which have been validated in different process configuration requirements of each system</ p>

Features

High scalability: compatible with various customized process editing requirements of products, the vast majority of modules are implemented in the form of plugins, supporting free insertion and removal of each module

Re execution: flowcharts can fully express business logic without being limited by process engines

Professional: A framework focused on editing business process diagrams

Use

Install

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

Code Example

//Create container
< div id="container">& lt;/div>;</ span>

//Prepare data
const data = {
//Node
nodes: [
{
id: 21,
type: 'rect',
x: 100,
y: 200,
text: {
value:"Rectangular node"
x: 100,
y: 200,
},
},
{
id: 50,
type: 'circle',
x: 300,
y: 400,
text: {
value:"Circular node"
x: 300,
y: 400,
},
},
],
//Edge
edges: [
{
type: 'polyline',
sourceNodeId: 50,
targetNodeId: 21,
},
],
};</ span>
//Rendering Canvas
const lf = new LogicFlow({
container: document.querySelector('#container'),
width: 700,
height: 600,
});</ span>

lf.render(data);</ span>

Core competencies

Quick setup of flowchart editor

provides the necessary skills for editing flowcharts, which is also the fundamental ability of LogicFlow:

• The ability to draw graphs. Drawing nodes and lines of various shapes based on SVG, and providing basic nodes (rectangles, circles, polygons, etc.) and lines (lines, polylines, curves)

Various interactive capabilities make the graph come to life. React to various mouse events (hover, click, drag, etc.) based on nodes, lines, and graphs. For example, dragging nodes, creating edges by dragging, adjusting lines, double clicking nodes to edit text, etc

The ability to improve editing efficiency. Provide grid, alignment lines, previous and next steps, keyboard shortcuts, image zooming in and out, and other supporting capabilities to help users improve editing efficiency

• provides rich APIs, and the host development interacts with LogicFlow through API parameter calling and event listening

The following is an example flowchart created using LogicFlow’s built-in nodes and supporting capabilities:

Based on business scenario expansion

When basic capabilities cannot meet business needs, it is necessary to expand based on business scenarios</ p>

• Set the style of all elements on the graph, such as the size and color of various nodes, lines, anchor points, arrows, alignment lines, etc., to meet the needs of front-end style adjustment
• API extension. Support registering custom methods on LogicFlow, such as providing image download methods through API extensions
• Customize nodes and lines. The built-in graphic nodes such as rectangles and circles often cannot meet practical business needs, and it is necessary to define nodes with business significance. LogicFlow provides a way for users to customize nodes with custom graphics and business data, such as the “approval” node in process approval scenarios
• Extension component. LogicFlow provides an HTML layer and a series of coordinate transformation logic on the SVG layer, and supports registering components at the HTML layer. Independent research and development can use LogicFlow’s API to develop components based on any View framework, such as right-click menus for nodes, control panels, etc
• Data conversion adapter. The default exported graph data from LogicFlow may not be suitable for all businesses. In this case, custom conversions can be made through the adapter API when inputting and outputting graph data from LogicFlow, such as converting to BPMN standard map data
• Built in partial expansion capability. Based on the above expansion capabilities, we also provide a separate extension package to store nodes, components, etc. with universality that have been accumulated under the current business, such as nodes and data adapters for BPMN specifications, with default menus. Please note that extensions can be installed separately and support on-demand import

Based on the expanded capabilities mentioned above, front-end R&D can flexibly develop the required nodes, components, etc. according to the needs of actual business scenarios. Here are two flowcharts based on the extension capabilities of LogicFlow:

BPMN：

Approval process:

Tool Example

Vue application demo

Source code address:
https://github.com/xinxin93/logicflow_vue_demo

Example drawing tool

LogicFlow not only supports the development of fixed overall styles such as bpmn.exe, but also focuses on generating data that can be executed by the process engine as a flowchart tool. It also supports the implementation of free control style drawing tools such as ProcessOn</ p>

Source code address:
http://logic-flow.org/mvp/index.html

Example of vue3 node red style

Source code address:
https://github.com/Logic-Flow/logicflow-node-red-vue3

—END—

Open source license: Apache2.0