preface

LogicFlow based on drops technical team under the customer service business practice, developed by intelligent middle – experience platform is a front-end process visualization framework, provides a series of flow chart of interaction necessary functions and flexible node, edit the custom, plug-in, such as expanding capacity, convenient we fast in business system to meet the needs of the class diagram editor. LogicFlow has been validated against the process configuration requirements of different users within and outside the company.

background

First of all, the technical team of intelligent Middle Platform — experience platform has supported the customer service system demands of almost all business segments of Didi. Faced with diversified business scenarios with fast logical changes, the traditional scenario-oriented programming cost is high and the cycle is long. So we build online configuration of operating system, make products operations, students can through the way of drawing flow line on the business logic, such as user phone line into the interactive voice response, artificial customer service in dealing with a user into the line of standard operating procedure, user self-service the H5 page configuration system to solve the problem such as one thousand thousand scenarios below.

Second, although each business system needs to apply process visualization technology, the requirements are different. Some have simple requirements for flow charts and simple data format of graphs, while others need to draw flow charts according to BPMN specifications and have high requirements for customization. We investigated the relevant frameworks in the market (BPMN.js, X6, Jsplumb, G6-Editor), and found that there were unsatisfactory scenarios, and the cost of technology stack unification was very high. Specific performance in:

1. Bmpn. js and Jsplumb have insufficient expansion capability, and the support cost of custom nodes is very high. Can only be introduced in full, each system can not be introduced on demand
2. The cost of matching with the back-end process engine is higher. Service customization requirements such as data conversion and process verification are not supported.
3. Documentation, examples are not sound. X6 and BPMN documentation is not sound, with few examples (early 2020 survey conclusion)

Therefore, we started the LogicFlow project in the first half of 2020 to support the process visualization requirements of various systems.

LogicFlow capabilities and features

What capabilities LogicFlow currently has, I’ll cover in two parts.

Build a flowchart editor quickly

Provides the necessary capabilities for flowchart editing, which is the foundation of LogicFlow:

• Graph drawing ability. Draws nodes and lines of various shapes based on SVG and provides basic nodes (rectangles, circles, polygons, etc.) and lines (straight lines, polylines, curves)
• All kinds of interactive ability, let the picture move. React to the various mouse events (hover, click, drag, etc.) of nodes, lines, and graphs. Such as node drag, drag to create a line, line adjustment, double-click on a node to edit text
• The ability to improve editing efficiency. Provide grid, alignment line, next step, keyboard shortcut keys, zoom in and out of the picture and other supporting capabilities to help users improve editing efficiency
• Provides a rich API, host development through the API pass parameter calls and listening for events, complete interaction with LogicFlow

With these capabilities, front-end r&d can quickly build process visualization applications at a low cost and provide smooth product interaction. Here is an example of a flowchart using LogicFlow’s built-in nodes and matching capabilities:

Expand based on business scenarios

When basic capabilities fail to meet business requirements, expansion is required based on business scenarios. This is the key to LogicFlow’s ability to support multiple systems on the customer side.

• Styles all elements on the diagram, such as the size and color of various nodes, lines, anchors, arrows, alignment lines, etc., to meet the need for front-end style adjustments
• API. Support for registering custom methods with LogicFlow, such as methods that provide image downloads via API extensions
• Custom nodes and lines. Built-in rectangles and circles cannot meet actual service requirements. Therefore, nodes with service significance need to be defined. LogicFlow provides a way for users to customize nodes with custom graphics and business data, such as the “approval” node in process approval scenarios
• Expand components. LogicFlow provides an HTML layer and a set of coordinate transformation logic on top of the SVG layer, and supports registering components in the HTML layer. Host developers can use LogicFlow’s API to develop components based on any View framework, such as right-click menus for nodes, control panels, and so on
• Data conversion adapter. The default LogicFlow exported graph may not be suitable for all services. In this case, you can use the Adapter API to convert the graph from LogicFlow to BPMN
• Built-in partial expansion capability. Based on the above expansion capabilities, we also provide a separate lF-Extension package, which is used to store the nodes and components of the customer service, such as bPMN-oriented nodes, data Adapter, and default menu. Note that the LF-Extension can be installed separately and can be imported on demand

Based on the expanded capabilities mentioned above, front-end r&d can flexibly develop required nodes and components according to the requirements of actual business scenarios. Here are two flow charts based on LogicFlow’s expansion capabilities:

BPMN:

Approval process:

Positioning contrast

The figure above is a horizontal and vertical comparison of several familiar open source frameworks to see where LogicFlow stands. The horizontal axis is the richness of the visualization capabilities of the framework, and the higher the vertical axis is, the higher the maturity of the framework in business process applications, and the lower the initial deployment development cost. Let’s look at each of these frameworks:

• Activiti, as a workflow engine, provides a front and back end solution that allows simple secondary development to deploy a business process management platform
• Bpmn.js: based on Bpmn 2.0 specification, design of flowchart editor
• G6: ANTV focuses on graphic visualization, all kinds of analysis charts. Such as ecological trees, brain maps, radiation maps, indented maps and so on
• X6: Image editing engine, core capabilities are nodes, wires, and canvases. It not only supports flow chart, but also Dag diagram and ER diagram

LogicFlow is positioned between bPMN.js and X6 in the figure above, filling in the gaps in the middle. The core provides an editor for flow charts and extends capabilities to support process nodes and data formats required by specifications such as BPMN to meet the current state of the business.

Implementation principles and architecture

Overall Architecture diagram

The core package @LogicFlow/Core provides basic flow chart editor capabilities, and @LogicFlow/Extension on the right is an extension development plugin based on @LogicFlow /core.

Flowchart editor design scheme

This paper mainly introduces the selection and scheme design of flowchart editor.

Diagram rendering scheme

Front end graphics are nothing more than HTML + CSS, Canvas, Svg three ways, we made a comprehensive comparison, listed the corresponding advantages and disadvantages:

In the case of flowchart scenes, there is no need to render a large number of nodes (a few thousand elements at most), and there is no high demand for animation. The DOM-based features of Svg would be a better fit for us. One is that the cost of learning and development is lower, and the other is that there are more extensions you can do based on the DOM. However, there is no internal support for inserting other tags, such as divs, inside Svg tags, so some functionality needs to be combined with other HTML tags.

Therefore, we finally choose to use HTML + Svg to complete the rendering of the figure. Svg is responsible for the part of graphics and lines, while HTML is responsible for the text, menu, background and other layers.

Module abstraction

Based on the above solution, the next step is to classify and abstract the implementation of a flowchart.

From above:

• First, we built multiple layers to take on different responsibilities to facilitate the expansion of functions and capabilities. The top layer is an Svg layer, where all graphics (nodes, lines, alignments, Outlines, etc.) are rendered in Svg, and it is also responsible for listening for events on the graph. The Svg layer is the component layer, which is responsible for extending UI components. Grid layer, responsible for rendering the Grid; Background layer, add custom background.
• Shape encapsulates graphics in Svg, provides default styles, transforms attributes passed in by users, etc., mainly includes Rect, Circle, Ellipse, Polygon, Path, PolyLine, Text, etc., which facilitates internal reuse of LogicFlow. For example, both circular nodes and anchors need circles.
• Based on Shape, a lot of small elements are implemented, such as nodes and anchor points for lines, such as arrows on lines and so on.
• BaseNode and BaseEdge encapsulate the common capabilities of nodes and lines, aggregating shapes, anchors, text, and handling events and styles. We can get RectNode, CircleNode and other renderable nodes by inheriting BaseNode and passing shape.

Because flowcharts are rich or re-edited, with these basic modules in place, the next step is to design a rich interaction scheme, that is, to respond to any action the user does on the diagram. For example, if I trigger a drag of a node, the associated line may need to follow, and it can also identify whether there are other nodes (alignment lines) on a certain horizontal line.

MVVM + Virtual DOM

First of all, we consider that the whole diagram editor has many state stores, and to achieve the response of each module on the diagram must have the ability of state communication. Second, if you want to implement something like redo/undo, the entire graph must be rendered according to the data, that is, fn(state) => View. A good way to do this is to drive the View through the Model.

Finally, we choose to build the LogicFlow diagram editor based on MVVM, a design pattern widely used in current front-end engineering, to define the View and Model layers of the diagram, so that the engineering code has a certain degree of decoupling. At the same time, the introduction of Mobx to achieve our state management, data response capabilities, a map based on a Model to do state communication. In addition, another reason to consider Mobx is that I can do the fine-grained data binding (observation) I want, which reduces unnecessary rendering.

Here is the MVVM schematic for the LogicFlow Diagram editor:

As you can see from the figure above, the View layer (graph, node, etc.) responds/updates as the Model changes through data binding. We mentioned earlier that we are using Svg + HTML to render diagrams, so updating the View layer is either imperative or declarative:

• Imperative. Like the jQuery API,$('.rectNode').attrs({x: 1, y: 2})In this way, the DOM code is actually cumbersome to operate, and the code written in the reinteraction scenario is more redundant. Although we did eventually find a library that conveniently supports drawing in an imperative way — ANTV /g
• Declarative. For example, one of the core capabilities of View frameworks like React/Vue is the state => UI, which is a declarative way to build the DOM and update the UI whenever the state changes

In addition to the fact that it would be tedious to write code in the context of imperative DOM operation, another reason is the cost of DOM operation. Under the design of state-based update UI, we naturally thought of introducing Virtual DOM to solve the update efficiency in some scenarios. This can also compensate for some of the performance issues associated with “Svg based rendering graphics.”

In short, the two most fundamental reasons for choosing MVVM design mode and introducing Virtual DOM are to improve the development efficiency in the scenario of diagram editor, and to pursue better performance in the rendering scheme of HTML + Svg.

We made a performance comparison with X6 during rendering. In the same operating environment, we measured the rendering time of LogicFlow and X6 respectively at different magnitudenodes/lines. Theoretically, the shorter the rendering time, the better the performance.

From the above table, we calculate that LogicFlow is superior to X6 in initial rendering speed, and this does not enable LogicFlow’s on-demand loading function, which also validates our technology selection. You can also test this on the sample page: yhlchao.github. IO/lF-vs-other…

The event system

It describes the design we do in “status” and “response”, which requires a system of events to collect user actions and report and bubble in time. The main ones are reuse and unified reporting.

Reuse is how to ensure that all nodes and lines have default event callbacks, and how to share processing logic for complex events (drag and drop).

• Behaviors. For complex events, we do function and class encapsulation. For example, Drag emulates h5 dragEnter, dragOver, dragEnd, and drop events using Mousemove, Down, and up. DnD implements drag and drop interaction by abstracting dragSource and DropTarget entities, such as dragging to create nodes
• In the previous module abstraction section, we mentioned internal abstractions such as BaseNode and BaseEdge. Both built-in and custom nodes inherit from the base class to gain generic capabilities, so LogicFlow’s default event callbacks are actually repeated by inheritance
• EventCenter. The event bus is used to report all user behavior events captured internally according to certain specifications and formatsemit(ev, args)All of these are reported to EventCenter and eventually bubble up to the LogicFlow class, which interacts with the host in a unified way. In addition, events can be triggered and listened on from anywhere in the diagram editor through EventCenter

Tool center

The tool center is positioned as utils that solve a specific class of problems, such as behaviors (encapsulation of complex events) and EventCenter mentioned above. In addition, in the process of graph editing, there is actually a lot of complicated computational logic to deal with if a better interaction effect is to be achieved.

• Coordinate system. The browser’s clientX and clientY coordinates, and the Svg diagram’s own coordinates, are obviously different when it comes to scaling and translation of the graph.

• Algorithm. Is specialized through geometry, algorithm to deal with some problems of visualization. For example, when a node has multiple folds in the same direction, how to combine the paths to make it look better, as follows

  

  How to calculate the tangent point of a line to a graph to reach the point where the line can connect to the graph’s non-anchor points, as shown in the figure below

  

• History, which provides redo and undo capabilities. Undos and ReDOS are stored in two stacks, and the maximum length is limited. Thanks to the design pattern of MVVM, it is convenient to do the observation of data changes and Model driven View.

scalability

Now that you’ve introduced the design of the flow chart editor, let’s introduce another important feature of LogicFlow, the design of extensibility. In the application world, a function, a service, a development framework react, a small program development framework, and a Chrome application platform all have their own extensibility, which is also a design choice to be considered in the process of software development. For LogicFlow, which is a development framework to solve a domain problem, first of all the API should be extensible; In addition, LogicFlow also provides a View layer, in which the user should be able to do secondary development. After these two extension directions are determined, the most important thing is to combine the business needs, to be able to meet the business scenarios that are foreseen in the current and future period of time, but also not to overdesign.

Design on the API

First of all, LogicFlow is completely encapsulated in object-oriented design patterns at the user-facing level. The biggest benefit is that almost every programmer is familiar with LogicFlow and its use cost is low. You can see this through the following initialization method.

const lf = new LogicFlow({ // Instantiate the LF object
  container: document.querySelector('#graph'), // Get the render container
  width: 700.height: 600.tool: {
    menu: true.control: true,},background: {
    color: '#F0F0F0'
  },
  grid: {
    type: 'dot'.size: 20,}}); lf.render({nodes: [].edges: []}); // Render the view on the interface
Copy the code

With class LogicFlow, the user instantiates a flow chart once to get an instance, the state is also private, various use methods can be invoked through the LF instance. To summarize the design of API extensions:

1. LogicFlow is an object oriented design pattern. LogicFlow is encapsulated internally so that users can inherit and override interfaces/methods
2. Method design. The first is to have fixed types of inputs and outputs. In addition, LogicFlow provides an extends like method, extending the method on the prototype via logicFlow.use (fn)
3. Communicate through the observer mode, providing on methods for the host to subscribe to various internal events
4. The data of the graph can be customized. You should be able to customize whether it’s what custom business attributes a node, line, or what data the flowchart is exporting.

pluggable

The expansibility of the View layer, in addition to the user to be able to customize the presentation, the most important thing is that plug-in, because the flow visualization on the road, the ability of different business scenarios need is not the same, LogicFlow hard support all of the scene, so the capability of providing good plug, let users second development is a better choice. Currently, we have two capabilities open on the UI interface:

1. Nodes and lines support secondary development, that is, custom nodes and lines
2. Developable UI components are registered in LogicFlow’s component canvas

Based on the plug-in approach, we have supported different business systems, and in the process we have pieced out some slightly generic capabilities, such as nodes to support the BPMN specification, into the LF-Extension package. At present, there are four types of extensions in Extension: UI components, custom nodes, API, and Adapter.

The future planning

1. Ease of use and richness of API. In addition to our current iteration plan (see the Github Repository project for more details), scope will also be added after prioritizing according to the needs of users. We also hope that you can give us more comments and requirements. The tone of this direction is to keep LogicFlow’s flow visual positioning, enrich core’s API, and enhance Extension’s capabilities
2. Better documentation and examples. The main document is easy to read, perfect, can have a complete sample and code for developers to copy paste code, currently only react version of the sample, before 2021.4 will be added vUE version of the sample
3. More than just a process visualization library, it is expected to provide a complete solution. LogicFlow only addresses the technical issues of front-end flowchart editing, but a process engine is needed to define the graph and how the process is ultimately executed. Currently, our team also has a solution for the “process engine” – Turbo (open source Java version: github.com/didi/turbo). We will make LogicFlow and Turbo an end-to-end solution and provide a complete application example. In addition, the Nodejs version of the engine is also in the planning.

The last

You already have a good idea of LogicFlow. LogicFlow is a good choice if your business has a need for process visualization and has a high need for expansion. For LogicFlow technology itself implementation details, for similar business discussions are also welcome to communicate. Look forward to more articles on the technical design details of LogicFlow and some of our thinking in the areas of visualization, business processes, logic choreography, and more.

• LogicFlow official website: logic-flow.org/
• Github repository address: github.com/didi/LogicF…
• Add wechat account to user group: Logic-flow