CN113741965A - Method, device and equipment for arranging flow chart and storage medium - Google Patents

Abstract

The invention relates to the field of artificial intelligence, and discloses a method, device, device and storage medium for arranging a flowchart. The method includes: displaying a drawn target flowchart in a canvas area through a canvas component in response to a user drawing operation; Through the interactive component, the user configuration information is added to the flow chart data structure of the target flow chart; through the pop-up window component, the configuration sub-pages at different levels in the node configuration page of the target general node are rendered and displayed to guide the user in different configurations. Input matching user configuration information in the sub-page; through the main business component, in response to the target flowchart processing instruction for the target flowchart, the flowchart data structure of the target flowchart is sent to the underlying interface matching the target flowchart processing instruction. The technical solution of the embodiment of the present invention realizes the logical layering of the flow chart implementation architecture, enhances the flexibility of the arrangement of the flow chart implementation code, and reduces the maintenance cost of the implementation code.

Description

A method, device, device and storage medium for arranging a flowchart

technical field

The embodiments of the present invention relate to the technical field of artificial intelligence, and in particular, to a method, apparatus, device, and storage medium for arranging a flowchart.

Background technique

At present, users can use various general functional components provided by the service platform in a unified service platform to customize and build various personalized service processes, such as the process of automatic approval of products and the data processing process based on artificial intelligence. Wait. Among them, when using different types of functional components (for example, polling components, loop execution components or condition judgment components) to carry out the personalized construction of custom service processes, it is necessary to customize the various functional components used. configuration. For some functional components that require complex configuration, multiple levels of user configuration may be required.

In order to realize the construction function of the above-mentioned personalized service process, the programmer needs to construct the implementation code of the service platform accordingly. In the process of realizing the present invention, the inventor found that: the implementation code of the service platform constructed by the prior art did not carry out reasonable code arrangement, and would fuse various codes together, causing the dilemma that the code was difficult to maintain. When a new functional component needs to be added to the service platform, or a new functional component configuration page, the original implementation code needs to be greatly modified, and the modification workload is large, which affects the whole body.

SUMMARY OF THE INVENTION

Embodiments of the present invention provide a method, device, device and storage medium for arranging flowcharts, which can implement logical layering of flowchart implementation codes, enhance the arranging flexibility of flowchart implementation codes, and reduce the maintenance workload of implementation codes.

In a first aspect, an embodiment of the present invention provides a method for arranging a flowchart, including:

Through the canvas component, in response to the user's drawing operation, the drawn target flow chart is displayed in the canvas area, and the target flow chart includes a plurality of general nodes with connection relationships;

Through the interaction component, in response to the input instruction for the configuration information of the node configuration page of the target general node in the target flow chart, the user configuration information input for the node configuration page is added to the flow chart data structure of the target flow chart;

Through the pop-up window component, the configuration sub-pages of different levels in the node configuration page of the target general node are rendered and displayed, so as to guide the user to input matching user configuration information in different configuration sub-pages;

Through the main service component, in response to the target flowchart processing instruction for the target flowchart, the flowchart data structure of the target flowchart is sent to the underlying interface matching the target flowchart processing instruction.

In a second aspect, an embodiment of the present invention further provides an apparatus for arranging a flowchart, including:

The target flowchart drawing module is used to display the target flowchart obtained by drawing in the canvas area in response to the user's drawing operation through the canvas component, and the target flowchart includes a plurality of general nodes with connection relationships;

The general node configuration module is used for adding the user configuration information input for the node configuration page to the flow of the target flow chart through the interaction component in response to the input instruction for the configuration information of the node configuration page of the target general node in the target flow chart In the graph data structure;

The configuration sub-page rendering and display module is used to render and display the configuration sub-pages of different levels in the node configuration page of the target general node through the pop-up window component, so as to guide the user to input matching user configuration information in the different configuration sub-pages;

The bottom layer interface calling module is used for sending the flowchart data structure of the target flowchart to the bottom layer interface matching the target flowchart processing instruction in response to the target flowchart processing instruction for the target flowchart through the main business component.

In a third aspect, an embodiment of the present invention further provides a computer device, the computer device comprising:

processor;

a storage device for storing programs;

When the program is executed by the processor, the processor executes the method for arranging the flowchart provided by any embodiment of the present invention.

In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, the storage medium stores a computer program, and when the program is executed by a processor, implements the method for arranging the flowchart provided by any embodiment of the present invention.

The technical solution provided by the embodiment of the present invention obtains the canvas component, the interactive component, the pop-up window component and the main business component by layering the implementation code of the flowchart service platform, and responds to different operations of the user through matching The functional component realizes the drawing of the flow chart, provides a solution of layered architecture, realizes the reasonable code arrangement of the service platform, and enhances the flexibility of the arrangement of the flow chart implementation code; When configuring the page of functional components, you only need to modify the matching components, which will not affect the overall architecture of the service platform implementation code, which greatly reduces the post-maintenance cost and maintenance workload of the implementation code.

Description of drawings

1A is a flowchart of a method for arranging a flowchart in an embodiment of the present invention;

1B is a schematic diagram of a configuration sub-page in an embodiment of the present invention;

1C is a schematic diagram of a pop-up window page in an embodiment of the present invention;

1D is a schematic diagram of a pop-up window page in an embodiment of the present invention;

1E is a schematic diagram of a pop-up window page in an embodiment of the present invention;

2 is a flowchart of a method for arranging a flowchart in another embodiment of the present invention;

3A is a flowchart of a method for arranging a flowchart in another embodiment of the present invention;

3B is a schematic page diagram of a flowchart service platform in another embodiment of the present invention;

3C is a schematic diagram of the architecture of a service platform implementation code in another embodiment of the present invention;

4 is a schematic structural diagram of an apparatus for arranging a flowchart according to another embodiment of the present invention;

FIG. 5 is a schematic structural diagram of a computer device in another embodiment of the present invention.

Detailed ways

Embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. While certain embodiments of the invention are shown in the drawings, it should be understood that the invention may be embodied in various forms and should not be construed as limited to the embodiments set forth herein, but rather are provided for the purpose of A more thorough and complete understanding of the present invention. It should be understood that the drawings and embodiments of the present invention are only used for exemplary purposes, and are not used to limit the protection scope of the present invention.

It should be understood that the various steps described in the method embodiments of the present invention may be performed in different orders and/or in parallel. Furthermore, method embodiments may include additional steps and/or omit performing the illustrated steps. The scope of the present invention is not limited in this regard.

As used herein, the term "including" and variations thereof are open-ended inclusions, ie, "including but not limited to". The term "based on" is "based at least in part on." The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". Relevant definitions of other terms will be given in the description below.

It should be noted that concepts such as "first" and "second" mentioned in the present invention are only used to distinguish different devices, modules or units, and are not used to limit the order of functions performed by these devices, modules or units or interdependence.

It should be noted that the modifications of "a" and "a plurality" mentioned in the present invention are illustrative rather than restrictive, and those skilled in the art should understand that unless the context clearly indicates otherwise, they should be understood as "one or a plurality of" multiple".

The names of messages or information exchanged between multiple devices in the embodiments of the present invention are only used for illustrative purposes, and are not used to limit the scope of these messages or information.

The embodiments of the present invention can arrange the data processing flow of the artificial intelligence technology. Among them, artificial intelligence (AI) is a theory, method, technology and application system that uses digital computers or machines controlled by digital computers to simulate, extend and expand human intelligence, perceive the environment, acquire knowledge and use knowledge to obtain the best results. .

The basic technologies of artificial intelligence generally include technologies such as sensors, special artificial intelligence chips, cloud computing, distributed storage, big data processing technology, operation/interaction systems, and mechatronics. Artificial intelligence software technology mainly includes computer vision technology, robotics technology, biometrics technology, speech processing technology, natural language processing technology, and machine learning/deep learning.

FIG. 1A is a flowchart of a method for arranging a flowchart according to an embodiment of the present invention. The embodiment of the present invention is applicable to the case where the flowchart is drawn by layering the architecture of the flowchart service platform implementation code, The method may be performed by means of compiling flowcharts, which may consist of hardware and/or software, and may generally be integrated in computer equipment for providing flowchart drawing services. As shown in Figure 1A, the method specifically includes the following steps:

S110. Display the target flowchart obtained by drawing in the canvas area in response to the user's drawing operation through the canvas component.

Among them, the canvas component is an encapsulated code program used to respond to the user's flowchart drawing operation; typically, the canvas component can be implemented based on the existing Gojs component, and the Gojs component is a JavaScript-based flowchart construction component. With functions such as flowchart drawing, connection, deletion, undo and redo, it is powerful, fast and lightweight.

In this embodiment, the canvas component can be used to draw the overall target flow chart and display the drawn target flow chart.

In this embodiment, the target flow chart includes a plurality of general nodes with a connection relationship; wherein, the general node is used to realize the preset minimum process processing function; the general node may include a polling node, a condition control node and a loop Execute nodes, etc. By setting matching custom parameters for each general node, and connecting each general node according to the preset connection relationship to obtain the target flow chart, each general node in the target flow chart is triggered to execute different functions in the order of the node connection relationship. The process processing function can finally realize various user-defined and complex process processing functions, that is, a target flowchart is composed of multiple general nodes whose execution order is pre-arranged to realize the matching process processing function. .

It should be noted that, the user's drawing operation may be a drag instruction for the user to drag a common node in the common node library to the canvas, a user's selection instruction for the common node in the common node library, A connection command executed by a general node, the user's undo command for setting a drag command or a connection command, a user's delete command for setting a general node or connection in the canvas, and the user's execution for the current drawing flowchart. Redo instructions, etc., are not limited in this embodiment.

S120. Through the interaction component, in response to the input instruction for the configuration information on the node configuration page of the target general node in the target flowchart, add the user configuration information input on the node configuration page to the flowchart data structure of the target flowchart.

Among them, the interactive component is a code program that is packaged and supports the information configuration of each general node included in the flow chart; the configuration information input instruction is the command information for the user to input the configuration information on the node configuration page, The click action of the information item in the configuration page. User configuration information, which is personalized feature information set by the user for one or more target general nodes included in the target flow chart; user configuration information can include the data type of input or output of the target general node, such as constants, variables and function etc.

In an optional implementation of this embodiment, after the user completes the drawing of the target flowchart, the user can select the target that needs to be user-defined configuration in the target flowchart by single-clicking, double-clicking or long-pressing General node, at this time, it will trigger the activation of the interactive component, the interactive component will correspondingly pop up the node configuration page that matches the target general node, and through the node configuration page, receive one or more configurations configured by the user for the target general node Item user configuration information.

Specifically, one or more general nodes included in the target flow chart may include default configuration values of configurable parameters. When the user chooses not to configure a certain general node or a certain configuration parameter in the general node, the The general node can directly use the default configuration value of the corresponding configuration parameter; or, one or more general nodes included in the target flow chart may include required configuration parameters. In order to ensure that the target flow chart can be executed normally, the user must Required configuration parameters for common nodes, configure matching configuration values.

The target flow chart corresponds to a flow chart data structure, and the flow chart data structure includes the realization codes of the flow processing functions implemented by all general nodes in the target flow chart. Typically, the flowchart data structure may include one or more blank data areas to be filled, or data areas to be updated, for using user configuration information input by the user for one or more target general nodes, corresponding to the blank data areas filled in. In the data area, or update and store the data in the data area to be updated.

In this embodiment, after obtaining the target flow chart that has been drawn, the service platform displays the node configuration page matching the target general node to the target user through the interactive component and according to the target user's selection instruction on the target general node, and according to The target user enters an instruction in the configuration information of the node configuration page, and fills the user configuration information corresponding to the target general node into the flow chart data structure of the target flow chart to realize the custom configuration of the target general node.

It should be noted that the node configuration pages corresponding to different general nodes in the target flow chart are the same or different, and the user configuration information configured by the corresponding target users for different general nodes may also be different; typically, different general nodes may correspond to different levels. The node configuration page of , or corresponding to the same level, but the corresponding level corresponds to different information configuration items. In this embodiment, by configuring the corresponding user configuration information for each general node in the target flow chart through the interaction component, the personalized configuration of each general node in the target flow chart can be realized on the basis of drawing the personalized target flow chart.

S130. Render and display the configuration sub-pages of different levels in the node configuration page of the target general node through the pop-up window component, so as to instruct the user to input matching user configuration information in the different configuration sub-pages.

Among them, the pop-up window component is a code program used to realize the node configuration page and the corresponding configuration sub-page display; in this embodiment, the node configuration page and the configuration sub-page can both be displayed in the form of pop-up windows, and different common nodes The node configuration page can correspond to configuration sub-pages at different levels.

In addition, optionally, on the basis of each configuration sub-page, according to the configuration information item selected by the user in the configuration sub-page, different levels of pop-up window pages can be further displayed through the pop-up window component, so as to realize a deeper level of common nodes. Customize settings.

As shown in Figure 1B, taking the general node of Calling Node as an example, its node configuration page includes four-layer configuration sub-pages of BasicInformation, Model Configuration, I/O Parameter and Code Confirmation; among them, taking the I/O Parameter configuration sub-page as an example, It includes the Advanced configuration information item, and the Advanced configuration information item requires advanced configuration, so it is necessary to further display the pop-up window page, as shown in Figure 1C, the pop-up window page corresponding to the Advanced configuration information item includes Constant, Variable, Calculation, Function and Jugement Five types of configuration information; further take the Function configuration information as an example, the corresponding further pop-up page is shown in Figure 1D, and when the user selects the Add Variable option, a further pop-up window will be displayed, as shown in Figure 1E As shown, the user can select the specific variable value; therefore, based on the pop-up window of the I/O Parameter configuration sub-page, a three-layer pop-up window page is further displayed.

It is worth noting that the display content and display timing of different configuration sub-pages in different node configuration pages are triggered and controlled by the pop-up window component. Specifically, after the target user enters the corresponding user configuration information in the node configuration page, the corresponding configuration sub-page is determined according to the user configuration information through the pop-up window component, and the configuration sub-pages of each level are displayed according to the preset default display order. Render the display to obtain the user configuration information entered by the target user on the configuration sub-pages at various levels.

In this embodiment, each level configuration sub-page corresponding to the node configuration page of the target general node is rendered and displayed by the pop-up window component, so that the target user can customize the multi-level configuration information of the target general node and make the target general Nodes can express more complex logic and adapt to more complex scenes.

S140. Through the main service component, in response to the target flowchart processing instruction for the target flowchart, send the flowchart data structure of the target flowchart to the underlying interface matching the target flowchart processing instruction.

Among them, the main business component is a code program that supports the realization of the data structure operation on the target flow chart. The target flowchart processing instruction is the operation command information for the target flowchart sent by the target user; the target flowchart processing instruction may include: operation instructions for saving, publishing, emulating and executing; and different flowchart processing instructions are associated with different The underlying interface, different underlying interfaces are used to implement different operational functions.

Specifically, the page carrying the canvas and the general node library also includes various functional controls. After the user completes the drawing of the target flowchart, the user can click to select the corresponding functional control to trigger the generation of the corresponding target flowchart processing instruction; for example; , click the save function control to issue the target flowchart save instruction; then the flowchart drawing service platform calls the main business component when receiving the target user's target flowchart processing instruction, and sends the flowchart data structure of the target flowchart to the corresponding the underlying interface. The underlying interface is used to perform operations matching the processing instructions of the target flowchart.

In this embodiment, by executing the corresponding operation on the drawn target flow chart through the main service component, the simulation execution of the target flow chart and the final saving and other operations can be realized.

It should be noted that, since the implementation code of the flowchart is divided into corresponding functional components, on the basis of the above functional components, components can be added or modified adaptively according to task requirements, and there is no need to modify existing components. The overall adjustment of the implementation code structure of the system can reduce the workload of function expansion, which in turn can reduce the maintenance cost of the flowchart implementation code.

In this embodiment, optionally, through the main business component, in response to the target flowchart processing instruction for the target flowchart, the flowchart data structure of the target flowchart is sent to the underlying interface that matches the target flowchart processing instruction, Can include:

Through the main business component, the underlying interface matching the target flowchart processing instruction is obtained; through the main business component, if it is determined that the underlying interface does not match the flowchart data structure, the flowchart data structure is formatted conversion, and send the format conversion result to the underlying interface for processing; through the main business component, if the data processing result fed back by the underlying interface is received, the data processing result is reversely formatted; through the main business component , providing the inverse format conversion result to the canvas component, so as to trigger the canvas component to echo the inverse format conversion result in the canvas area.

Among them, different underlying interfaces are used to execute target flowchart processing operations corresponding to different target flowchart processing instructions; optionally, in the interaction component, the mapping relationship between the target flowchart processing instructions and the underlying interfaces is pre-stored; After reaching the target flow chart processing instruction of the target user, according to the target flow chart processing instruction, the pre-stored mapping relationship is searched to obtain the matching underlying interface, which can realize the accurate determination of the matching underlying interface.

It should be noted that the data format corresponding to the underlying interface is preset, and one underlying interface can correspond to multiple data formats; therefore, after determining the underlying interface corresponding to the target flowchart processing instruction, the interactive component needs to further determine the flowchart. Whether the data structure conforms to the preset processable data format matching the underlying interface; if it is determined not to conform, the corresponding format conversion is performed on the flowchart data structure to process the format-converted flowchart data structure through the underlying interface.

Secondly, when the main service component receives the data processing result fed back by the underlying interface, for example, the target flowchart processing instruction is a simulation instruction, and the simulation is completed, a corresponding simulation result will be generated. Specifically, if the data format of the data processing result is different from the data format that can be displayed in the canvas area, the corresponding reverse format conversion is performed on the data processing result, and the reverse format conversion result is sent to the canvas component, so that the reverse format can be reversed through the canvas component. The format conversion result is displayed.

In this embodiment, the canvas component, the interactive component, the pop-up window component and the main business component are independently encapsulated in different classes, which realizes the logical layering of the architecture. When the programmer chooses to add a common node, he only needs to update the canvas accordingly. The relevant logic in the component is enough; when the programmer chooses to update a node configuration page, he only needs to update the relevant logic in the pop-up window component accordingly, and other parts of the code do not need to be modified, which greatly saves the programmer's code maintenance. workload.

The technical solution provided by the embodiment of the present invention obtains the canvas component, the interactive component, the pop-up window component and the main business component by layering the implementation code of the flowchart service platform, and responds to different operations of the user through matching The functional component realizes the drawing of the flow chart, provides a solution of layered architecture, realizes the reasonable code arrangement of the service platform, and enhances the flexibility of the arrangement of the flow chart implementation code; When configuring the page of functional components, you only need to modify the matching components, which will not affect the overall architecture of the service platform implementation code, which greatly reduces the post-maintenance cost and maintenance workload of the implementation code.

Another embodiment of the present invention provides a method for arranging a flow chart. Based on the above-mentioned embodiments, this embodiment specifically introduces that the drawn object is displayed in the canvas area in response to the user's operation on the general node through the canvas component. flow chart.

FIG. 2 is a flowchart of a method for arranging a flowchart provided by another embodiment of the present invention. Based on the above technical solution, this embodiment provides a method for arranging a flowchart, and the method includes:

S210. In response to the flowchart drawing instruction, trigger the calling of the canvas component.

The flowchart drawing instruction is sent by the target user, and the starting command information for flowchart drawing may include a flowchart creation instruction; after receiving the flowchart drawing instruction, the service platform automatically triggers the calling operation of the canvas component. Support for subsequent flowchart drawing of target users can be realized.

S220 , displaying the general node library to the user through the canvas component, and initializing and constructing a flowchart data structure matching the target flowchart.

Wherein, the general node is pre-associated with a pre-packaged component data structure for realizing the function of setting the process; the general node library includes at least one general node.

In this embodiment, after receiving the flowchart drawing instruction and triggering the call to the canvas component, the service platform further displays the general node library through the canvas component; typically, the general node library can be displayed on the left side of the canvas area. It can be displayed on the side or the right side, and can be displayed in a tree structure. This embodiment does not specifically limit the display position and display form of the general node library.

Secondly, while displaying the general node library, construct an initialization flow chart data structure corresponding to the target flow chart; the initialization flow chart data structure may be a flow chart data structure corresponding to preset configuration information, or a corresponding configuration information An empty flowchart data structure. By pre-initializing and constructing a flowchart data structure corresponding to the target flowchart, when you customize the configuration information of the target flowchart, you only need to modify it on the basis of the initialized flowchart data structure, which can improve the customization of the target flowchart. Configuration efficiency.

S230 , through the canvas component, in response to the user's drawing operation, display the drawn target flowchart in the canvas area.

Wherein, the target flow chart includes a plurality of general nodes with a connection relationship.

In a specific implementation of this embodiment, the target user can click and select the general node to be used in the general node library to realize the drawing of the flowchart; for example, the user can click the target general node in the general node library with the mouse , and copy the target general node, paste the copied target general node to the corresponding position in the canvas area, and then combine and connect multiple general nodes to finally realize the drawing of the target flowchart.

In this embodiment, optionally, through the canvas component, in response to the user's drawing operation, displaying the target flowchart obtained by drawing in the canvas area, which may include:

Through the canvas component, in response to the drag operation for the first general node in the general node library, the first general node is dragged and displayed in the canvas area; The node-matched component data structure is added to the flowchart data structure.

Wherein, each common node is pre-associated with a pre-packaged component data structure for realizing the setting process processing function.

It should be noted that the canvas component also supports the target user to select the general node by dragging and dropping; specifically, the general node selected by the target user's click is used as the first general node, and the mouse is released in the canvas area. As the display position of the first general node, the display of the first general node is realized; at the same time, the component data structure matching the first general node is added to the initially constructed flowchart data structure.

In addition, optionally, the canvas component can also support the user to select multiple first common nodes in the common node library at the same time, and synchronously drag and drop multiple common nodes to the canvas area for display, which can improve the efficiency of flowchart drawing.

In this embodiment, optionally, by using the canvas component, in response to the user's drawing operation, displaying the target flowchart obtained by drawing in the canvas area, it may further include: using the canvas component, in response to the target flow chart in the canvas area, in response to The connection instruction of the general node and the third general node, according to the connection direction in the connection instruction, generate and display the connection line connecting the second general node and the third general node in the canvas area; The canvas component adds the connection relationship between the second general node and the third general node to the flowchart data structure.

Specifically, after the service platform realizes the selection and display of common nodes through the canvas component, it further displays the corresponding connecting lines between the corresponding common nodes through the canvas component and according to the connection instruction of the target user; at the same time, through the canvas component , the connection relationship corresponding to the connection line is added to the corresponding flow chart data structure, and the construction of the overall structure of the flow chart is realized.

When the user chooses to drag and drop one or more general nodes to the canvas area, the canvas component will correspondingly combine the component data structures of the above general nodes and add them to the flow chart data structure corresponding to the target flow chart. At the same time, according to the connection operation performed by the user on each general node, the connection relationship between each general node can be further added to the flowchart data structure; for example, the user performs the connection from general node A to general node B operation, the corresponding connection relationship From A to B can be generated and added to the corresponding flowchart data structure.

S240. Through the interaction component, in response to the input instruction for the configuration information on the node configuration page of the target general node in the target flowchart, add the user configuration information input on the node configuration page to the flowchart data structure of the target flowchart.

Correspondingly, the user configuration information is filled into at least one blank filling item in the component data structure of the target general node, so as to realize the custom configuration of the general node.

In an optional implementation of this embodiment, the user configuration information input for the node configuration page is added to the node configuration page in response to the input instruction for the configuration information of the node configuration page of the target general node in the target flowchart through the interaction component. The flowchart data structure of the target flowchart can include:

Through the interactive component, the node type corresponding to the target general node is obtained, and the node configuration page matching the node type is displayed; through the interactive component, the user configuration information input by the user in the node configuration page is displayed, Correspondingly fill in the blank filling area matching the target general node in the flowchart data structure.

Among them, at least one blank padding area is included in the component data structure of the general node, which is used to realize the custom configuration of the general node; by reserving a blank area in the component data structure of each general node, you can After the configuration information is defined, it is directly added to the corresponding reserved blank padding area, which can avoid modification of other parts of the component data structure and improve the custom configuration efficiency of common nodes.

Specifically, the types of common nodes (polling, looping, or conditions, etc.) are different, and the structures of the corresponding custom configuration pages are also different. The target user selects the target general node in the target flow chart, and sends a node configuration request including the target general node identifier to the service platform; after receiving the target user's node configuration request through the interactive component, the service platform determines the target general node identifier according to the target general node identifier. The node type that matches the current target general node, and the node configuration page corresponding to the node type is displayed. Further, the target user enters the configuration information in the displayed node configuration page, and after the service platform obtains the user's user configuration information through the interactive component, it fills the user configuration information into the blank filling area matching the target general node, realizing the Custom configuration for the target generic node.

S250. Render and display the configuration sub-pages at different levels in the node configuration page of the target general node through the pop-up window component, so as to instruct the user to input matching user configuration information in the different configuration sub-pages.

S260. Through the main service component, in response to the target flowchart processing instruction for the target flowchart, send the flowchart data structure of the target flowchart to the underlying interface matching the target flowchart processing instruction.

According to the technical solution provided by the embodiment of the present invention, before the user performs the flowchart drawing operation, the service platform executes the trigger operation of calling the canvas component according to the user's flowchart drawing instruction, and realizes the display of the general node library through the canvas component, and Initialization and construction of the flowchart data structure; further, through each functional component responding to the corresponding operation instructions of the target user, the efficiency of the flowchart layout is improved; When the user's configuration information is obtained, the user's configuration information is directly added to the corresponding blank fill area through the interactive component, which improves the custom configuration efficiency of the general node.

Another embodiment of the present invention provides a method for arranging a flowchart. Based on the above-mentioned embodiments, this embodiment specifically introduces that after adding user configuration information to the flowchart data structure of the target flowchart, the target The general node is data bound with the user configuration information, and when the configuration is completed, the user configuration information is echoed back.

3A is a flowchart of a method for arranging a flowchart provided by another embodiment of the present invention. Based on the above technical solution, this embodiment provides a method for arranging a flowchart, and the method includes:

S310. In response to the flowchart drawing instruction, trigger calling of the canvas component.

S320 , displaying the general node library to the user through the canvas component, and initializing and constructing a flowchart data structure matching the target flowchart.

The general node is pre-associated with a pre-packaged component data structure for realizing the setting process processing function.

S330 , through the canvas component, in response to the user's drawing operation, display the drawn target flowchart in the canvas area.

Wherein, the target flow chart includes a plurality of general nodes with a connection relationship.

S340. Through the interaction component, in response to the input instruction for the configuration information on the node configuration page of the target general node in the target flowchart, add the user configuration information input on the node configuration page to the flowchart data structure of the target flowchart.

S350. Through the interaction component, in response to the input instruction for the configuration information on the node configuration page, perform a data binding relationship between the target general node and the user configuration information input on the node configuration page.

Specifically, the service platform adds the configuration information input by the user on the node configuration page to the flow chart data of the target flow chart through the interactive component according to the received user input command for the configuration information of the node configuration page of the target general node in the target flow chart. After the structure is in place, data binding is further performed on the target general node and the user configuration information through the interaction component, so as to obtain the mapping relationship between the target general node and the user configuration information.

S360. Through the interaction component, in response to the configuration completion instruction matching the target general node, according to the data binding relationship, echo the user configuration information to the display matching the target general node in the canvas area within the area.

In this embodiment, when receiving the configuration completion instruction for the target general node sent by the target user, the service platform displays the user configuration information through the interactive component according to the recorded data binding relationship between the target general node and the user configuration information In the display area of the canvas area that matches the target general node, the customized modification and supplement of the target flowchart is realized according to the user configuration information.

S370. Through the interaction component, in response to the reconfiguration instruction on the target general node that has completed the information configuration, according to the data binding relationship, echo the user configuration information to the matching user information on the node configuration page of the target general node Enter the location.

Wherein, when the target user needs to modify the configuration information of the target general node, it can send a reconfiguration instruction to the service platform, for example, click the target general node in the canvas area again; the service platform receives the reconfiguration instruction from the target user. At the time, through the interaction component, according to the stored data binding relationship, the user configuration information previously defined by the user is displayed to the matching user information input position in the node configuration page corresponding to the target general node, so as to realize the configuration page of the current node. is displayed, which is convenient for the target user to modify the user configuration information in the node configuration page.

S380. Render and display the configuration sub-pages at different levels in the node configuration page of the target general node through the pop-up window component, so as to instruct the user to input matching user configuration information in the different configuration sub-pages.

S390 , through the main service component, in response to the target flowchart processing instruction for the target flowchart, send the flowchart data structure of the target flowchart to the underlying interface matching the target flowchart processing instruction.

In a specific implementation of this embodiment, on the page of the flowchart service platform, as shown in FIG. 3B , the left side of the page is the canvas area, the right side is the general node library, and the upper part is the service function area, which is used for publishing flowchart processing Commands such as Start, Save, and Publish. The overall architecture of the service platform implementation code is shown in Figure 3C. In the figure, flow.vue represents the main business component, DataDiagramZoom.vue represents the interactive component, GoDiagram.vue represents the canvas component, and NodeInfo.vue, CustomDomain and CustomDrawerInput represent the Pop-up window component; among them, NodeInfo.vue is the first layer of the pop-up window component, which is used to render and display the configuration sub-pages at each level; CustomDomain is the second layer of the pop-up window component, which is used to define advanced configuration information; CustomDrawerInput , is the third layer of the pop-up window component, and is used to determine the configuration sub-page of the next level.

When the user needs to customize the configuration for the general node, he can click to select the general node of the target flowchart in the canvas area, and the pop-up window component will render and display the node configuration page corresponding to the general node and the configuration sub-pages at different levels. Further, the user inputs the user configuration information on the node configuration page and each configuration sub-page, and the service platform adds the user configuration information to the flowchart data structure of the flowchart through the interactive component, so as to realize the custom setting of the target general node. Finally, the user issues the target flowchart processing instruction for the target flowchart by clicking the operation button in the service function area of the service platform; correspondingly, the service platform sends the flowchart data structure of the target flowchart to the corresponding flowchart through the main business component. The underlying interface is used to perform corresponding flowchart processing operations through the underlying interface.

In the technical solution provided by the embodiment of the present invention, the service platform performs the data binding relationship between the target general node and the user configuration information through the interaction component, and when receiving the configuration completion instruction, configures the user in the data binding relationship through the interaction component The information is displayed in the display area corresponding to the target general node, which realizes the customized modification and adjustment of the target flowchart according to the user configuration information; further, when the service platform receives the reconfiguration instruction of the target general node, it binds according to the data. The node configuration page is displayed on the node configuration page, which improves the reconfiguration efficiency of the user's target general node.

FIG. 4 is a schematic structural diagram of an apparatus for arranging a flowchart according to another embodiment of the present invention. As shown in FIG. 4 , the apparatus includes: a target flowchart drawing module 410 , a general node configuration module 420 , a configuration sub-page rendering and display module 430 and a bottom-level interface calling module 440 . in,

The target flowchart drawing module 410 is used to display the target flowchart obtained by drawing in the canvas area in response to the user's drawing operation through the canvas component, and the target flowchart includes a plurality of general nodes with connection relationships;

The general node configuration module 420 is configured to, through the interaction component, in response to the input instruction for the configuration information of the node configuration page of the target general node in the target flow chart, add the user configuration information input for the node configuration page to the target flow chart. In the flowchart data structure;

The configuration sub-page rendering and display module 430 is used to render and display the configuration sub-pages of different levels in the node configuration page of the target general node through the pop-up window component, so as to guide the user to input matching user configuration information in the different configuration sub-pages;

The bottom layer interface calling module 440 is configured to send the flowchart data structure of the target flowchart to the bottom layer interface matching the target flowchart processing instruction in response to the target flowchart processing instruction for the target flowchart through the main service component.

The technical solution provided by the embodiment of the present invention obtains the canvas component, the interactive component, the pop-up window component and the main business component by layering the implementation code of the flowchart service platform, and responds to different operations of the user through matching The functional component realizes the drawing of the flow chart, provides a solution of layered architecture, realizes the reasonable code arrangement of the service platform, and enhances the flexibility of the arrangement of the flow chart implementation code; When configuring the page of functional components, you only need to modify the matching components, which will not affect the overall architecture of the service platform implementation code, which greatly reduces the post-maintenance cost and maintenance workload of the implementation code.

Optionally, on the basis of the above technical solution, the device for arranging the flowchart further includes:

The canvas component triggering module is used to trigger the calling of the canvas component in response to the flowchart drawing instruction;

The general node library display module is used to display the general node library to the user through the canvas component, and initializes and constructs a flow chart data structure matching the target flow chart;

The general node is pre-associated with a pre-packaged component data structure for realizing the setting process processing function.

Optionally, on the basis of the above technical solution, the target flowchart drawing module 410 includes:

A drag-and-drop operation response unit, used for dragging and displaying the first generic node in the canvas area in response to the drag-and-drop operation for the first generic node in the generic node library through the canvas component;

The component data structure adding unit is configured to add the component data structure matching the first general node to the flowchart data structure through the canvas component.

Optionally, on the basis of the above technical solution, the target flowchart drawing module 410 further includes:

A connection instruction response unit, configured to respond to the connection instruction for the second general node and the third general node in the canvas area through the canvas component, according to the connection direction in the connection instruction, in the canvas Generate and display the connection line connecting the second general node and the third general node in the area;

The connection relationship adding unit is configured to add the connection relationship between the second general node and the third general node to the flowchart data structure through the canvas component.

Optionally, on the basis of the above technical solution, the general node configuration module 420 includes:

a node configuration page display unit, configured to obtain the node type corresponding to the target general node through the interactive component, and display the node configuration page matching the node type;

The user configuration information filling unit is used to fill the user configuration information input by the user in the node configuration page into the flowchart data structure through the interactive component, corresponding to the blank filling area matched with the target general node ;

Wherein, at least one blank padding area is included in the component data structure of the general node, which is used to realize the custom configuration of the general node.

Optionally, on the basis of the above technical solution, the device for arranging the flowchart further includes:

A data binding relationship module, configured to perform a data binding relationship between the target general node and the user configuration information input on the node configuration page through the interaction component in response to the input instruction for the configuration information on the node configuration page ;

The user configuration information echoing module is used to echo the user configuration information to the canvas area in response to the configuration completion instruction matched with the target general node through the interaction component and according to the data binding relationship. within the display area matched by the target general node;

The reconfiguration instruction response module is used for echoing the user configuration information to the node configuration of the target general node according to the data binding relationship in response to the reconfiguration instruction to the target general node that completes the information configuration through the interactive component Where the matching user information is entered in the page.

Optionally, on the basis of the above technical solution, the underlying interface calling module 440 includes:

an underlying interface acquiring unit, configured to acquire an underlying interface matching the processing instruction of the target flowchart through the main business component;

A format conversion unit, configured to perform format conversion on the flowchart data structure through the main service component if it is determined that the underlying interface does not match the flowchart data structure, and send the format conversion result to the underlying interface to process;

a reverse format conversion unit, configured to perform reverse format conversion on the data processing result if the data processing result fed back by the underlying interface is received through the main service component;

The reverse format conversion result echoing unit is configured to provide the reverse format conversion result to the canvas component through the main business component, so as to trigger the canvas component to echo the reverse format conversion result in the canvas area.

The above-mentioned apparatus can execute the methods provided by all the foregoing embodiments of the present invention, and has corresponding functional modules and beneficial effects for executing the above-mentioned methods. For technical details not described in detail in the embodiments of the present invention, reference may be made to the methods provided by all the foregoing embodiments of the present invention.

FIG. 5 is a schematic structural diagram of a computer device according to another embodiment of the present invention. As shown in FIG. 5 , the computer device includes a processor 510, a memory 520, an input device 530, and an output device 540; the processor 510 in the computer device The number can be one or more, and a processor 510 is taken as an example in FIG. 5; the processor 510, the memory 520, the input device 530 and the output device 540 in the computer equipment can be connected by a bus or other means, and in FIG. Connecting via a bus is an example. As a computer-readable storage medium, the memory 520 can be used to store software programs, computer-executable programs, and modules, such as program instructions/modules (for example, a program instruction/module corresponding to a method for arranging a flowchart in any embodiment of the present invention). The target flowchart drawing module 410, the general node configuration module 420, the configuration sub-page rendering and display module 430, and the underlying interface calling module 440) in the flowchart arrangement apparatus. The processor 510 executes various functional applications and data processing of the computer device by running the software programs, instructions and modules stored in the memory 520, ie, implements the above-mentioned method for arranging a flowchart. That is, when the program is executed by the processor, it implements:

Through the canvas component, in response to the user's drawing operation, the drawn target flow chart is displayed in the canvas area, and the target flow chart includes a plurality of general nodes with connection relationships;

Through the interaction component, in response to the input instruction for the configuration information of the node configuration page of the target general node in the target flow chart, the user configuration information input for the node configuration page is added to the flow chart data structure of the target flow chart;

Through the pop-up window component, the configuration sub-pages of different levels in the node configuration page of the target general node are rendered and displayed, so as to guide the user to input matching user configuration information in different configuration sub-pages;

Through the main service component, in response to the target flowchart processing instruction for the target flowchart, the flowchart data structure of the target flowchart is sent to the underlying interface matching the target flowchart processing instruction.

The memory 520 may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program required for at least one function; the storage data area may store data created according to the use of the terminal, and the like. Additionally, memory 520 may include high-speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other non-volatile solid-state storage device. In some instances, memory 520 may further include memory located remotely from processor 510, which may be connected to the computer device through a network. Examples of such networks include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof. The input device 530 may be used to receive input numerical or character information, and generate key signal input related to user settings and function control of the computer device, and may include a keyboard, a mouse, and the like. The output device 540 may include a display device such as a display screen.

Optionally, the computer device can be a server, and the server can be an independent server, or can provide cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, Cloud servers for security services, Content Delivery Network (CDN), and basic cloud computing services such as big data and artificial intelligence platforms.

Embodiments of the present invention further provide a computer-readable storage medium, on which a computer program is stored, and when the program is executed by a processor, implements the method described in any embodiment of the present invention. Certainly, a computer-readable storage medium provided by an embodiment of the present invention can perform related operations in a method for arranging a flowchart provided by any embodiment of the present invention. That is, when the program is executed by the processor, it implements:

Through the canvas component, in response to the user's drawing operation, the drawn target flow chart is displayed in the canvas area, and the target flow chart includes a plurality of general nodes with connection relationships;

Through the interaction component, in response to the input instruction for the configuration information of the node configuration page of the target general node in the target flow chart, the user configuration information input for the node configuration page is added to the flow chart data structure of the target flow chart;

Through the pop-up window component, the configuration sub-pages of different levels in the node configuration page of the target general node are rendered and displayed, so as to guide the user to input matching user configuration information in different configuration sub-pages;

Through the main service component, in response to the target flowchart processing instruction for the target flowchart, the flowchart data structure of the target flowchart is sent to the underlying interface matching the target flowchart processing instruction.

From the above description of the embodiments, those skilled in the art can clearly understand that the present invention can be realized by software and necessary general-purpose hardware, and of course can also be realized by hardware, but in many cases the former is a better embodiment . Based on such understanding, the technical solutions of the present invention can be embodied in the form of software products in essence or the parts that make contributions to the prior art, and the computer software products can be stored in a computer-readable storage medium, such as a floppy disk of a computer , read-only memory (Read-Only Memory, ROM), random access memory (Random Access Memory, RAM), flash memory (FLASH), hard disk or CD, etc., including several instructions to make a computer device (which can be a personal computer, A server, or a network device, etc.) executes the methods described in the various embodiments of the present invention.

It is worth noting that, in the embodiment of the above-mentioned apparatus for arranging a flowchart, the units and modules included are only divided according to functional logic, but are not limited to the above-mentioned division, as long as the corresponding functions can be realized ; In addition, the specific names of the functional units are only for the convenience of distinguishing from each other, and are not used to limit the protection scope of the present invention.

Note that the above are only preferred embodiments of the present invention and applied technical principles. Those skilled in the art will understand that the present invention is not limited to the specific embodiments described herein, and various obvious changes, readjustments and substitutions can be made by those skilled in the art without departing from the protection scope of the present invention. Therefore, although the present invention has been described in detail through the above embodiments, the present invention is not limited to the above embodiments, and can also include more other equivalent embodiments without departing from the concept of the present invention. The scope is determined by the scope of the appended claims.

Claims (10)

1. a method for arranging a flowchart, comprising: Through the canvas component, in response to the user's drawing operation, the drawn target flow chart is displayed in the canvas area, and the target flow chart includes a plurality of general nodes with connection relationships; Through the interaction component, in response to the input instruction for the configuration information of the node configuration page of the target general node in the target flow chart, the user configuration information input for the node configuration page is added to the flow chart data structure of the target flow chart; Through the pop-up window component, the configuration sub-pages of different levels in the node configuration page of the target general node are rendered and displayed, so as to guide the user to input matching user configuration information in different configuration sub-pages; Through the main service component, in response to the target flowchart processing instruction for the target flowchart, the flowchart data structure of the target flowchart is sent to the underlying interface matching the target flowchart processing instruction. 2. The method according to claim 1, characterized in that, before displaying the target flowchart obtained by drawing in the canvas area in response to the user's drawing operation by the canvas component, it also comprises: In response to the flowchart drawing instruction, trigger the call to the canvas component; Through the canvas component, the general node library is displayed to the user, and the flow chart data structure matching the target flow chart is initialized and constructed; The general node is pre-associated with a pre-packaged component data structure for realizing the setting process processing function. 3. method according to claim 2, is characterized in that, by canvas component, in response to user's drawing operation, the target flow chart that draws is displayed in canvas area, comprises: Through the canvas component, in response to a drag operation for the first general node in the general node library, the first general node is dragged and displayed in the canvas area; Through the canvas component, a component data structure matching the first general node is added to the flowchart data structure. 4. method according to claim 2 is characterized in that, by canvas component, in response to user's drawing operation, the target flow chart that draws is displayed in canvas area, comprises: Through the canvas component, in response to the connection instruction for the second general node and the third general node in the canvas area, according to the connection direction in the connection instruction, generate and display the second connection in the canvas area and display the connecting line of the general node and the third general node; Through the canvas component, the connection relationship between the second general node and the third general node is added to the flowchart data structure. 5. The method according to any one of claims 2-4, characterized in that, through the interactive component, in response to inputting an instruction for the configuration information of the node configuration page of the target general node in the target flowchart, the configuration for the node is The user configuration information entered on the page is added to the flowchart data structure of the target flowchart, including: Obtain the node type corresponding to the target general node through the interactive component, and display the node configuration page matching the node type; Through the interaction component, the user configuration information input by the user in the node configuration page is correspondingly filled into the flowchart data structure, and the blank filling area matched with the target general node; Wherein, at least one blank padding area is included in the component data structure of the general node, which is used to realize the custom configuration of the general node. 6 . The method according to claim 1 , wherein, in response to inputting an instruction for configuration information of a node configuration page of a target general node in the target flow chart through the interaction component, the user inputting the node configuration page After the configuration information is added to the flowchart data structure of the target flowchart, it also includes: Through the interaction component, in response to the input instruction for the configuration information on the node configuration page, perform a data binding relationship between the target general node and the user configuration information input on the node configuration page; Through the interaction component, in response to the configuration completion instruction matching the target general node, according to the data binding relationship, echo the user configuration information to the display area in the canvas area that matches the target general node ; Through the interaction component, in response to the reconfiguration instruction on the target general node that completes the information configuration, according to the data binding relationship, the user configuration information is echoed to the matching user information input position in the node configuration page of the target general node place. 7. The method according to claim 1, wherein, by the main service component, in response to the target flowchart processing instruction for the target flowchart, the flowchart data structure of the target flowchart is sent to the target flowchart processing instruction Matching underlying interfaces, including: Obtain the underlying interface matching the target flowchart processing instruction through the main business component; Through the main business component, if it is determined that the underlying interface does not match the flowchart data structure, format conversion is performed on the flowchart data structure, and the format conversion result is sent to the underlying interface for processing; Through the main business component, if the data processing result fed back by the underlying interface is received, the data processing result is reversely formatted; Through the main business component, the inverse format conversion result is provided to the canvas component, so as to trigger the canvas component to echo the inverse format conversion result in the canvas area. 8. A device for arranging a flow chart, comprising: The target flowchart drawing module is used to display the target flowchart obtained by drawing in the canvas area in response to the user's drawing operation through the canvas component, and the target flowchart includes a plurality of general nodes with connection relationships; The general node configuration module is used for adding the user configuration information input for the node configuration page to the flow of the target flow chart through the interaction component in response to the input instruction for the configuration information of the node configuration page of the target general node in the target flow chart In the graph data structure; The configuration sub-page rendering and display module is used to render and display the configuration sub-pages of different levels in the node configuration page of the target general node through the pop-up window component, so as to guide the user to input matching user configuration information in the different configuration sub-pages; The bottom layer interface calling module is used for sending the flowchart data structure of the target flowchart to the bottom layer interface matching the target flowchart processing instruction in response to the target flowchart processing instruction for the target flowchart through the main business component. 9. A computer equipment, characterized in that, comprising: a processor; a storage device for storing a computer program; When the processor executes the computer program, the method for arranging the flowchart according to any one of claims 1-7 is implemented. 10. A computer-readable storage medium on which a computer program is stored, characterized in that, when the computer program is executed by a processor, the method for arranging the flowchart according to any one of claims 1-7 is implemented.

Images