A flowchart hierarchical layout method and layout system

Abstract

This invention provides a flowchart layered layout method and system. The method includes: converting a loop diagram in the flowchart into a directed acyclic graph; calculating the level corresponding to each node from the end point of the flow and assigning each node to the corresponding level; reducing the number of intersections of connecting lines between different levels; arranging target nodes according to the distance between the target node and its adjacent predecessor level; arranging target nodes with the same predecessor node according to the scale of the subsequent flow of the target node; assigning horizontal and vertical coordinates to each node; parametrically drawing cross-level connecting lines using Bézier curves, and inversely solving the curve parameters using a bisection method to determine whether the cross-level connecting line passes through the level nodes between the starting level and the ending node level. If it does, the position of the cross-level connecting line is adjusted to avoid the level nodes. The above invention can improve the readability and orderliness of the flowchart.

Description

Technical Field

[0001] This invention relates to the field of computer graphics visualization technology, and in particular to a flowchart layered layout method and layout system. Background Technology

[0002] In low-code, business process, and workflow visualization scenarios, automatic flowchart layout directly impacts readability and user experience. While the mainstream Sugiyama algorithm framework can achieve basic hierarchical layout, it has significant shortcomings: cross-layer connections easily overlap with intermediate nodes, and existing solutions cannot accurately avoid this by adapting to cubic Bézier curves; the ASAP (Assign as Fast as Possible) strategy for allocating levels leads to asymmetrical branch convergence structure layout; and multiple branches originating from the same source are sorted only by crossover amount, without centering the trunk according to the size of downstream subtrees, making it difficult to meet the aesthetic and clear display requirements of complex processes. Summary of the Invention

[0003] The purpose of this invention is to provide a flowchart layered layout method and layout system to improve the readability and orderliness of flowcharts.

[0004] This invention provides a flowchart layered layout method, the method comprising: Convert the loop graph in the flowchart into a directed acyclic graph; Calculate the level corresponding to each node from the end of the process backwards, and assign each node to the corresponding level; Reduce the number of crossovers in the connecting lines between different levels; The target nodes are arranged according to the distance between the target node and its adjacent predecessor level; for target nodes with the same predecessor node, the positions are arranged according to the subsequent process scale of the target node. Assign x-coordinates and y-coordinates to each node; The cross-level connection line is parametrically drawn using Bézier curves, and the curve parameters are solved by the bisection method to determine whether the cross-level connection line passes through the level node between the starting level and the ending node level. If it does, the position of the cross-level connection line is adjusted to avoid the level node.

[0005] Furthermore, converting the loop graph in the flowchart into a directed acyclic graph includes: A depth-first search is used to traverse the flowchart, detect loops, and reverse the direction of the loop edges to obtain a directed acyclic graph; The method for calculating the level corresponding to each node in reverse from the end of the process includes: The ALAP strategy is used to calculate the longest path backward from the node with an out-degree of 0, and the level of each node is determined by combining the total depth calculated in the forward direction. Ways to reduce the number of crossovers between different levels include: A centroid heuristic is used to perform bidirectional iterative sorting of nodes at each level, based on the average position index of the predecessor or successor node.

[0006] Furthermore, the arrangement of target nodes within the target level according to the distance between the target node and the adjacent predecessor level includes: Traverse all predecessor nodes corresponding to the target node and obtain the predecessor nodes adjacent to the target node; When the target node has an adjacent predecessor node, the target node is arranged from the end position of the target level to the middle position of the target level according to the distance between the target level and the adjacent predecessor level corresponding to the adjacent predecessor node. When the target node does not have a corresponding predecessor node, the distance is set to the minimum value, and the target node is arranged in the middle position of the target level.

[0007] Furthermore, for target nodes within the target level, after arranging their positions according to the distance between the target node and the adjacent predecessor level, the nodes within the target level are arranged according to the subsequent process scale of the node. Specifically, for nodes within the target level, the positional arrangement according to the subsequent process scale of the node includes: The size of the downstream subtree for each node is calculated recursively using Depth-First Search (DFS). Wherein, the size of the downstream subtree is the sum of the number of the target node and the number of all successor nodes reachable from the target node along directed edges; Traverse all nodes within the target level and filter out all nodes within the target level that have the same single predecessor node; According to the size of the downstream subtree, the nodes are arranged sequentially from the middle position of the target level to the end position of the target level.

[0008] Furthermore, parametric drawing of cross-level connection lines using Bézier curves includes: B(t) = (1-t) 3 ×P0+3×(1-t) 2 ×t×C1+3×(1-t)×t 2 ×C2+t 3 ×P3; Where B(t) is the real-time coordinate point of the Bézier curve; t is the curve normalization parameter, t∈[0,1]; P0 is the coordinate of the starting node of the Bézier curve; P3 is the coordinate of the ending node of the Bézier curve; C1 is the first dynamic control point; C2 is the second dynamic control point; The x-coordinate of the first dynamic control point is: C1.x=src.x+controlOffset-kSpan×controlOffset; The x-coordinate of the second dynamic control point is: C2.x=tgt.x-controlOffset+kSpan×controlOffset; src.x is the x-coordinate of the starting node of the Bézier curve; tgt.x is the x-coordinate of the ending node of the Bézier curve; controlOffset is the basic horizontal offset of the first dynamic control point and the second dynamic control point; kSpan is the cross-layer correction coefficient.

[0009] Furthermore, the weighted formula for the ordinate of the Bézier curve is: By(t) = a(t) × src.y + b(t) × tgt.y; Where By(t) is the ordinate of the Bézier curve under parameter t; src.y is the ordinate of the starting node of the Bézier curve; tgt.y is the ordinate of the ending node of the Bézier curve; and a(t) is the weight function of the starting node, a(t)=(1-t). 2 ×(1+2t); b(t) is the weight function of the terminal node, b(t)=t 2 ×(3-2t); a(t)+b(t)=1.

[0010] Furthermore, by using the bisection method to inversely solve the curve parameters, determining whether the cross-level connection line passes through the level nodes between the starting level and the ending node level includes: The first position parameter of the Bézier curve when it enters the coverage area of ​​the intermediate layer node and the second position parameter when it leaves the coverage area of ​​the intermediate layer node are obtained by inverse bisection method. Calculate the ordinates of the Bézier curve at the left and right boundaries of the intermediate layer based on the first position parameter and the second position parameter, respectively. The overlap between the left and right boundary ordinate intervals and the intermediate layer node ordinate intervals is determined to determine whether the cross-level connection line collides with the intermediate layer node. The ordinate at the left boundary is: byLeft = a(tLeft) × src.y + b(tLeft) × tentativeTgtY; The ordinate at the right boundary is: byRight = a(tRight) × src.y + b(tRight) × tentativeTgtY; Wherein, byLeft is the ordinate of the left boundary, byRight is the ordinate of the right boundary; tentativeTgtY is the current ordinate of the end node before position adjustment is performed; tLeft is the first position parameter; tRight is the second position parameter; a(tLeft) is the function value of the weight function a(t) at the parameter tLeft; b(tLeft) is the function value of the weight function b(t) at the parameter tLeft; a(tRight) is the function value of the weight function a(t) at the parameter tRight; b(tRight) is the function value of the weight function b(t) at the parameter tRight.

[0011] Furthermore, if the cross-level connection line passes through a level node between the starting level and the ending node level, adjusting the position of the cross-level connection line to avoid the level node includes: When a collision is detected between the cross-level connection line and the intermediate layer node, the end node of the Bézier curve is moved in the direction of increasing ordinate value, or the end node is moved in the direction of decreasing ordinate value, to obtain the adjusted ordinate of the end node: When the end node is moved in the direction of increasing ordinate value, the adjusted ordinate of the end node is: need=(nBotY+margin-a(tLeft)×src.y) / b(tLeft); When the end node is moved in the direction that decreases the ordinate value, the adjusted ordinate of the end node is: need=(nTopY-margin-a(tLeft)×src.y) / b(tLeft); Where, need is the adjusted ordinate of the end node; nBotY is the ordinate of the lower boundary of the intermediate layer node; nTopY is the ordinate of the upper boundary of the intermediate layer node; margin is the minimum safe clearance distance parameter set between the cross-level connection line and the intermediate layer node; The displacement of the end node is calculated based on the adjusted ordinate of the end node; Update the ordinate of the end node based on the displacement; The ordinates of other nodes at the same level as the end node are updated synchronously.

[0012] Furthermore, the upper limit of the displacement of the end node is set as follows: maxStretch=(H_node+G_node)×span×5; Where maxStretch is the upper limit of displacement, H_node is the height of the end node in the vertical axis direction; G_node is the vertical spacing between adjacent nodes in the same layer; span is the number of layers spanned between the starting layer and the end node layer. When the absolute value of the displacement of the end node on the vertical axis is greater than the upper limit of displacement, the displacement is equal to the upper limit of displacement, and the displacement direction of the end node remains unchanged.

[0013] On the other hand, the present invention also discloses a flowchart hierarchical layout system, the system comprising: The directed acyclic graph generation unit is configured to convert a loop graph in a flowchart into a directed acyclic graph; The node allocation unit is configured to calculate the level corresponding to each node in reverse from the end of the process, and allocate each node to the corresponding level. The connection crossover reduction unit is configured to reduce the number of crossovers between different levels; The node position arrangement unit is configured to arrange the target nodes according to the distance between the target node and the adjacent predecessor level; for the target nodes with the same predecessor node, a position arrangement coordinate generation unit is configured according to the subsequent process scale of the target node. The coordinate generation unit is configured to assign x-coordinates and y-coordinates to each node; The connection optimization unit is configured to perform curve parameterization calculation on the cross-level connection line, determine whether the cross-level connection line passes through the level node between the starting level and the ending node level, and if it does, adjust the cross-level connection line to avoid the level node.

[0014] Compared with the prior art, the present invention has at least the following technical effects: The flowchart containing loops is converted into a directed acyclic graph, providing a legal graph structure foundation for subsequent hierarchical allocation and layout calculations. Hierarchical allocation starts from the process endpoint, assigning multiple branch nodes sharing the same successor to the same level, achieving a "end-aligned" visual effect and optimizing the visual symmetry of the branch-convergence structure. The number of intersections between adjacent levels is reduced, making the flowchart layout clearer and cleaner. Nodes are arranged according to the distance from their predecessor layers, and target nodes with the same predecessor node are arranged according to the subsequent process scale, reducing visual overlap between cross-layer connections and intermediate layer nodes. It also allows for the classification and arrangement of target nodes of different process scales, improving the readability and orderliness of the flowchart. Furthermore, a cubic Bézier curve parameterization method is used to accurately calculate the actual drawing path of cross-layer connections. A bisection method is used to inversely solve the curve parameters to determine whether the connection line passes through intermediate layer nodes. If it does, the ordinate of the endpoint node is adjusted to avoid it, ensuring that the connection line does not visually pass through the intermediate layer node area, further improving the readability and orderliness of the flowchart. Attached Figure Description

[0015] Figure 1 This is a simplified flowchart of the layered layout method in Embodiment 1 of the present invention. Detailed Implementation

[0016] The following description, in conjunction with schematic diagrams, illustrates a flowchart layered layout method and layout system according to the present invention, which represents a preferred embodiment of the invention. It should be understood that those skilled in the art can modify the invention described herein while still achieving its advantageous effects. Therefore, the following description should be understood as being of general knowledge to those skilled in the art and is not intended to limit the invention.

[0017] The invention is described more specifically by way of example in the following paragraphs with reference to the accompanying drawings. The advantages and features of the invention will become clearer from the following description. It should be noted that the drawings are in a very simplified form and use non-precise proportions, and are only used to facilitate and clarify the illustration of the embodiments of the invention.

[0018] Example 1 Please refer to Figure 1 This embodiment discloses a flowchart layered layout method, the method comprising: S1. Convert the loop diagram in the flowchart into a directed acyclic graph; S2. Calculate the level corresponding to each node in reverse from the end of the process, and assign each node to the corresponding level; S3. Reduce the number of crossovers in the connecting lines between different levels; S4. Arrange the target nodes according to the distance between the target node and the adjacent predecessor level; for target nodes with the same predecessor node, arrange the positions according to the subsequent process scale of the target node. S5. Assign x-coordinates and y-coordinates to each node; S6. Parametrically draw the cross-level connection line using Bézier curves, and solve the curve parameters by bisection method to determine whether the cross-level connection line passes through the level node between the starting level and the ending node level. If it does, adjust the position of the cross-level connection line to avoid the level node.

[0019] In this embodiment, the flowchart containing loops is converted into a directed acyclic graph, providing a legal graph structure foundation for subsequent hierarchical allocation and layout calculations. Hierarchical allocation is performed from the flow endpoint backwards, ensuring that multiple branch nodes sharing the same successor are assigned to the same level, achieving a "end-aligned" visual effect and optimizing the visual symmetry of the branch-convergence structure. The number of intersections between adjacent levels is reduced, making the flowchart layout clearer and neater. Nodes are arranged according to the distance from the predecessor layer, and target nodes with the same predecessor node are arranged according to the subsequent flow scale, reducing the visual overlap between cross-layer connections and intermediate layer nodes. This also allows for the classification and arrangement of target nodes of different flow scales, improving the readability and orderliness of the flowchart. Furthermore, a cubic Bézier curve parameterization method is used to accurately calculate the actual drawing path of cross-layer connections. A bisection method is used to inversely solve the curve parameters to determine whether the connection line passes through an intermediate layer node. If it does, the ordinate of the end node is adjusted to avoid it, ensuring that the connection line does not visually pass through the intermediate layer node area, further improving the readability and orderliness of the flowchart.

[0020] Furthermore, converting the loop graph in the flowchart into a directed acyclic graph includes: S11. Use depth-first search to traverse the flowchart, detect loops and reverse the direction of the loop edges to obtain a directed acyclic graph.

[0021] The specific steps to obtain a directed acyclic graph are as follows: S111. Initialize the visited (visited nodes) set and the recursionStack (recursion stack nodes) set to empty; S112. Perform a depth-first search for each unvisited node: add the current node to the visited set and the recursionStack set; S113. Traverse all neighboring nodes of the current node: If a neighboring node exists in the recursionStack set, reverse the edge (swap the starting node and the target node of the edge); if a neighboring node is not in the visited set, continue to recursively perform depth-first search; remove the current node from the recursionStack set.

[0022] Furthermore, methods for calculating the level corresponding to each node in reverse order from the end of the process include: S21. Using the ALAP (Assign as late as possible) strategy, calculate the longest path backward from the node with an out-degree of 0, and combine it with the total depth calculated in the forward direction to determine the level of each node.

[0023] The specific steps for obtaining the level corresponding to each node are as follows: S211. Reconstruct the forward adjacency list and reverse adjacency list based on the directed acyclic graph, and calculate the in-degree and out-degree of each node; S212. Calculate the ASAP depth (the longest path from the starting node) using a forward topological sort to obtain the total depth maxDepth of the graph; S213. Calculate the longest path to the sink node using reverse topological sorting: Initialize the longest path toSink of all nodes to 0; add nodes with an out-degree of 0 to the queue; remove nodes from the queue, traverse the predecessor nodes along the reverse adjacency list, and update the longest path value of the predecessor node to max, max(toSink[current] +1,toSink[pred]); if the out-degree of the predecessor node is reduced to 0, add it to the queue. Where toSink[current] is the longest path value to the sink node recorded by the current dequeuing node, toSink[current]+1 represents the path length from the predecessor node to the sink node via the current node, and toSink[pred] is the longest path value to the sink node currently recorded by the predecessor node. The maximum value of the two is taken to ensure that the result is the global longest path; if the out-degree of the predecessor node is reduced to 0, it is added to the queue. S214. Calculate the layer of each node: layer = maxDepth - toSink[node]; S215. Construct a hierarchical structure, with each level containing a list of IDs for all nodes in that level.

[0024] In this embodiment, the ALAP strategy assigns multiple nodes that share the same successor (such as multiple branch nodes converging to the same End node) to the same level, achieving a "end-aligned" visual effect that aligns with the intuitive understanding of flowcharts.

[0025] Furthermore, ways to reduce the number of crossovers between different levels include: S31. Use the centroid heuristic to perform bidirectional iterative sorting of nodes at each level, and sort them according to the average position index of the predecessor or successor node.

[0026] The specific steps to reduce the number of intersections between different levels are as follows: S311. Traverse each level from top to bottom (starting from level 2): S312. For each node in the current layer, calculate the average position index of all its predecessor nodes in the previous layer, and use it as the centroid value of the node; if the node has no predecessor node, set the centroid value to 1 / 2 of the number of nodes in the previous layer; sort the nodes in the current layer in ascending order of centroid value. S313. Traverse each level from bottom to top (starting from the second to last level): For each node in the current level, calculate the average of the position indices of all its successor nodes in the next level, and use it as the centroid value of the node; if the node has no successor nodes, set the centroid value to 1 / 2 of the number of nodes in the next level; sort the nodes in the current level in ascending order of centroid value. S314. Calculate the number of intersections of the connecting lines in the current layout. If the number of intersections has not decreased, stop the iteration. Repeat the top-down and bottom-up steps, with a maximum of 10 iterations.

[0027] In this embodiment, the nodes of each layer are reordered based on the average position index of the predecessor and successor nodes through a centroid-heuristic bidirectional iterative sorting method. The iteration is automatically terminated when the number of intersections no longer decreases, thereby effectively reducing the number of intersections between adjacent layers, making the flowchart layout clearer and neater, and improving overall readability.

[0028] Furthermore, the step of arranging target nodes within the target level according to the distance between the target node and the adjacent predecessor level includes: S411. Traverse all predecessor nodes corresponding to the target node and obtain the predecessor nodes adjacent to the target node.

[0029] S412. When the target node has an adjacent predecessor node, the target node is arranged sequentially from the end position of the target level to the middle position of the target level according to the distance between the target level and the adjacent predecessor level corresponding to the adjacent predecessor node; when the target node does not have a corresponding predecessor node, the distance is set to the minimum value, and the target node is arranged in the middle position of the target level.

[0030] In a specific example, let the target layer be layer 3, which contains nodes D1, D2, and D3. The nearest predecessor of D1 is located in layer 2 (distance = 1), the nearest predecessor of D2 is located in layer 1 (distance = 2), and the nearest predecessor of D3 is located in layer 0 (distance = 3). Arranged from smallest to largest distance: D1 (distance = 1), being the node with the smallest distance, is placed directly in the middle of the layer; D2 (distance = 2) is alternately pushed to the left end of the current arrangement; and D3 (distance = 3) is alternately pushed to the right end of the current arrangement; the final arrangement order is [D2, D1, D3]. The node D1 connected by the short side is positioned at the visual center, while the nodes D2 and D3 connected by the long side are pushed to the sides of the layer. The cross-layer connection path is far from the middle area of ​​the layer, effectively reducing visual overlap.

[0031] Furthermore, for target nodes within the target level, after arranging their positions according to the distance between the target node and the adjacent predecessor level, the nodes within the target level are arranged according to the subsequent process scale of the node.

[0032] In this embodiment, the step of arranging the nodes within the target level according to the subsequent process scale of the nodes includes: S413. The size of the downstream subtree of each node is calculated recursively using DFS; wherein the size of the downstream subtree is the sum of the number of the target node and all successor nodes reachable from the target node along directed edges.

[0033] S414. Traverse all nodes within the target level and filter out all nodes within the target level that have the same single predecessor node; S415. Arrange the nodes sequentially from the middle position of the target level to the end position of the target level according to the size of the downstream subtree.

[0034] In a specific example, assume that nodes B1 to B5 within the target level share the same predecessor node A. A depth-first search is used to calculate the size of the downstream subtrees for each node: B1=10, B2=8, B3=5, B4=3, B5=2. The subtrees are then sorted in descending order of size: B1, B2, B3, B4, B5. The node with the largest subtree, B1, is placed at the center of the group; B2 is alternately placed to the left (left of B1); B3 continues to be placed to the left (left of B2); B4 alternately places to the right (right of B1); B5 continues to be placed to the right (right of B4); the final arrangement is [B3, B2, B1, B4, B5]. The main branch B1 is located at the visual center, leaf branches B2 and B3 are on the left, and leaf branches B4 and B5 are on the right, thus achieving a visually centered main branch and symmetrical branches.

[0035] Furthermore, parametric drawing of cross-level connection lines using Bézier curves includes: S611. Calculate the Bézier curve: B(t) = (1-t) 3 ×P0+3×(1-t) 2 ×t×C1+3×(1-t)×t 2 ×C2+t 3 ×P3; Where B(t) is the real-time coordinate point of the Bézier curve; t is the curve normalization parameter, t∈[0,1]; P0 is the coordinate of the starting node of the Bézier curve; P3 is the coordinate of the ending node of the Bézier curve; C1 is the first dynamic control point; C2 is the second dynamic control point.

[0036] In this embodiment, the cross-level connection line refers to a connection line where the difference between the level of the starting node and the level of the ending node is greater than 1. That is, the connection line crosses one or more intermediate levels in the drawing path from the starting node to the ending node, and its drawing path may pass through the node area of ​​the intermediate level.

[0037] The x-coordinate of the first dynamic control point is: C1.x=src.x+controlOffset-kSpan×controlOffset; The x-coordinate of the second dynamic control point is: C2.x=tgt.x-controlOffset+kSpan×controlOffset; Wherein, src.x is the x-coordinate of the starting node of the Bézier curve; tgt.x is the x-coordinate of the ending node of the Bézier curve; controlOffset is the basic horizontal offset of the first dynamic control point and the second dynamic control point; and kSpan is the cross-layer correction coefficient.

[0038] In this embodiment, the weighted formula for the ordinate of the Bézier curve is: By(t) = a(t) × src.y + b(t) × tgt.y; Where By(t) is the ordinate of the Bézier curve under parameter t; src.y is the ordinate of the starting node of the Bézier curve; tgt.y is the ordinate of the ending node of the Bézier curve; and a(t) is the weight function of the starting node, a(t)=(1-t). 2 ×(1+2t); b(t) is the weight function of the terminal node, b(t)=t 2 ×(3-2t); a(t)+b(t)=1.

[0039] In this embodiment, during collision detection, the precise ordinate of the curve at any parameter t can be directly obtained by a simple weighted calculation of the ordinates of the starting node and the ending node of the Bézier curve. This eliminates the need for a complete cubic Bézier curve calculation for all control points, thereby reducing the computational complexity of collision detection. Furthermore, it allows for direct control of the longitudinal detour position of the entire curve by adjusting the ordinates of the ending nodes of the Bézier curve, providing a simple and efficient mathematical basis for connecting line avoidance.

[0040] In this embodiment, since the ordinate of the first dynamic control point is the same as the ordinate of the starting node of the Bézier curve (C1.y=src.y), and the ordinate of the second dynamic control point is the same as the ordinate of the ending node of the Bézier curve (C2.y=tgt.y), the ordinate of the Bézier curve is determined only by the weighted sum of the ordinates of its starting node and ending node. Therefore, the ordinate of the cubic Bézier curve, which originally required four control points (i.e., the coordinates P0 of the starting node of the Bézier curve, the first dynamic control point C1, the second dynamic control point C2, and the coordinates P3 of the ending node of the Bézier curve), can be simplified to a binary weighted function that depends only on the ordinates of the starting node and the ending node of the Bézier curve.

[0041] Furthermore, by using the bisection method to inversely solve the curve parameters, determining whether the cross-level connection line passes through the level nodes between the starting level and the ending node level includes: S612. The first position parameter of the Bézier curve when it enters the coverage area of ​​the intermediate layer node and the second position parameter when it leaves the coverage area of ​​the intermediate layer node are obtained by inverse bisection method. In step S612, the bisection method is used to solve Bx(t) = nLeftX, and the first position parameter tLeft is obtained by iterating multiple times; then the bisection method is used to solve Bx(t) = nRightX to obtain the second position parameter tRight; where Bx(t) is the abscissa of the Bézier curve under parameter t; nLeftX is the abscissa of the left boundary of the area covered by the intermediate layer node; and nRightX is the abscissa of the right boundary of the area covered by the intermediate layer node.

[0042] In this embodiment, the intermediate layer node coverage area refers to the rectangular area occupied by the target node in the canvas coordinate system in an intermediate layer located between the starting level and the ending level, which is jointly defined by the left boundary x-coordinate nLeftX, the right boundary x-coordinate nRightX, the upper boundary y-coordinate nTopY, and the lower boundary y-coordinate nBotY of the node.

[0043] S613. Calculate the ordinates of the Bézier curve at the left and right boundaries of the intermediate layer based on the first position parameter and the second position parameter, respectively; S614. The overlap between the left and right boundary ordinate intervals and the intermediate layer node ordinate intervals is determined to determine whether the cross-level connection line collides with the intermediate layer node. The ordinate at the left boundary is: byLeft = a(tLeft) × src.y + b(tLeft) × tentativeTgtY; The ordinate at the right boundary is: byRight = a(tRight) × src.y + b(tRight) × tentativeTgtY; Wherein, byLeft is the ordinate of the left boundary, byRight is the ordinate of the right boundary; tentativeTgtY is the current ordinate of the end node before position adjustment is performed; tLeft is the first position parameter; tRight is the second position parameter; a(tLeft) is the function value of the weight function a(t) at the parameter tLeft; b(tLeft) is the function value of the weight function b(t) at the parameter tLeft; a(tRight) is the function value of the weight function a(t) at the parameter tRight; b(tRight) is the function value of the weight function b(t) at the parameter tRight.

[0044] In this embodiment, when the ordinate interval [byLeft, byRight] of the Bézier curve at the left and right boundaries of the intermediate layer node overlaps with the ordinate coverage interval [nTopY, nBotY] of the intermediate layer node, it is determined that the cross-level connection line has collided with the intermediate layer node, that is, the drawing path of the connection line passes through the intermediate layer node area. Specifically, if byLeft or byRight falls within the interval [nTopY, nBotY], or the ordinate interval [byLeft, byRight] contains the interval [nTopY, nBotY], then a collision is determined, and the ordinate of the end node of the Bézier curve needs to be adjusted to achieve avoidance.

[0045] In this embodiment, by accurately calculating the ordinate of the Bézier curve at the left and right boundaries of the coverage area of ​​the intermediate layer node, and comparing it with the ordinate interval of the intermediate layer node, it is determined whether the cross-level connection line visually crosses the intermediate layer node. When a collision is determined, the required ordinate displacement of the end node is calculated, providing data support for subsequent adjustment of the position of the end node and elimination of the visual overlap between the connection line and the node.

[0046] Furthermore, if the cross-level connection line passes through a level node between the starting level and the ending node level, adjusting the position of the cross-level connection line to avoid the level node includes: S615. When a collision is detected between the cross-level connection line and the intermediate layer node, the end node of the Bézier curve is moved in the direction of increasing ordinate value, or the end node is moved in the direction of decreasing ordinate value, to obtain the adjusted ordinate of the end node.

[0047] When the end node is moved in the direction of increasing ordinate value, the ordinate of the end node is: need=(nBotY+margin-a(tLeft)×src.y) / b(tLeft); When the end node is moved in the direction of decreasing ordinate value, the ordinate of the end node is: need=(nTopY-margin-a(tLeft)×src.y) / b(tLeft); Wherein, need is the adjusted ordinate of the end node; nBotY is the ordinate of the lower boundary of the intermediate layer node; nTopY is the ordinate of the upper boundary of the intermediate layer node; and margin is the minimum safe clearance distance parameter set between the cross-level connection line and the intermediate layer node.

[0048] In this embodiment, by accurately resolving the target ordinate of the end node of the Bézier curve based on the collision direction, the end node is moved away from the intermediate layer nodes. This ensures that the actual drawn path of the adjusted Bézier curve bypasses the intermediate layer node area, eliminating the visual crossing between cross-level connectors and intermediate layer nodes. Users can clearly distinguish between node boundaries and connector paths, and the direction of the connectors is intuitive and clear, significantly improving the readability and visual orderliness of the flowchart.

[0049] S616. Calculate the displacement of the end node based on the adjusted ordinate of the end node. Specifically, the displacement is: delta = need - currentTgtY; Where currentTgt.y is the ordinate of the end node of the Bézier curve before the update; delta is the displacement.

[0050] The ordinate of the end node is updated based on the displacement. Wherein, the ordinate is: tgt.y = currentTgt.y + delta; Where tgt.y is the ordinate of the end node of the updated Bézier curve.

[0051] S617. Synchronously update the ordinates of other nodes at the same level as the end node.

[0052] Furthermore, in this embodiment, the method further includes: setting an upper limit for the displacement of the end node: maxStretch=(H_node+G_node)×span×5; Where maxStretch is the upper limit of displacement, H_node is the height of the end node in the vertical axis direction; G_node is the vertical spacing between adjacent nodes in the same layer; span is the number of layers spanned between the starting layer and the end node layer. When the absolute value of the displacement of the end node on the vertical axis is greater than the upper limit of displacement, the displacement is equal to the upper limit of displacement, and the displacement direction of the end node remains unchanged.

[0053] In this embodiment, by setting an adaptive displacement upper limit related to the height of the end node, the spacing between nodes in the same layer, and the number of layers across, when the theoretical avoidance displacement is too large due to the large number of layers across, the displacement is cut off to a reasonable range to prevent the end node from being pushed excessively outside the canvas boundary. Thus, while achieving precise avoidance of cross-level connection lines, the overall layout of the flowchart is always kept within the effective display area, maintaining the rationality and visual order of the layout.

[0054] Example 2 Based on the same inventive concept, this embodiment discloses a flowchart hierarchical layout system, the flowchart hierarchical layout system comprising: The directed acyclic graph generation unit is configured to convert a loop graph in a flowchart into a directed acyclic graph; The node allocation unit is configured to calculate the level corresponding to each node in reverse from the end of the process, and allocate each node to the corresponding level. The connection crossover reduction unit is configured to reduce the number of crossovers between different levels; The node position arrangement unit is configured to arrange the target nodes according to the distance between the target node and the adjacent predecessor level; for the target nodes with the same predecessor node, a position arrangement coordinate generation unit is configured according to the subsequent process scale of the target node. The coordinate generation unit is configured to assign x-coordinates and y-coordinates to each node; The connection optimization unit is configured to perform curve parameterization calculation on the cross-level connection line, determine whether the cross-level connection line passes through the level node between the starting level and the ending node level, and if it does, adjust the cross-level connection line to avoid the level node.

[0055] It is understood that the flowchart layered layout system of this embodiment and the flowchart layered layout method described in Embodiment 1 are based on the same inventive concept. Each functional unit in the system corresponds one-to-one with each corresponding step in the method, and can achieve the same technical effect as Embodiment 1. Therefore, it will not be described again here.

[0056] Obviously, those skilled in the art can make various modifications and variations to this invention without departing from its spirit and scope. Therefore, if these modifications and variations fall within the scope of the claims of this invention and their equivalents, this invention also intends to include these modifications and variations.

Claims

1. A flowchart hierarchical layout method, characterized by, The method includes: Convert the loop graph in the flowchart into a directed acyclic graph; The process of converting a loop graph in a flowchart into a directed acyclic graph includes: using a depth-first search to traverse the flowchart, detecting loops and reversing the direction of the loop edges to obtain a directed acyclic graph; Calculate the level corresponding to each node from the end of the process backwards, and assign each node to the corresponding level; Among them, the process of calculating the level corresponding to each node in reverse from the end of the process includes: using the ALAP strategy to calculate the longest path in reverse from the node with an out-degree of 0, and combining the total depth of the forward calculation to determine the level of each node. Reduce the number of crossovers in the connecting lines between different levels; Reducing the number of intersections between different levels includes: using a centroid heuristic to perform bidirectional iterative sorting of nodes at each level, and sorting according to the average position index of the predecessor or successor node. The target nodes are arranged according to the distance between the target node and its adjacent predecessor level; for target nodes with the same predecessor node, the positions are arranged according to the subsequent process scale of the target node. Assign x-coordinates and y-coordinates to each node; The cross-level connection line is parametrically drawn using Bézier curves, and the curve parameters are solved by the bisection method to determine whether the cross-level connection line passes through the level node between the starting level and the ending node level. If it does, the position of the cross-level connection line is adjusted to avoid the level node.

2. The flowchart hierarchical layout method of claim 1, wherein, For target nodes within the target level, the positional arrangement according to the distance between the target node and the adjacent predecessor level includes: Traverse all predecessor nodes corresponding to the target node and obtain the predecessor nodes adjacent to the target node; When the target node has an adjacent predecessor node, the target node is arranged from the end position of the target level to the middle position of the target level according to the distance between the target level and the adjacent predecessor level corresponding to the adjacent predecessor node. When the target node does not have a corresponding predecessor node, the distance is set to the minimum value, and the target node is arranged in the middle position of the target level.

3. The flowchart hierarchical layout method of claim 2, wherein, For target nodes within the target level, their positions are arranged according to the distance between the target node and the adjacent predecessor level. Then, for all nodes within the target level, their positions are arranged according to the subsequent process scale of the node. Specifically, for nodes within the target level, the positional arrangement according to the subsequent process scale of the node includes: The size of the downstream subtree for each node is calculated recursively using Depth-First Search (DFS). Wherein, the size of the downstream subtree is the sum of the number of the target node and the number of all successor nodes reachable from the target node along directed edges; Traverse all nodes within the target level and filter out all nodes within the target level that have the same single predecessor node; According to the size of the downstream subtree, the nodes are arranged sequentially from the middle position of the target level to the end position of the target level.

4. The flowchart hierarchical layout method of claim 1, wherein, Parametric plotting of cross-level connectors using Bézier curves includes: B(t) = (1 - t) 3 × P0+ 3 × (1 - t) 2 × t × C1+ 3 × (1 - t) × t 2 × C2+ t 3 × P3; Where B(t) is the real-time coordinate point of the Bézier curve; t is the curve normalization parameter, t∈[0,1]; P0 is the coordinate of the starting node of the Bézier curve; P3 is the coordinate of the ending node of the Bézier curve; C1 is the first dynamic control point; C2 is the second dynamic control point; The x-coordinate of the first dynamic control point is: C1.x=src.x+controlOffset-kSpan×controlOffset; The x-coordinate of the second dynamic control point is: C2.x=tgt.x-controlOffset+kSpan×controlOffset; src.x is the x-coordinate of the starting node of the Bézier curve; tgt.x is the x-coordinate of the ending node of the Bézier curve; controlOffset is the basic horizontal offset of the first dynamic control point and the second dynamic control point; kSpan is the cross-layer correction coefficient.

5. The flowchart hierarchical layout method of claim 4, wherein, The weighted formula for the ordinate of the Bézier curve is: By(t) = a(t) × src.y + b(t) × tgt.y; wherein By(t) is the ordinate of the Bezier curve at the parameter t; src.y is the ordinate of the starting node of the Bezier curve; tgt.y is the ordinate of the terminal node of the Bezier curve; a(t) is the weight function of the starting node, a(t) = (1-t) 2 ×(1+2t); b(t) is the weight function of the terminal node, b(t) = t 2 ×(3-2t); a(t) + b(t) = 1.

6. The flowchart layered layout method as described in claim 5, characterized in that, Determining whether the cross-level connection line passes through a level node between the starting level and the ending level by inversely solving the curve parameters using the bisection method includes: The first position parameter of the Bézier curve when it enters the coverage area of ​​the intermediate layer node and the second position parameter when it leaves the coverage area of ​​the intermediate layer node are obtained by inverse bisection method. Calculate the ordinates of the Bézier curve at the left and right boundaries of the intermediate layer based on the first position parameter and the second position parameter, respectively. The overlap between the left and right boundary ordinate intervals and the intermediate layer node ordinate intervals is determined to determine whether the cross-level connection line collides with the intermediate layer node. The ordinate at the left boundary is: byLeft = a(tLeft) × src.y + b(tLeft) × tentativeTgtY; The ordinate at the right boundary is: byRight = a(tRight) × src.y + b(tRight) × tentativeTgtY; Wherein, byLeft is the ordinate of the left boundary, byRight is the ordinate of the right boundary; tentativeTgtY is the current ordinate of the end node before position adjustment is performed; tLeft is the first position parameter; tRight is the second position parameter; a(tLeft) is the function value of the weight function a(t) at the parameter tLeft; b(tLeft) is the function value of the weight function b(t) at the parameter tLeft; a(tRight) is the function value of the weight function a(t) at the parameter tRight; b(tRight) is the function value of the weight function b(t) at the parameter tRight.

7. The flowchart layered layout method as described in claim 6, characterized in that, If the cross-level connection line passes through a level node between the starting level and the ending node level, then adjusting the position of the cross-level connection line to avoid the level node includes: When a collision is detected between the cross-level connection line and the intermediate layer node, the end node of the Bézier curve is moved in the direction of increasing ordinate value, or the end node is moved in the direction of decreasing ordinate value, to obtain the adjusted ordinate of the end node: When the end node is moved in the direction of increasing ordinate value, the adjusted ordinate of the end node is: need=(nBotY+margin-a(tLeft)×src.y) / b(tLeft); When the end node is moved in the direction that decreases the ordinate value, the adjusted ordinate of the end node is: need=(nTopY-margin-a(tLeft)×src.y) / b(tLeft); Where, need is the adjusted ordinate of the end node; nBotY is the ordinate of the lower boundary of the intermediate layer node; nTopY is the ordinate of the upper boundary of the intermediate layer node; margin is the minimum safe clearance distance parameter set between the cross-level connection line and the intermediate layer node; The displacement of the end node is calculated based on the adjusted ordinate of the end node; Update the ordinate of the end node based on the displacement; The ordinates of other nodes at the same level as the end node are updated synchronously.

8. The flowchart layered layout method as described in claim 7, characterized in that, The upper limit of displacement of the end node is set as follows: maxStretch=(H_node+G_node)×span×5; Where maxStretch is the upper limit of displacement, H_node is the height of the end node in the vertical axis direction; G_node is the vertical spacing between adjacent nodes in the same layer; span is the number of layers spanned between the starting layer and the end node layer. When the absolute value of the displacement of the end node on the vertical axis is greater than the upper limit of displacement, the displacement is equal to the upper limit of displacement, and the displacement direction of the end node remains unchanged.

9. A flowchart hierarchical layout system, characterized in that, The system includes: The directed acyclic graph generation unit is configured to convert a loop graph in a flowchart into a directed acyclic graph; The process of converting a loop graph in a flowchart into a directed acyclic graph includes: using a depth-first search to traverse the flowchart, detecting loops and reversing the direction of the loop edges to obtain a directed acyclic graph; The node allocation unit is configured to calculate the level corresponding to each node in reverse from the end of the process, and allocate each node to the corresponding level. Among them, the process of calculating the level corresponding to each node in reverse from the end of the process includes: using the ALAP strategy to calculate the longest path in reverse from the node with an out-degree of 0, and combining the total depth of the forward calculation to determine the level of each node. The connection crossover reduction unit is configured to reduce the number of crossovers between different levels; Reducing the number of intersections between different levels includes: using a centroid heuristic to perform bidirectional iterative sorting of nodes at each level, and sorting according to the average position index of the predecessor or successor node. The node position arrangement unit is configured to arrange the target nodes according to the distance between the target node and the adjacent predecessor level; and for the target nodes with the same predecessor node, arrange the positions according to the subsequent process scale of the target node. The coordinate generation unit is configured to assign x-coordinates and y-coordinates to each node; The connection optimization unit is configured to perform curve parameterization calculation on the cross-level connection line, determine whether the cross-level connection line passes through the level node between the starting level and the ending node level, and if it does, adjust the cross-level connection line to avoid the level node.

Images