Jumei’s Guide: LogicFlow was born out of the practice of Didi’s technical team in the customer service business. It is a process visualization front-end framework developed by Didi’s intelligent middle-end experience platform. It provides a series of functions necessary for flow chart interaction and editing And flexible node customization, plug-in and other expansion capabilities, it is convenient for us to quickly meet the needs of the class flow chart editor in the business system. At present, LogicFlow has been verified in the process configuration requirements of different users inside and outside the company.
1.
background
First of all, the technical team of Didi’s intelligent mid-platform experience platform almost supports the demands of customer service systems in all business sectors of Didi. Faced with diverse business scenarios and faster logic changes, traditional scenario-oriented programming is costly and takes a long time. Therefore, we have built an online configurable operation system, so that operations and product students can change the online business logic by drawing flowcharts, such as interactive voice response when users call in, and manual customer service when handling user incoming lines. Timely standard operating procedures, H5 page configuration system for users to solve problems by themselves, etc.
Secondly, although each business system needs to apply process visualization technology, the requirements are different. Some have relatively simple requirements for flow charts, and the data format of the graph is also simple, while others need to draw flow charts according to the BPMN specification, and have higher requirements for customization. We investigated the relevant frameworks on the market (BPMN.js, X6, Jsplumb, G6-editor), and there are unsatisfactory scenarios, and the cost of unifying the technology stack is very high. Specifically in:
The expansion capabilities of BMPN.js and Jsplumb are insufficient, and the cost of custom node support is high; they can only be imported in full, and each system cannot be imported on demand;
The cost of adapting to the process engine supporting the backend is relatively high. None of them support business customization requirements such as data conversion and process verification;
Documentation, examples are not sound. The documentation of X6 and BPMN is not sound, and there are few examples (the conclusion of the survey in early 2020).
Therefore, we started the LogicFlow project in the first half of 2020 to support the process visualization needs of each system.
2.
LogicFlow Capabilities and Features
What capabilities does LogicFlow currently have? I will introduce them in two parts:
▍ 1. Quickly build a flowchart editor
Provides various capabilities necessary for editing a flowchart, which is also the basic capability of LogicFlow:
The ability to draw graphs. Draw nodes and lines of various shapes based on SVG, and provide basic nodes (rectangles, circles, polygons, etc.) and lines (straight lines, polylines, curves);
Graph interaction. Respond to various mouse events (hover, click, drag, etc.) of nodes, lines, and graphs. Such as node dragging, dragging to create a connection, line adjustment, double-clicking a node to edit text, etc.;
Ability to improve editing efficiency. Provide grids, alignment lines, previous step, next step, keyboard shortcuts, image zoom in and out, and other supporting capabilities to help users improve editing efficiency;
Rich API is provided. The host R&D completes the interaction with LogicFlow by passing parameters through the API and listening to events.
Through the above capabilities, front-end research and development can quickly build process visualization applications at low cost and provide smooth product interaction. The following is an example of a flowchart made through LogicFlow's built-in nodes and supporting capabilities:
▍ 2. Expansion based on business scenarios
When basic capabilities cannot meet business needs, it needs to be expanded based on business scenarios. This is also the core capability of LogicFlow to support multiple systems on the customer service side.
Sets the style for all elements on the diagram. For example, the size and color of various nodes, lines, anchor points, arrows, and alignment lines, etc., to meet the needs of front-end style adjustments;
API extensions. Supports registering custom methods on LogicFlow, such as extending the method of providing image downloads through API expansion;
Custom nodes, lines. Built-in graphics nodes such as rectangles and circles often cannot meet actual business needs, and nodes with business 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 the process approval scenario;
Extension components. LogicFlow provides an HTML layer and a series of coordinate transformation logic on the SVG layer, and supports registering components on the HTML layer. Host R&D can develop components based on any View framework through the LogicFlow API, such as the right-click menu of the node, the control panel, etc.;
Data conversion adapter. The graph data exported by LogicFlow by default may not be suitable for all businesses. At this time, you can use the adapter API to do custom conversion when the graph data is input and output from LogicFlow, such as converting to BPMN-standard graph data;
Built-in partial expansion capabilities. Based on the above-mentioned expansion capabilities, we also provide an extension package separately, which is used to store common nodes and components precipitated under the customer service business, such as nodes and data adapters oriented to BPMN specifications, and default menus. Note that extensions can be installed separately and can be imported on demand.
Based on the above expanded capabilities, front-end R&D can flexibly develop required nodes, components, etc. according to the needs of actual business scenarios. The following are two flow charts based on LogicFlow's expansion capabilities:
BPMN
Approval Process
▍ 3. Positioning comparison
The above figure compares several open source frameworks that are familiar to everyone through horizontal and vertical dimensions to understand the positioning of LogicFlow. The horizontal axis is the richness of the framework's graph visualization capabilities. The higher the vertical axis, the higher the maturity of the framework in business process applications, and the lower the development cost for initial deployment. Let us introduce these frameworks separately:
As a workflow engine, activiti provides front-end and back-end solutions, and a set of business process management platform can be deployed with simple secondary development;
Bpmn.js: A flowchart editor designed based on the BPMN2.0 specification;
G6: antv focuses on graphic visualization and various analysis charts. Such as ecological tree, brain map, radiation map, indentation map, etc.;
X6: Graph editing engine, the core capabilities are nodes, connections and canvases. Not only supports flowcharts, but also Dag diagrams and ER diagrams.
LogicFlow is positioned between Bpmn.js and X6 in the above figure, filling the gap in the middle. The core provides a flowchart editor, and supports the process nodes and data formats required by BPMN and other specifications through expansion capabilities to meet the current business status.
3.
Implementation principle and architecture
▍ 1. Overall structure diagram
The core package @logicflow/core provides the basic capabilities of the flowchart editor, and the @logicflow/extension on the right is a plug-in developed based on @logicflow/core.
▍ 2. Design scheme of flowchart editor
Mainly introduce the important selection and scheme design of the flowchart editor:
2.1 Graph rendering scheme
Front-end drawing graphics are nothing more than three ways of HTML + CSS, Canvas, and Svg. We made a comprehensive comparison and listed the corresponding advantages and disadvantages:
In the flow chart scenario, there is no need to render a large number of nodes (up to several thousand elements), and the requirements for animation are not high. Svg's DOM-based features will be more suitable for us. One is that the cost of learning and development is lower, and the other is that there are more extensions based on DOM. However, the Svg tag does not support inserting other tags such as div, so when implementing certain functions, it needs to be combined with other HTML tags.
So in the end we chose to use HTML + Svg to complete the rendering of the graph. Svg is responsible for the graphics and lines, and HTML is used to implement layers such as text, menus, and backgrounds.
2.2 Module abstraction
Based on the above scheme, the next step we need to do is to classify and abstract the realization of a flow chart.
Via the image above:
We built multiple layers to take on different responsibilities to facilitate functional and capability expansion. The top layer is the Svg layer. All graphics (nodes, lines, alignment lines, outLine, etc.) are rendered on the Svg, and are also responsible for listening to various events on the graph. The lower layer of Svg is the component layer, which is responsible for expanding UI components; the Grid layer, which is responsible for rendering the grid; the background layer, which adds a custom background;
The responsibility of Shape is mainly based on Svg's encapsulation of graphics rendering, providing default styles, converting attributes passed in by users, etc., mainly including Rect, Circle, Ellipse, Polygon, Path, PolyLine, Text, etc., to facilitate internal reuse of LogicFlow. For example, both circular nodes and anchor points require Circle;
Based on Shape, many small elements are also implemented, such as the anchor points needed by nodes and lines, such as arrows on the line, etc.;
BaseNode and BaseEdge are the encapsulation of the general capabilities of nodes and lines, aggregate shapes, anchor points, text, and also encapsulate the processing of events and styles. By inheriting BaseNode and passing in shape, we can get renderable nodes such as RectNode and CircleNode.
Because the flowchart is rich in interaction or re-editing, with these basic modules, the next thing to do is rich in interaction scheme design, that is, any operation performed by the user on the diagram must be responded to. For example, if I trigger the dragging of a node, the associated line may need to move accordingly, and it can also identify whether there are other nodes (alignment lines) on a certain horizontal line.
2.3 MVVM + Virtual DOM
First of all, we consider that the entire graph editor has a lot of state storage, and in order to realize the response of each module on the editing graph, it must have state communication capabilities. Second, if functions like redo/undo are to be realized, the entire image must be rendered based on data, that is, fn(state) => View, and a better way is to drive View through Model.
In the end, we chose to build LogicFlow's graph editor based on MVVM, a design pattern widely used in current front-end engineering, to define the View and Model layers of the graph, so that the engineering code has a certain degree of decoupling. At the same time, Mobx is introduced to realize our state management and data response capabilities, and a graph communicates state based on a Model. In addition, another reason to consider Mobx is: as long as I want, it can do the most fine-grained data binding (observation), which can reduce unnecessary rendering.
Here is an MVVM diagram of the LogicFlow graph editor:
As can be seen from the above figure, the View layer (graph, node, etc.) will respond/update after the Model changes through data binding. We mentioned earlier that the rendering of the graph is based on Svg + HTML, so the update of the View layer is nothing more than two options: imperative and declarative:
imperative. For example, the API of jQuery, $('.rectNode').attrs({x: 1, y: 2}), is actually quite cumbersome to operate the DOM code in this way, and the code written in heavy interaction scenarios will be more redundant . Although we finally found a library that can conveniently support drawing in an imperative way - antv/g.
Declarative. For example, one of the core capabilities of View frameworks such as React/Vue is to achieve state => UI and build DOM in a declarative way. Whenever the state changes, the UI will be updated.
In addition to considering the cumbersome writing of imperative code in the DOM operation scenario, another reason is the cost of DOM operation. Under the design of updating UI based on State, we naturally thought of introducing Virtual DOM to solve some problems. The update efficiency in the scene can also make up for the rendering performance problems that may be caused by "rendering graphics based on Svg" to a certain extent.
In short, the two most fundamental reasons for choosing the MVVM design pattern and introducing Virtual DOM are:
Improve the development efficiency in our graph editor scenario.
And under the HTML + Svg graph rendering scheme, better performance can be pursued.
We made a rendering performance comparison with X6. Under the same operating environment, we measured the time it took LogicFlow and X6 to render the flow chart at nodes/offlines of different magnitudes. Theoretically, the shorter the rendering time, the better the performance. Behave well.
Through the above table, we calculated that the initial rendering speed of LogicFlow is better than that of X6, and this has not yet enabled the on-demand loading function of LogicFlow, which also verified our technology selection. You can also test it on the example page:
https://yhlchao.github.io/LF-VS-Other/
2.4 Event System
Introduced the design we made in "state" and "response". To collect various "operations" of users and report and bubble them in time requires an event system. The most important thing is multiplexing and unified reporting.
Reuse refers to how to ensure that all nodes and lines have default event callbacks, and how to share processing logic for complex events (drag and drop).
Behavior. For the processing of complex events, we have packaged functions and classes. For example, Drag uses mousemove, down, and up to simulate the dragEnter, dragOver, dragEnd, and drop events of h5. DnD uses the abstract dragsource and droptarget Realize the interaction between drag and drop, such as dragging and dropping to create nodes;
As mentioned in the module abstraction section above, there are abstractions such as BaseNode and BaseEdge inside. Both built-in nodes and custom nodes obtain common capabilities by inheriting the base class, so the default event callbacks inside LogicFlow are actually reused through inheritance;
EventCenter. Unified reporting is done through the event bus, and all user behavior events captured internally are reported to the EventCenter according to a certain specification and format emit(ev, args), and finally bubbled to the LogicFlow class, which interacts with the host in a unified manner. In addition, events can be triggered and monitored through EventCenter anywhere in the diagram editor.
2.5 Tool Center
The positioning of the tool center is utils that solve certain types of specific problems, such as the above-mentioned Behavior (encapsulation of complex events) and EventCenter. In addition, in the process of graph editing, if a better interactive effect is to be achieved, there are actually a lot of complex calculation logic to be processed.
Coordinate System. The clientX and clientY coordinate systems of the browser, as well as the coordinate system of the Svg graph itself, when zooming and panning of the graph, the two coordinate systems are different, and conversion between the two coordinate systems is required during event processing.
Algorithm. It is dedicated to dealing with some problems of visualization through geometry and algorithms. For example: when a node has multiple polylines connected in the same direction, how to merge the paths to make the display more beautiful, as follows:
How to calculate the tangent point of a line to a graph, so as to reach the position where the line can connect to the non-anchor point of the graph, as shown in the figure below:
History. It mainly provides redo and undo capabilities. Two stacks are used to store undos and redos, and the maximum length is limited. Thanks to the MVVM design pattern, it is convenient to observe data changes and model-driven View.
▍ 3. Scalability
After introducing the design scheme of the flowchart editor, let's introduce another important feature of LogicFlow, the design of scalability. For LogicFlow, it is a development framework to solve problems in a certain field. First, the API must be scalable; in addition, LogicFlow also provides a view layer, which should allow users to do secondary development in the View part. After the direction of these two expansions is determined, the most important thing is to combine the business needs to meet the current and future business scenarios foreseen for a period of time, but not over-design.
3.1 Design on API
First of all, LogicFlow's user-oriented layer is completely encapsulated based on object-oriented design patterns. The biggest advantage is that almost every programmer is familiar with its use, and its use cost is low. You can understand it through the following initialization method.
Through the class LogicFlow, the user can get an instance of a flow chart after instantiating it once, and the state is also private, and various usage methods can be called through the instance of lf.
A summary of the design of API extensions:
Object-oriented design pattern, LogicFlow internal packaging, users can do inheritance, rewrite interface/method;
method design. The first is to have fixed types of input and output. In addition, LogicFlow also provides a method similar to extends, which extends the method on the prototype through LogicFlow.use(fn);
Communicate through the observer mode, that is, provide the on method for the host to subscribe to various internal events;
The graph data can be customized. No matter what custom business attributes a node or line has, or what kind of data to export from the flow chart, it should be able to be customized.
3.2 Plug-in
The scalability of the View layer, in addition to the ability for users to customize the presentation, is the most important thing is plug-in, because on the road of process visualization, different business scenarios require different capabilities, and it is difficult for LogicFlow to support all of them. Scenarios, so it is a better choice to provide good plug-in and plug-in capabilities and allow users to perform secondary development. Currently, on the UI interface, we have opened up two capabilities:
Nodes and lines support secondary development, that is, custom nodes and lines.
Developable UI components are registered in LogicFlow's component canvas.
Based on the idea of plug-in, we have supported different business systems, and in the process, we have precipitated some general capabilities and encapsulated them in the lf-extension package, such as nodes used to support the BPMN specification. Currently, extensions in the extension are mainly divided into four categories: UI components, custom nodes, APIs, and adapters.
4.
future plan
The first is the ease and richness of the API. In addition to our current iteration plan (see the project in the github warehouse for details), the specific function scope will be added after prioritization according to the needs of users. We also hope that you can provide more comments and needs. The keynote of this direction is to maintain the visual positioning of the LogicFlow process, enrich the API of the core, and enhance the capabilities of the extension.
Second is better documentation and examples. The main reason is that the documentation is easy to read and complete, and there are complete examples and codes for developers to copy and paste code. Currently, the examples are only the react version, and the vue version examples will be added before 2021.4.
Finally, it is not only a process visualization library, but also a complete set of solutions is expected. LogicFlow only solves the technical problems of front-end flow chart editing, but regarding the definition of graph data and how the process is finally executed, a supporting process engine is needed.
At present, our team also has a corresponding solution for the "process engine" - turbo (the Java version is open source: https://github.com/didi/turbo), we will make LogicFlow and turbo into an end-to-end solution, And provide a complete application example. In addition, the Nodejs version of the engine is also planned, we will wait and see.
5.
write at the end
Through this article, I believe that you already have a general understanding of LogicFlow. If you also have process visualization demands in your business and have high scalability requirements, then LogicFlow will be a good choice. You are also welcome to communicate with us about the implementation details of the LogicFlow technology itself and discussions about similar businesses. We will have more articles in the future to introduce LogicFlow's technical design details and some of our thinking on visualization, business process, logic arrangement and other fields. Please look forward to it.
LogicFlow official website: http://logic-flow.org/
github warehouse address: https://github.com/didi/LogicFlow
open source team
▬
further reading
▬
内容编辑 | Mango联系我们 | [email protected]