A method for automatically generating flowcharts using configuration data

Abstract

This invention presents a generalized method for automatically generating real-time flowcharts and configuring their styles based on configuration data when configuring graphical elements. The method includes rendering a visual horizontal or vertical single-level flowchart structure and node information by processing configuration data; dynamically configuring the flowchart by adding, editing, and deleting flowchart node data in real time; rendering multi-level flowcharts with left or right turn arrows at inflection points in horizontal flowchart mode; re-rendering the flowchart after deleting non-inflection point nodes or inflection point nodes in a multi-level flowchart containing inflection points; and unifying or individually setting the characteristics of a node to diversify flowchart functionality. All the configured flowchart data and the modified flowchart hierarchy or node information data structure involved in this method are generated by the front end, making the representation of flowchart information clear at a glance. Modification of the content and style of each flowchart node is flexible and convenient, with strong universality and low maintenance costs.

Description

Technical Field

[0001] This invention belongs to the field of intelligent manufacturing control, specifically a method for automatically generating flowcharts through configuration data. Background Technology

[0002] In recent years, the national industrial Internet of Things (IIoT) has flourished, and enterprises have increasingly close needs for software and hardware interaction in their daily production work. As a result, the demand for factory digitalization is growing, and software developers are facing an increasing number of web page development tasks. Since the layout and structure of PC web pages in industrial software are largely similar, and the elements involved in the web pages can be roughly listed, we have developed a set of operation display systems related to the industrial Internet of Things that can be quickly, accurately, and conveniently built through graphical configuration, drag-and-drop, and low-code methods.

[0003] In web front-end development, we have broadly categorized commonly used elements in web pages into: charts, general elements, forms, and industrial elements. General elements include text, numbers, progress monitoring, tables, time, images, trees, Gantt charts, prompts, pop-ups, buttons, relationship diagrams, and labels. The flowchart automatically generated in this invention is a type of process element within the progress monitoring category.

[0004] The interface structure for configuring flowchart elements consists of a drag-and-drop element bar on the left, a main canvas display area in the middle, and a configuration panel on the right, divided into two tabs: Data and Styles. Users can drag flowchart elements from the left element bar to the middle canvas, and then click "Add Process" in the Data tab of the right configuration panel. A pop-up input box will appear to edit the process name. Each input box has a delete button and a line break button. Clicking "Delete" removes the current process, and clicking "Line Break" sets the current process as an inflection point. Users can configure the flowchart data to generate the flowchart content and structure according to their needs. The canvas will render the nodes of each process in real time based on the configured data, and render the corresponding horizontal or vertical arrows according to the current flowchart's horizontal or vertical type. Users can also re-edit the flowchart content, add or delete processes, cancel or reset inflection points. The flowchart will be re-rendered on the canvas after each operation. After configuring the data, configure the flowchart style: First, select the style modification type—modify all nodes uniformly or modify a single node; set the flowchart space style: select the flowchart type, horizontal or vertical mode; set the node width, height, top spacing, and rounded corners; set the font style: font size, weight, and font height; set the color style: flowchart node background color, border color, and text color. After clicking "Submit Style," the flowchart in the canvas will render with the set style, and the complete flowchart configuration is finished.

[0005] In the past, when developing flowcharts for front-end development, it was often necessary to write HTML code, CSS code, and JavaScript code for the front-end and back-end interaction interface to obtain data of process nodes. The drawback of this approach is that the code structure and style need to be written and adjusted every time, which consumes a lot of time and manpower and requires later maintenance.

[0006] Therefore, in order to simplify code and save time and manpower, a generalized method for automatically generating flowcharts based on configuration data was developed, which is applicable to various development needs and does not require later maintenance, greatly facilitating the work of developers. Summary of the Invention

[0007] This invention primarily proposes a fast and simple method for automatically generating flowcharts by configuring content and style data in a graphical configuration element mode. Specifically, it renders the flowchart from the data, allowing for free addition, deletion, and modification of the flowchart data, with real-time updates. This achieves the goals of simplifying developer work, providing a concise, standardized, and accurate data structure, and strong applicability to websites across various industries.

[0008] The technical solution adopted by the present invention to achieve the above objectives is as follows:

[0009] A method for automatically generating flowcharts using configuration data includes the following steps:

[0010] 1) Encapsulate the rendering flowchart data structure;

[0011] 2) Configure the encapsulated data structure to obtain the default flowchart;

[0012] 3) Configure the default flowchart style to complete the flowchart configuration.

[0013] Step 1) includes the following steps:

[0014] 1.1) The computer retrieves all node data from the configuration flowchart on the data configuration page and sets the line break node data;

[0015] 1.2) Determine the current flowchart type based on the node data. If it is a vertical flowchart, traverse the node data, render each node data and the down arrow, and execute step 1.6); if it is a horizontal flowchart, execute step 1.3).

[0016] 1.3) Determine whether the flowchart is a multi-level flowchart based on the line break node data. If it is a single-level flowchart, traverse the node data, render the data of each node and the right arrow, and execute step 1.6); if it is a multi-level flowchart, execute step 1.4).

[0017] 1.4) Traverse the node grouping data and render each row of the flowchart;

[0018] 1.5) Determine the index of the current row of the flowchart based on the node grouping data. If it is an odd row, traverse the row data and render the data of each node, the right arrow, and the left newline arrow. All elements including node data and arrows are floated to the left. If it is an even row, traverse the row data and render the data of each node, the left arrow, and the right newline arrow. All elements including node data and arrows are floated to the right.

[0019] 1.6) Render node style data and complete encapsulation.

[0020] Step 2) specifically refers to:

[0021] Define the flowchart content data as an empty array, define the default node style data, add, delete, and edit nodes, set node line breaks, and define the flowchart type.

[0022] The process of adding, deleting, and editing nodes includes the following steps:

[0023] a) The computer receives the instruction for the current operating mode and selects the configuration data method corresponding to the current operation;

[0024] b) If the operation instruction is to add a process node, proceed to step c; if the operation instruction is to edit the name of a process node, proceed to step e); if the operation instruction is to delete a process node, proceed to step f.

[0025] c) The computer adds the specified node to the node data by calling the add node method, thus obtaining the flowchart node data;

[0026] d) The computer determines whether the newly added node is set as a newline node based on the data obtained in step b). If it is set as a newline node, the node data is added to the newline data, and step h) is executed; if it is not set as a newline node, step h) is executed directly.

[0027] e) The computer finds the node to be edited in the node data based on the current node index, assigns a value to the node name, and executes step h);

[0028] f) The computer determines whether the node to be deleted is a newline node based on the data obtained in step b). If it is a newline node, the computer deletes the node from the newline node data and then executes step g); if it is not a newline node, the computer executes step g).

[0029] g) The computer invokes the deletion method to delete the node from the node data;

[0030] h) Regroup the node data based on the obtained newline node data;

[0031] i) Layer-by-layer rendering flowchart.

[0032] Step 3) includes the following steps:

[0033] 3.1) The computer obtains the configuration data of each style item in each node and the flowchart layout type data;

[0034] 3.2) The computer selects the flowchart type as either a horizontal flowchart or a vertical flowchart based on the layout type data;

[0035] 3.3) The computer configures space styles, font styles, and color styles through configuration data;

[0036] 3.4) The computer receives the instruction to select the style modification type. If it is a uniform modification, it reassigns the data of all nodes; if it is a single modification, it obtains the node to be modified and reassigns the data of that node.

[0037] 3.5) The computer receives the style data submitted by each node;

[0038] 3.6) Rendering flowchart.

[0039] A computer-readable storage medium storing a computer program that, when executed by a processor, implements the method for automatically generating flowcharts from configuration data.

[0040] The present invention has the following beneficial effects and advantages:

[0041] 1. In this invention, the front end encapsulates the flowchart data, performs operations, and renders a new flowchart. The result is obvious and the synchronization efficiency is extremely high.

[0042] 2. This invention allows for direct addition, deletion, and modification of data to adjust the flowchart structure and configure style data to generate flowchart styles. The operation is simple and quick, and the data accuracy is high.

[0043] 3. The code framework encapsulated in this invention is highly reusable, saves manpower and time costs, requires no maintenance, and is highly applicable and flexible. Attached Figure Description

[0044] Figure 1 This is a flowchart encapsulating the method for managing process node data in this invention;

[0045] Figure 2 This is a rendering flowchart of the process of automatically generating a flowchart when the user adds, deletes, or modifies process nodes in the present invention.

[0046] Figure 3 This is a flowchart illustrating the operation of configuring style data to update node styles in this invention. Detailed Implementation

[0047] The present invention will now be described in further detail with reference to the accompanying drawings and embodiments.

[0048] To make the technical methods and advantages of the present invention clearer, further explanation is provided herein with reference to the accompanying drawings.

[0049] A method for automatically generating flowcharts using configuration data includes the following steps:

[0050] First, the configuration process for flowchart data needs to be outlined: The framework code for rendering the flowchart data structure is encapsulated first. The flowchart content data is defined as an empty array, and default node style data is defined. Users can add, delete, and edit nodes in the data configuration area, as well as set line breaks for nodes, and select the flowchart type. The canvas then renders a flowchart with the default style. Next, users configure the flowchart style, choosing to modify all node styles uniformly or selecting a specific node and modifying its style individually. After submission, the flowchart style is rendered on the canvas. This is the complete flowchart configuration process. The flowchart includes experimental flowcharts and operational flowcharts. The flowchart data includes start point data, end point data, process data, decision data, etc., and the nodes represent each step of the flowchart.

[0051] See Figure 1 This is a flowchart of the encapsulation method for rendering flowchart data.

[0052] Step S1: Enter the flowchart configuration, open the preview canvas and data configuration operations;

[0053] Step S2: The computer retrieves all node data from the configuration flowchart on the data configuration page and sets the line break node data;

[0054] Step S3: Determine the current flowchart type based on the flowchart data in S2. If it is a vertical flowchart, traverse the node data, render each node data and the downward arrow, and execute S7; if it is a horizontal flowchart, execute step S4.

[0055] Step S4: Determine whether the flowchart is a multi-level flowchart based on the line break node data in S2. If it is a single-level flowchart, traverse the node data, render the data of each node and the right arrow, and execute S7; if it is a multi-level flowchart, execute step S5.

[0056] Step S5: Traverse the node grouping data and render each row of the flowchart;

[0057] The node grouping data consists of data from each row of a multi-level flowchart, with node data in the same row belonging to one group.

[0058] Step S6: Determine the index of the current row of the flowchart based on the flowchart data in S2. If it is an odd row, traverse the row data and render the data of each node, the right arrow, and the left newline arrow, with all elements floating to the left; if it is an even row, traverse the row data and render the data of each node, the left arrow, and the right newline arrow, with all elements floating to the right.

[0059] Step S7: Render node style data: If no style data is configured, the default style data is used. If style data is configured, the style data of each node is included in the data of each node.

[0060] Step S8: Obtain the flowchart.

[0061] Advantages of encapsulating rendering flowchart data:

[0062] (1) By encapsulating the flowchart rendering method, a multi-level flowchart rendering method suitable for any flowchart type is built, which improves the versatility and flexibility of the method.

[0063] (2) The flowchart is rendered by data-driven process, and the flowchart changes with the data. The data is clear and easy to understand, and the accuracy is high.

[0064] (3) By configuring the flowchart style through data, style code is saved, which greatly improves development efficiency;

[0065] (4) The encapsulation method is easy to maintain and highly reusable.

[0066] See Figure 2 This is a rendering process flowchart of the process of automatically generating flowcharts when users add, delete, or modify process nodes in this invention.

[0067] Step S1: The computer receives the instruction for the current operating mode and selects the configuration data method corresponding to the current operation;

[0068] Step S2: If the operation instruction is to add a process node, proceed to step S3; if the operation instruction is to edit the process node name, proceed to step S5; if the operation instruction is to delete a process node, proceed to step S6.

[0069] Step S3: The computer adds the point to the node data by calling the add method, thus obtaining the flowchart node data;

[0070] Step S4: The computer uses the data obtained in S3 to determine whether the newly added node is set as a newline node. If it is set as a newline node, the data of that point is added to the newline data, and S8 is executed; if it is not set as a newline node, S8 is executed directly.

[0071] Step S5: The computer finds the point in the node data using the current node index, assigns the node name, and executes S8;

[0072] Step S6: The computer uses the data obtained in S3 to determine whether the point to be deleted is a newline node. If it is a newline node, the point is deleted from the newline node data, and then S7 is executed; if it is not a newline node, S7 is executed.

[0073] Step S7: The computer calls the deletion method to delete the node in the node data;

[0074] Step S8: Regroup the node data based on the obtained newline node data;

[0075] Step S9: Layer-by-layer rendering flowchart.

[0076] Advantages of encapsulating CRUD operations for managing workflow node data:

[0077] (1) The method has a clear and simple logic. No matter how complex the user operation is, the node data is managed to avoid program vulnerabilities and ensure that the data is not chaotic and the data is accurate.

[0078] (2) By encapsulating the management node data, the method is applicable to the rendering of any multi-level or single-level flowchart, and even the switching between multi-level and single-level flowcharts, which improves the applicability of the method.

[0079] (3) By encapsulating the management node data, the maintenance work is simplified and manpower and time costs are saved.

[0080] See Figure 3 This is a flowchart of the method for configuring style data to update node styles in this invention.

[0081] Step S1: The computer obtains the configuration data of each style item in each node, as well as the flowchart layout type data;

[0082] Step S2: The computer selects the flowchart type—horizontal flowchart or vertical flowchart—based on the layout type data;

[0083] Step S3: The computer configures the space style using the data in S1: width, height, top spacing, and rounded corners;

[0084] Step S4: The computer configures the font style using the data in S1: font size, weight, and height;

[0085] Step S5: The computer configures the color style using the data in S1: background color, border color, and text color;

[0086] Step S6: The computer receives the instruction to select the style modification type. If it is a uniform modification, the method is called to reassign the data of all nodes; if it is a single modification, the modified node is obtained, and the method is called to reassign the data of that node.

[0087] Step S7: The computer receives the signal processing data for the submitted pattern;

[0088] Step S8: Render the flowchart.

[0089] Advantages of encapsulating configuration style data to update node styles:

[0090] (1) Style data and node data are bound to each other. The node style can be changed through configuration data, and the style data can be viewed on the configuration page by selecting the node. The data is clear and intuitive, and the user operation is convenient.

[0091] (2) When traversing node data, style data is bound, and styles can be modified individually or uniformly, which greatly improves the flexibility of style configuration.

[0092] (3) By implementing the style through configuration data, zero style code is achieved, making the flowchart styles more diverse.

[0093] In summary, the method of this invention primarily achieves the automatic generation of flowcharts from configuration data when configuring graphical elements. This method encapsulates a process node rendering framework and a unified method for managing node content data and styles, automatically generating diverse flowcharts—vertical or horizontal, single-level or multi-level—after traversing the data. This method transforms the traditional code-driven development model into a data-driven, code-free automatic generation model, making the configuration process readily apparent and greatly improving the user experience. The encapsulated method is highly flexible, widely applicable, and has low maintenance costs, making it suitable for widespread use.

Claims

1. A method for automatically generating flowcharts through configuration data, characterized in that, Includes the following steps: 1) Encapsulate the rendering flowchart data structure; 2) Configure the encapsulated data structure to obtain the default flowchart; 3) Configure the default flowchart style to complete the flowchart configuration; Step 1) includes the following steps: 1.1) The computer retrieves all node data from the configuration flowchart on the data configuration page and sets the line break node data; 1.2) Determine the current flowchart type based on the node data. If it is a vertical flowchart, traverse the node data, render each node's data and the downward arrow, and execute step 1.6); if it is a horizontal flowchart, execute step 1.3). 1.3) Determine whether the flowchart is a multi-level flowchart based on the newline node data. If it is a single-level flowchart, traverse the node data, render the data of each node and the right arrow, and execute step 1.6); if it is a multi-level flowchart, execute step 1.4). 1.4) Traverse the node grouping data and render each row of the flowchart; 1.5) Determine the index of the current row of the flowchart based on the node grouping data. If it is an odd row, traverse the row data and render the data of each node, the right arrow, and the left newline arrow. All elements including node data and arrows are floated to the left. If it is an even row, traverse the row data and render the data of each node, the left arrow, and the right newline arrow. All elements including node data and arrows are floated to the right. 1.6) Render node style data and complete encapsulation.

2. The method for automatically generating flowcharts by configuring data according to claim 1, characterized in that, Step 2) specifically refers to: Define the flowchart content data as an empty array, define the default node style data, add, delete, and edit nodes, set node line breaks, and define the flowchart type.

3. The method for automatically generating flowcharts by configuring data according to claim 2, characterized in that, The process of adding, deleting, and editing nodes includes the following steps: a) The computer receives the instruction for the current operating mode and selects the configuration data method corresponding to the current operation; b) If the operation instruction is to add a process node, proceed to step c; if the operation instruction is to edit the process node name, proceed to step e); if the operation instruction is to delete a process node, proceed to step f). c) The computer adds the specified node to the node data by calling the add node method, thus obtaining the flowchart node data; d) The computer determines whether the newly added node is set as a newline node based on the data obtained in step b). If it is set as a newline node, the node data is added to the newline data, and step h) is executed. If it is not set as a newline node, step h) is executed directly. e) The computer locates the node to be edited in the node data based on the current node index, assigns a value to the node name, and executes step h). f) The computer determines whether the node to be deleted is a newline node based on the data obtained in step b). If it is a newline node, the computer deletes the node from the newline node data and then executes step g). If it is not a newline node, the computer executes step g). g) The computer invokes the deletion method to delete the node from the node data; h) Regroup the node data based on the obtained newline node data; i) Layer-by-layer rendering flowchart.

4. The method for automatically generating flowcharts by configuring data according to claim 1, characterized in that, Step 3) includes the following steps: 3.1) The computer obtains the configuration data of each style item in each node and the flowchart layout type data; 3.2) The computer selects the flowchart type as either a horizontal flowchart or a vertical flowchart based on the layout type data; 3.3) The computer configures space styles, font styles, and color styles through configuration data; 3.4) The computer receives the instruction to select the style modification type. If it is a uniform modification, it reassigns the data of all nodes; if it is a single modification, it obtains the node to be modified and reassigns the data of that node. 3.5) The computer receives the style data submitted by each node; 3.6) Rendering flowchart.

5. A computer-readable storage medium, characterized in that, The storage medium stores a computer program, which, when executed by a processor, implements a method for automatically generating flowcharts using configuration data as described in any one of claims 1-4.

Images