A topology graph editing method

Abstract

The application discloses a kind of topological graph editing methods, belong to computer man-machine interaction and data visualization technical field, comprising the following steps: S1: in response to the operation of user from component library dragging component to canvas, S2: in response to the automatic layout instruction triggered by user, S3: in response to the operation of user connecting two nodes or moving node position, S4: feature vector is extracted based on user operation sequence, S5: in response to save instruction;The application is organically cooperated by steps S1 to S5, from layout automatic optimization, connection line dynamic obstacle avoidance, intention perception recommendation, parameterized template reuse, standardized data exchange five dimensions, systematically solve the problems, such as low efficiency, poor readability, lack of intelligent assistance and integration difficulty, etc. that existing topological graph editor exists, with significant technical progress and practical value.

Description

Technical Field

[0001] This invention relates to the field of computer human-computer interaction and data visualization technology, specifically to a method for editing topology graphs. Background Technology

[0002] A topology diagram editor is a software tool used to visually create and edit graphical models such as network topologies, system architectures, and data flow diagrams. It is widely used in IT operations and maintenance, power systems, and IoT management. As system complexity increases, users are demanding higher efficiency and intelligence in topology diagram editing.

[0003] Currently, most topology graph editors on the market offer basic shapes and drag-and-drop operations, requiring users to manually adjust node positions and connection routes. This type of solution reveals the following shortcomings in practical use:

[0004] First, layout adjustments rely on repeated trial and error by humans, making it difficult to obtain an aesthetically pleasing and clear topology in a short period of time.

[0005] Second, connecting lines are usually straight lines or simple broken lines, which are prone to intersection and overlap when the number of nodes increases, seriously affecting readability.

[0006] Third, it lacks the ability to perceive the user's design intent and cannot proactively recommend suitable layout templates or component combinations;

[0007] Fourth, the template function is limited to appearance and style and does not support parameterized definition, which leads to the need to repeatedly create similar topologies;

[0008] Fifth, the data is mostly saved in image or proprietary binary file formats, making it difficult to exchange data with other systems. Summary of the Invention

[0009] The purpose of this invention is to provide a topology graph editing method that solves the technical problems of low layout efficiency, poor line readability, lack of intelligent assistance, and difficulty in data exchange in the prior art.

[0010] In a first aspect, the present invention provides a method for editing a topology graph, comprising the following steps:

[0011] S1: In response to the user's drag-and-drop operation from the component library to the canvas, obtain the component type and instantiate a node object based on the parameterized template; the node object contains geometric attributes and business attributes;

[0012] S2: In response to the user-triggered automatic layout command, execute the layout optimization by combining the force-oriented algorithm and the layered algorithm to generate the target coordinates of each node;

[0013] S3: In response to user operations such as connecting two nodes or moving node positions, generate orthogonal, dynamically obstacle-avoiding paths for the connecting lines based on the A* pathfinding algorithm, and render the output.

[0014] S4: Extract feature vectors based on user operation sequences, identify user intent using a pre-trained classification model, and recommend topological templates from the template library based on the identification results;

[0015] S5: In response to a save command, serialize the current topology map into a data object conforming to a preset JSON Schema format, and support the recovery of the topology map from a file in this format.

[0016] A further technical solution is that the layout optimization of the fusion force-oriented algorithm and the layering algorithm in step S2 specifically includes:

[0017] The Fruchterman-Reingold force-directed model is used to calculate the repulsive and attractive forces between global nodes, and the node positions are updated iteratively.

[0018] Identify tree-like or hierarchical subgraphs in the topology and use the Reingold-Tilford tree layout algorithm to calculate the sub-layout coordinates.

[0019] The sub-layout coordinates are used as soft constraints and integrated into the global iteration process in a weighted manner to generate the final layout.

[0020] A further technical solution is that the step S3, which generates the connecting path based on the A* pathfinding algorithm, specifically includes:

[0021] Divide the canvas into a grid and mark existing nodes and their boundary extension areas as obstacles;

[0022] Using Manhattan distance as a heuristic function, we search from the source node connection point to the target node connection point to obtain the optimal path composed of horizontal and vertical line segments.

[0023] Redundant inflection points in the path are simplified to generate orthogonal polylines or Bézier curves;

[0024] When an associated node is moved, a new pathfinding mechanism is automatically triggered to achieve dynamic obstacle avoidance.

[0025] A further technical solution is that the feature vector of the user operation sequence in step S4 includes:

[0026] The frequency of each operation type, the distribution of the component types used, and the connection density between existing nodes in the most recent N steps; the classification model is a random forest model, and the output intent category includes at least one of star network construction, mesh network construction, data flow graph drawing, and hierarchical architecture design.

[0027] A further technical solution is that the parameterized template in step S1 includes:

[0028] The system defines the graphical appearance, editable business attribute fields, and mapping rules between attributes and appearance. When a user modifies a business attribute, the system automatically changes the node's color, icon, or label text according to the mapping rules.

[0029] A further technical solution is that the JSON Schema formatted data object in step S5 includes at least:

[0030] The graph node contains an array of nodes and an array of edges. Each element in the nodes array contains a unique identifier, component type, x and y coordinates, and a custom attribute object. Each element in the edges array contains a unique identifier, source node identifier, target node identifier, and an array of path points.

[0031] In a second aspect, the present invention provides a topology map editing system, comprising:

[0032] The parameterized component module is used to instantiate node objects based on the component type and parameterized template;

[0033] The intelligent layout module is used to perform layout optimization by combining the force-oriented algorithm and the hierarchical algorithm;

[0034] The dynamic connection module is used to generate and update orthogonal paths for connection lines based on the A* pathfinding algorithm.

[0035] The intent awareness module is used to extract operation sequence features and use a classification model to identify user intent and recommend templates.

[0036] The data exchange module is used for serialization, saving, parsing, and loading according to the JSON Schema format.

[0037] A further technical solution is that the system also includes:

[0038] The context toolbar module is used to pop up a quick operation panel when a node is selected, providing operations such as attribute editing, icon replacement, and color adjustment.

[0039] Thirdly, the present invention provides a computer device including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the steps of any of the methods described above.

[0040] Fourthly, a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of any of the methods described above.

[0041] Compared with the prior art, the beneficial effects of the present invention are:

[0042] This invention, through the organic coordination of steps S1 to S5, systematically solves the problems of low efficiency, poor readability, lack of intelligent assistance, and integration difficulties of existing topology graph editors from five dimensions: automatic layout optimization, dynamic obstacle avoidance of connections, intent-aware recommendation, parameterized template reuse, and standardized data exchange. It has significant technological progress and practical value. Attached Figure Description

[0043] To make the objectives, technical solutions, and beneficial effects of this invention clearer, the following figures are provided for illustration:

[0044] Figure 1 This is an overall flowchart of the topology graph editing method provided in an embodiment of the present invention.

[0045] Figure 2 This is a messy topology diagram that does not use the present invention.

[0046] Figure 3 A clear topology diagram of fusion force guidance and hierarchical layout provided for embodiments of the present invention.

[0047] Figure 4 This is the initial wiring state before the invention was used.

[0048] Figure 5 This is a schematic diagram of orthogonal connection dynamic obstacle avoidance connection based on the A* algorithm provided in an embodiment of the present invention.

[0049] Figure 6 This is a schematic diagram of the attribute editing interface of the parameterized template provided in an embodiment of the present invention.

[0050] Figure 7 This is a schematic diagram of the structure of the JSON Schema data exchange format provided in an embodiment of the present invention. Detailed Implementation

[0051] To make the objectives, technical solutions, and advantages of this invention clearer, the invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the invention.

[0052] Example 1:

[0053] like Figures 1-7 As shown, this invention provides a topology diagram editing method, which can be executed by a topology diagram editor running in a web browser or desktop environment. The following is in conjunction with... Figure 1 Each step of the method is explained in detail.

[0054] Step S1: Respond to drag and drop operations by instantiating nodes based on parameterized templates.

[0055] The left side of the editor features a component library containing predefined components such as "Server," "Switch," "Firewall," and "Cloud." Each component is associated with a parameterized template. For example, the "Server" template is defined as follows: its appearance is a rectangle with a corner radius of 4 pixels and a default fill color of blue; its business attributes include "Device Name," "IP Address," "Number of CPU Cores," and "Memory Size"; the mapping rule is: if the number of CPU cores is greater than 8, the fill color changes to orange.

[0056] When a user drags the "Server" component from the component library to the center of the canvas and releases it, the editor captures this action, obtains the component type "server," and calls the corresponding template to create a new node object. This node object is assigned a unique identifier (e.g., "node_001"), its initial position is the mouse release coordinates, and its geometric size is 80×60 pixels. Simultaneously, a property editing pop-up window (e.g., ...) appears. Figure 6 As shown in the image, the user fills in information such as device name and IP address. After the user confirms, the node renders the corresponding colors and labels according to the mapping rules.

[0057] Step S2: Respond to the automatic layout command and perform blend layout optimization.

[0058] After creating multiple nodes on the canvas and manually adding several connecting lines, the user clicks the "Smart Layout" button on the toolbar. The editor retrieves information about all current nodes and edges and begins executing the layout algorithm.

[0059] First, the Fruchterman-Reingold algorithm is employed. A repulsive force coefficient (inversely proportional to the square of the distance between nodes) is defined for each node, and an attractive force coefficient (directly proportional to the distance) is defined for each edge. After 50 iterations, the resultant force of each node is calculated and its position is updated, resulting in a more uniform distribution of nodes overall.

[0060] Next, the topology was analyzed, identifying a star-shaped subgraph centered on a switch (with multiple server nodes connected to the same switch). This subgraph was extracted, and the Reingold-Tilford tree layout algorithm was applied, with the switch as the root node and the servers as leaf nodes, to recalculate their relative positions, resulting in a clear radial structure for the subgraph.

[0061] Finally, the coordinates of the sub-layout are used as soft constraints and weighted averaged with the current position of the force-directed graph (weight coefficient is 0.4) to obtain new node coordinates. The rendered topology graph maintains a uniform global node distribution while ensuring clear hierarchy within the star-shaped subgraph, preventing intersecting lines.

[0062] Step S3: Respond to the connection operation and generate orthogonal dynamic routes based on the A* algorithm.

[0063] When a user wants to connect "Server A" to "Switch", hovering the mouse over the right edge connection point of the server node (the connection point will automatically highlight), holding down the left mouse button and dragging to the left edge connection point of the switch node, then releasing the mouse button. The editor captures this action and records the source and target nodes.

[0064] The system divides the canvas into a 50×50 grid. All existing nodes and their boundaries, extending outwards by 10 pixels, are marked as obstacles. The A* algorithm is used for pathfinding: the starting point is the coordinates of the server node connection point, and the ending point is the coordinates of the switch node connection point. The heuristic function is the Manhattan distance (|x1-x2|+|y1-y2|). Starting from the starting point, the algorithm expands to adjacent grid points in four directions each time, calculating the actual cost g (path length from the starting point to the current point) and the estimated cost h. The point with the smallest f=g+h is selected to continue the search until the ending point is reached.

[0065] The searched path is a polyline composed of a series of grid points. The system simplifies this polyline by removing collinear midpoints and retaining only inflection points. This results in an orthogonal polyline composed of horizontal and vertical segments, rendered as a line with arrows. If a user subsequently drags a server node, the system automatically clears the cached path of this line and re-executes the A* pathfinding process to achieve dynamic obstacle avoidance (e.g., ...). Figure 4 , 5 (As shown).

[0066] Step S4: Identify user intent based on the operation sequence and recommend templates.

[0067] The editor maintains a queue of operation sequences of length 10 in the background. Whenever a user performs an operation such as dragging and dropping a component, creating a connection, or deleting a node, that operation type is added to the queue. At the same time, the frequency of each type of operation in the queue, the distribution of the component types that have appeared (e.g., "server" appears 5 times, "switch" appears 1 time), and the connection density of the current topology (number of edges / number of nodes) are counted to form an 8-dimensional feature vector.

[0068] A pre-trained random forest classifier (trained with 3000 manually labeled operation sequences) receives the feature vector and outputs an intent category. For example, when a user adds multiple server nodes and attempts to connect them to a central node, the classifier outputs "Star network construction". The editor then retrieves a template labeled "Star network" from the template library. This template includes preset node spacing, connection styles, and color schemes, and displays a preview in the right panel. After the user clicks "Apply", the current topology automatically adjusts to the layout recommended by the template.

[0069] Step S5: Persist and exchange data based on JSON Schema.

[0070] After the user finishes editing the topology diagram, they click the "Save" button. The editor calls the serialization interface to convert all nodes and edges in the current canvas into a data object conforming to a predefined JSON schema. Example data is shown below. Figure 5 As shown.

[0071] This JSON object can be saved as a file or uploaded to the server via API. When a user needs to load a previously saved topology, they select this JSON file. After the parser verifies that it conforms to the schema, it reconstructs all nodes and connections, restoring them to their original positions and paths.

[0072] Technical effects:

[0073] (i) To address the shortcomings of "low layout efficiency and cumbersome manual adjustment", this invention achieves automated and semantic layout optimization through the fusion layout algorithm in step S2.

[0074] In the background technology, existing editors only provide basic alignment assistance, requiring users to repeatedly drag and adjust node positions. This invention employs the Fruchterman-Reingold force-directed model for global iterative calculation in step S2: each node experiences repulsive forces from other nodes (to prevent overlap) and attractive forces from connected nodes (to maintain association). After a finite number of iterations, it automatically reaches a uniform distribution, avoiding the need for users to manually explore positions. Simultaneously, for common tree-like or hierarchical subgraphs in the topology (such as multiple servers connected to a switch), the Reingold-Tilford tree layout algorithm is called separately to ensure a standard parent-child hierarchical structure within the subgraph. Finally, through weighted fusion, the sub-layouts are superimposed as soft constraints onto the global force-directed result. This principle ensures that the overall topology is free from node clustering or uneven sparsity while preserving a clear hierarchy of local logical relationships, thus fundamentally solving the problems of low layout efficiency and unattractive results.

[0075] (ii) To address the shortcomings of "overlapping and poor readability of connecting lines", this invention achieves automatic obstacle avoidance and orthogonalization of connecting lines through A* path finding dynamic routing in step S3.

[0076] In existing technologies, connecting lines are mostly straight lines or simple polygonal lines, inevitably leading to numerous intersections as the number of nodes increases. In step S3 of this invention, the canvas is discretized into a grid, and all existing nodes and their surrounding regions are marked as obstacles. The A* algorithm, combined with the Manhattan distance heuristic, is used to search for the shortest orthogonal path (composed only of horizontal and vertical line segments) from the source node to the target node. The core principle of this algorithm is that on a grid map, the Manhattan distance ensures that the path always extends along the coordinate axes, thus generating straight, industrial-style connecting lines. Simultaneously, because obstacles are pre-marked, the A* algorithm naturally avoids other nodes. When the user moves a node, the system automatically clears the old path cache and re-executes the A* search, achieving dynamic obstacle avoidance. This principle ensures that regardless of the node arrangement, connecting lines are always presented orthogonally and without intersections, significantly improving the readability of complex topologies.

[0077] (iii) In response to the shortcomings of “lack of intelligent assistance and inability to perceive user intent”, the present invention realizes active recommendation through the operation sequence feature extraction and classification model in step S4.

[0078] Existing editors can only passively respond to user actions and do not provide design suggestions. This invention maintains an operation sequence queue in step S4, recording user actions such as dragging components and creating connections in real time, and statistically analyzing features such as operation frequency, component type distribution, and connection density. These feature vectors are input into a pre-trained random forest classifier. The classifier works by learning the statistical patterns of operation modes corresponding to different design intentions (such as star networks, mesh networks, data flow graphs, etc.) based on a large number of manually labeled operation samples. When a new user's operation mode is similar to the statistical characteristics of a certain intention, the model outputs the intention category, and the system then matches the corresponding topology template from the template library and makes a recommendation. This principle allows the editor to "guess" the topology structure the user wants to build, transforming passive editing into active assistance, significantly reducing the user's learning cost and design time.

[0079] (iv) In response to the shortcomings of "single template function and lack of parameterized reusability", this invention realizes dynamic appearance driven by business semantics through parameterized template and attribute mapping rules in step S1.

[0080] In the background, templates only store static graphic styles, resulting in low reuse value. The parameterized template defined in step S1 of this invention not only includes a geometric appearance but also a set of editable business attribute fields (such as device name, number of CPU cores, and IP address) and mapping rules between attributes and appearance (e.g., if the CPU has ≥8 cores, the fill color changes to orange). The principle is that when a node is instantiated, the template is equivalent to a class with logical constraints. After the user modifies the attributes, the system recalculates the appearance according to the mapping rules and renders it in real time. This allows the same template to present differentiated visual effects based on different business parameters, eliminating the need to create separate templates for each configuration, fundamentally improving the expressiveness and reusability of templates.

[0081] (v) In response to the shortcomings of "non-standard data exchange format and difficulty in integration with third-party systems", this invention achieves platform-independent standardized data persistence through JSON Schema serialization in step S5.

[0082] Existing technologies often save data as images or proprietary binary formats, which cannot be parsed by other systems. This invention defines a public JSON Schema in step S5, requiring that exported data objects must contain graph nodes, a nodes array (each node containing an id, type, coordinates, and custom attribute object), and an edges array (each edge containing source, destination, and path point arrays). This principle is based on the universal data exchange format JSON, and the constraints of the Schema ensure that any third-party system conforming to this Schema (such as network management systems, data analysis platforms, and cloud-based operation and maintenance tools) can accurately parse and reconstruct the topology graph, and supports lossless recovery. This breaks down data silos, making the topology graph a programmable and exchangeable standard asset.

[0083] Example 2:

[0084] This embodiment provides a topology map editing system for implementing the method of Embodiment 1. The system includes:

[0085] Parameterized Components Module: Used to manage the component template library, instantiate nodes in response to drag-and-drop operations, and provide an attribute editing interface;

[0086] The intelligent layout module encapsulates the Fruchterman-Reingold force-directed algorithm and the Reingold-Tilford tree layout algorithm, providing a one-click automatic layout interface;

[0087] Dynamic connection module: Implements orthogonal routing based on the A* algorithm, listens for node movement events and triggers rerouting;

[0088] Intent awareness module: maintains an operation sequence queue, loads a pre-trained random forest model, outputs intent categories, and calls the template recommendation interface;

[0089] Data exchange module: Provides functionality for exporting to and importing from JSON files, adhering to the publicly available JSON Schema definition;

[0090] Context Toolbar Module: When a user clicks a node, a toolbar floats near the node, containing buttons such as "Edit Attributes", "Change Icon", "Set Color", and "Delete".

[0091] The system can be deployed as a web application, using Canvas or SVG for rendering. The front end uses JavaScript to implement the aforementioned algorithm modules, while the back end provides a template library and data storage services.

[0092] Although the invention has been described herein with reference to several illustrative embodiments, it should be understood that many other modifications and implementations can be devised by those skilled in the art, which will fall within the scope and spirit of the principles disclosed herein. More specifically, various variations and modifications can be made to the components and / or layout of the subject matter arrangement within the scope of the disclosure, drawings, and claims. Besides variations and modifications to the components and / or layout, other uses will be apparent to those skilled in the art.

Claims

1. A method for editing topology graphs, characterized in that: Includes the following steps: S1: In response to the user's drag-and-drop operation from the component library to the canvas, obtain the component type and instantiate a node object based on the parameterized template; the node object contains geometric attributes and business attributes; S2: In response to the user-triggered automatic layout command, execute the layout optimization by combining the force-oriented algorithm and the layered algorithm to generate the target coordinates of each node; S3: In response to user operations such as connecting two nodes or moving node positions, generate orthogonal, dynamically obstacle-avoiding paths for the connecting lines based on the A* pathfinding algorithm, and render the output. S4: Extract feature vectors based on user operation sequences, identify user intent using a pre-trained classification model, and recommend topological templates from the template library based on the identification results; S5: In response to a save command, serialize the current topology map into a data object conforming to a preset JSON Schema format, and support the recovery of the topology map from a file in this format.

2. The topology graph editing method according to claim 1, characterized in that: The layout optimization of the fusion force-oriented algorithm and the hierarchical algorithm in step S2 specifically includes: The Fruchterman-Reingold force-directed model is used to calculate the repulsive and attractive forces between global nodes, and the node positions are updated iteratively. Identify tree-like or hierarchical subgraphs in the topology and use the Reingold-Tilford tree layout algorithm to calculate the sub-layout coordinates. The sub-layout coordinates are used as soft constraints and integrated into the global iteration process in a weighted manner to generate the final layout.

3. The topology graph editing method according to claim 1, characterized in that: The step S3, which generates the connecting path based on the A* pathfinding algorithm, specifically includes: Divide the canvas into a grid and mark existing nodes and their boundary extension areas as obstacles; Using Manhattan distance as a heuristic function, we search from the source node connection point to the target node connection point to obtain the optimal path composed of horizontal and vertical line segments. Redundant inflection points in the path are simplified to generate orthogonal polylines or Bézier curves; When an associated node is moved, a new pathfinding mechanism is automatically triggered to achieve dynamic obstacle avoidance.

4. The topology graph editing method according to claim 1, characterized in that: The feature vector of the user operation sequence in step S4 includes: The frequency of each operation type, the distribution of the component types used, and the connection density between existing nodes in the most recent N steps; the classification model is a random forest model, and the output intent category includes at least one of star network construction, mesh network construction, data flow graph drawing, and hierarchical architecture design.

5. A topology graph editing method according to claim 1, characterized in that: The parameterized template in step S1 includes: The system defines the graphical appearance, editable business attribute fields, and mapping rules between attributes and appearance. When a user modifies a business attribute, the system automatically changes the node's color, icon, or label text according to the mapping rules.

6. A topology graph editing method according to claim 1, characterized in that: The JSON Schema format data object in step S5 includes at least: a graph node, which contains an array of nodes and an array of edges; wherein, each element of the node array contains a unique identifier, component type, horizontal and vertical coordinates, and a custom attribute object; each element of the edge array contains a unique identifier, source node identifier, target node identifier, and an array of path points.

Images