Dynamic drawing and layout method for visualized network topological graph based on Antv / X6

Abstract

The invention provides a visual network topological graph dynamic drawing and layout method based on Antv / X6, relates to the technical field of front-end graph visualization, and solves the problems of insufficient dynamics, low layout efficiency, poor interaction experience and poor integration expansibility in the existing network topology drawing technology. The method comprises the following steps: firstly, constructing a standardized data model decoupled from a rendering layer, and describing a network topology structure; initializing a canvas instance based on an Antv / X6 graphic engine, instantiating the standardized data model into a graphic object, and adding the graphic object into a canvas; through selection and application of various layout strategies, executing a layout algorithm to calculate node coordinates and trigger animation transition, and generating a visual network topological graph which can be operated by a user; when a user performs multi-dimensional dynamic interaction with the topological graph, data changes are managed and monitored, and re-rendering or re-layout is triggered. According to the method, the requirements of automatic drawing, dynamic layout optimization, smooth interaction, high maintainability and the like of the topological graph can be smoothly met.

Description

Technical Field

[0001] This invention relates to the field of front-end graphics visualization technology, specifically to a method for dynamically drawing and laying out visualized network topology diagrams based on Antv / X6. Background Technology

[0002] In the field of computer network visualization, network topology diagram drawing is a core technical means to support network operation and maintenance, communication management, system architecture design, and IoT device monitoring. Such diagrams need to dynamically present the connection relationships and real-time status of devices such as routers, switches, and servers, placing extremely high demands on the dynamism, layout efficiency, and interactivity of visualization engines. Current mainstream technical solutions have significant limitations: topology diagrams generated by static drawing tools cannot be linked to real-time data, lack interactivity, and are difficult to adapt to scenarios with frequent changes in network structure; while native development based on basic graphics libraries offers flexibility, it requires significant resources to implement low-level functions such as node dragging, connection routing, and automatic layout, resulting in long development cycles and high maintenance costs; and while some commercial graphics engines offer advanced features, they are limited by expensive licensing fees, insufficient technology stack compatibility, or difficulties in customization.

[0003] Furthermore, the key shortcomings commonly faced by existing technologies can be summarized as follows: the two-way binding of dynamic data and views is complex to implement, making it difficult to support real-time updates and status feedback of the topology; the lack of efficient automatic layout algorithms means that manual adjustments are required when dealing with large and complex networks, and it is impossible to generate the optimal layout for business scenarios such as hierarchical and mesh structures, resulting in chaotic visualization effects and a surge in maintenance costs; basic interactions such as node dragging, connection routing, scaling, and panning require deep coding, and layout collapse is easily caused when devices are dynamically added or removed, making it difficult to guarantee smoothness and visual stability; the drawing logic is highly coupled with the business logic, making it difficult to reuse and extend, and there are technical barriers to integration with modern front-end frameworks, which restricts the efficiency of customized development.

[0004] With the development of related technologies, the open-source graph editing engine Antv / X6 has provided a technological foundation for related fields through its basic graph drawing and interaction functions. However, its core design still focuses on general graph editing scenarios and has not yet provided out-of-the-box solutions for network topology. Especially in areas such as multi-level device relationship representation, business-driven intelligent layout, and topology stability maintenance, developers still need to build high-level abstractions and domain logic themselves. This technological gap means that in actual engineering, a significant amount of R&D resources still need to be invested in solving the dynamic layout, state mapping, and interaction optimization problems unique to network topology, severely restricting the response speed and management efficiency of operation and maintenance systems.

[0005] Therefore, there is an urgent need for a drawing implementation method that integrates network domain knowledge, has intelligent layout capabilities, and is highly engineered. Based on inheriting the graphics capabilities of existing engines, it should systematically solve core bottlenecks such as dynamic adaptation of topology graphs, layout efficiency, smooth interaction, and framework integration, so as to meet the stringent requirements for real-time performance, stability, and maintainability in modern network management scenarios. Summary of the Invention

[0006] The purpose of this invention is to address the problems of insufficient dynamism, low layout efficiency, poor interactive experience, and poor integration and scalability in existing network topology drawing technologies. Specifically, it addresses the challenges unique to the network domain, such as frequent changes in topology structure, large-scale device relationship visualization, and real-time state mapping, by providing a dynamic drawing and layout method for visualized network topology diagrams based on Antv / X6. This invention, through a layered architecture design, decouples the automatic layout algorithm, state management, interaction logic, and the core rendering capabilities of the X6 engine, thereby successfully achieving the requirements of automated topology drawing, dynamic layout optimization, smooth interaction, and high maintainability.

[0007] The present invention employs the following technical solutions to achieve its objective: A method for dynamically drawing and laying out visual network topology diagrams based on Antv / X6 includes the following steps: S1. Construct a standardized data model decoupled from the rendering layer to describe the network topology; this standardized data model includes node objects, edge objects, and topology objects. S2. Initialize a canvas instance based on the Antv / X6 graphics engine, register custom nodes and connections, and instantiate a standardized data model into a graphics object and add it to the canvas through a mapping function; S3. By selecting and applying various layout strategies, the corresponding layout algorithm is executed to calculate node coordinates and trigger animation transitions, generating a user-operable visual network topology map. S4. Based on the interactive control system, by extending the event mechanism of the Antv / X6 graphics engine, it provides multi-dimensional dynamic interaction support between users and the visualized network topology map; S5 manages and monitors data changes in the standardized data model in real time. When data changes occur, it only updates the changed parts and triggers the re-rendering or re-layout of the corresponding visualized network topology.

[0008] Specifically, in step S1, the standardized data model adopts the JSON format, in which: the node object contains the unique ID, name, basic type, state type, metadata attributes and specific business attributes of each node in the network; the edge object contains the source node ID, target node ID, basic attributes and link attributes of each edge in the network; the topology object is formed by the corresponding set of all node objects and edge objects, which serves as the application basis of the standardized data model.

[0009] Specifically, in step S2, the canvas instance of the Antv / X6 graphics engine is initialized in the Vue or React framework, and the basic properties of the canvas instance are configured; when registering custom nodes and connections, based on SVG or HTML templates, the graphical appearance and edge object styles of various network device nodes are customized for the nodes that have been initialized in the Vue or React framework, and different SVG graphics are designed for different types of network devices; after completing the design and registration, the mapping process is executed to instantiate the standardized data model and add it to the canvas.

[0010] Preferably, in step S3, the layout manager automatically parses the data features in the standardized data model and selects the corresponding layout strategy based on the data features; or the user controls the layout manager and manually selects the corresponding layout strategy; after the layout strategy is executed, the layout effect is evaluated, and the selection and application of the relevant layout strategy are dynamically adjusted according to the evaluation results.

[0011] Preferably, the layout strategies include force-guided layout, grid layout, and hierarchical layout. When force-guided layout is automatically selected, the corresponding data feature is that the degree of connection between network nodes reaches a preset threshold, indicating that the relationship between nodes is complex. When grid layout is automatically selected, the corresponding data feature is that each device presents a regular row and column arrangement. When hierarchical layout is automatically selected, the corresponding data feature is that there is a clear directionality and hierarchical relationship between devices.

[0012] Specifically, when force-guided layout is applied in a mesh topology, a stable layout is automatically formed through the repulsive and attractive forces between nodes; the visualized network topology is optimized by the force-guided parameters built into the Antv / X6 graphics engine, which include stiffness, repulsive force, and central force; The grid layout automatically aligns each node in the instantiated, standardized data model to the corresponding grid. When applied to a directed acyclic graph topology, hierarchical layout arranges nodes on multiple levels and presents node relationships including primary / backup, flow direction, and local.

[0013] Specifically, in step S4, the multi-dimensional dynamic interactive functions under the interactive control system include: node dragging and alignment, connection optimization, interactive event listening, context menu, shortcut key operation, dynamic highlighting, and animation presentation.

[0014] Specifically, in step S5, a front-end state management library is used to manage and monitor the standardized data model in real time. When responding to data changes, the instantiation process of the standardized data model in step S2 is automatically triggered to realize the re-addition and rendering of relevant graphic objects in the canvas. When the data change exceeds the preset threshold, the layout strategy selection process in step S3 is triggered again to dynamically update the layout strategy.

[0015] Preferably, the method further includes: S6, performing data synchronization and performance optimization, specifically: When data changes occur, the newly received standardized data model is compared with the current standardized data model to identify the changed objects and update them incrementally. Based on the difference comparison results, the batch API of the Antv / X6 graphics engine is called to update the visualized network topology map. During the update of the visualized network topology map, the intention of change is presented to the user through animation. The Scroller plugin is integrated into the Antv / X6 graphics engine to provide support for panning and zooming of the canvas containing the visualized network topology diagram; when the canvas size exceeds a preset size threshold, the viewport of the current canvas is determined, and only elements within the viewport are rendered.

[0016] In summary, due to the adoption of this technical solution, the beneficial effects of this invention are as follows: This invention significantly improves the intelligence and engineering efficiency of network topology drawing. By establishing a fully automated data-to-graphics generation mechanism, it can update the view in real time according to the dynamically changing network structure, completely eliminating the need for manual configuration and elevating drawing efficiency to a new level while ensuring accuracy. The core layout algorithm of the method integrates multi-strategy optimization capabilities, automatically generating topology structures that conform to human cognitive habits for typical network scenarios such as hierarchical and mesh networks. It can maintain layout clarity and visual aesthetics even in large and complex networks, effectively reducing the burden of reading diagrams for maintenance personnel.

[0017] In terms of interaction, this invention provides ready-to-use panning and zooming, node dragging, and continuous routing functions, with a smooth and stable operation. Especially when dynamically adding or deleting devices, an intelligent re-layout mechanism prevents topology collapse, ensuring the view always maintains good readability and consistency, significantly optimizing the user experience. This invention deeply integrates Antv / X6 engine capabilities and is compatible with mainstream front-end frameworks, achieving decoupling of drawing logic and business logic through a hierarchical architecture. The modular design supports flexible expansion of new layout algorithms or customized interaction modes, significantly reducing secondary development costs and providing highly adaptable technical support for network management systems of different sizes. Attached Figure Description

[0018] The present invention is further described in detail with reference to the following figures, which include four figures as follows: Figure 1 This is a schematic diagram illustrating the overall process of the method of the present invention; Figure 2 This is a schematic diagram of the hierarchical architecture of the method of the present invention after it is applied to the corresponding system; Figure 3 This is a schematic diagram illustrating the preferred process when selecting multiple layout strategies in the method of the present invention. Figure 4 This is a timing diagram illustrating the implementation of user interaction and dynamic updates in the method of the present invention. Detailed Implementation

[0019] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. The components of the embodiments of the present invention described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.

[0020] Therefore, the following detailed description of the embodiments of the invention provided in the accompanying drawings is not intended to limit the scope of the claimed invention, but merely to illustrate selected embodiments of the invention. All other embodiments obtained by those skilled in the art based on the embodiments of the invention without inventive effort are within the scope of protection of the invention.

[0021] A method for dynamically drawing and laying out visual network topology diagrams based on Antv / X6. Figure 1 This document provides a brief overview of the overall process of the method, which can be viewed concurrently. The key steps of the method can be summarized as follows: S1. Construct a standardized data model decoupled from the rendering layer to describe the network topology; this standardized data model includes node objects, edge objects, and topology objects. S2. Initialize a canvas instance based on the Antv / X6 graphics engine, register custom nodes and connections, and instantiate a standardized data model into a graphics object and add it to the canvas through a mapping function; S3. By selecting and applying various layout strategies, the corresponding layout algorithm is executed to calculate node coordinates and trigger animation transitions, generating a user-operable visual network topology map. S4. Based on the interactive control system, by extending the event mechanism of the Antv / X6 graphics engine, it provides multi-dimensional dynamic interaction support between users and the visualized network topology map; S5 manages and monitors data changes in the standardized data model in real time. When data changes occur, it only updates the changed parts and triggers the re-rendering or re-layout of the corresponding visualized network topology.

[0022] The above method and process can be applied to the corresponding computer system to achieve the relevant functions. Figure 2 This corresponds to the hierarchical architecture of the system, including data sources, data processing, and visualization, which aligns with the workflow execution in the method. This implementation will subsequently detail the steps and optimal choices within the method; these can be referenced when applying them to a system. Figure 2 To understand.

[0023] In step S1, to achieve a clear description of the network topology and effectively separate it from the graphics rendering layer, this implementation first constructs a standardized data model. This model can be defined and organized using the common JSON format, serving as the basic data structure for the entire method; the core of the model defines three object types to collectively constitute a complete abstract expression of the network topology.

[0024] Node objects are the basic units in the model that describe network devices. Each node object contains a unique ID, an easily identifiable name, and a basic type that identifies its functional role, such as a router, switch, or server. In addition, node objects record their operational status type, metadata attributes describing their own characteristics, and various business attributes added according to specific application scenarios, including their department, physical location, or business group information. These attributes together constitute a complete description of the node at the business logic level.

[0025] Edge objects are used to depict the connections between nodes. Each edge object explicitly specifies the start and end points of the connection, namely the source node ID and the target node ID. It contains basic attributes describing the characteristics of the connection itself, such as the width of the edge when visualized, the type of solid or dashed line, the route path (straight or polyline), color, arrow style, and possible dynamic animation effects. At the same time, edge objects also carry attributes characterizing the link's properties, such as network performance metrics like bandwidth, latency, and utilization.

[0026] The topology object is the highest-level structure in the entire model, aggregating scattered node and edge objects. Essentially, it is a unified whole composed of the set of all node objects and the set of all edge objects. This topology object represents a complete snapshot of the network structure at a specific moment and is the core data foundation upon which the entire visualized network topology graph application operates.

[0027] By defining a standardized data model with a clear structure and complete attributes, this implementation ensures that topology data can be stored, processed, and exchanged independently of specific graphics rendering engines. This decoupling design provides reliable data support for subsequent dynamic rendering, flexible layout, and efficient updates.

[0028] In step S2, after constructing the standardized data model, this implementation uses the Antv / X6 graphics engine to transform the abstract data into a visualized topological graph. First, an X6 canvas instance is created and configured in a front-end framework environment such as Vue or React. The basic properties of this canvas instance, such as the overall size, background color, display of auxiliary grids, scaling range, and translation operation boundaries, all need to be set in detail at this time to establish the foundation for the subsequent display and interaction of the graph.

[0029] The key to this step lies in constructing graphical entities capable of carrying data and achieving advanced interactive effects. Therefore, custom designs are required for various network device nodes and connections. The design process utilizes SVG vector graphics, HTML templates, or directly leverages the component capabilities of the Vue / React framework to register custom nodes and connections that meet the requirements. In this implementation, distinctive SVG graphical appearances can be designed for different types of network devices, even upgrading from traditional 2D icons to more three-dimensional 2.5D visual effects. Simultaneously, the style of edge objects, including their width, line type, color, arrow shape, and dynamic effects, is also customized at this stage according to business rules. These custom graphics can respond to data changes, such as dynamically updating their color or icon style based on node status.

[0030] Furthermore, as a preferred embodiment, a configurable attribute panel is also designed for the nodes. This panel not only allows users to configure the basic visual attributes of the nodes, such as size, fill color, and label text style, but also provides configuration interfaces for the node's business attributes, tailored to specific business scenarios. Users can view or edit business information related to the nodes through this panel, such as device model, asset details, configuration parameters, department, real-time operating status, and relationships with other objects.

[0031] By writing specific mapping functions, topological objects in the standardized data model are instantiated into graphical objects recognizable by the X6 engine. This conversion process can be achieved by calling the canvas instance's `fromJSON()` method to load the entire topology structure in batches, or by adding graphical elements one by one by adding nodes and edges. After instantiation, these graphical entities representing network nodes and connections are formally added to the initialized canvas instance, and after layout, a visual and operable network topology diagram is formed that is finally visible to the user.

[0032] In step S3, the process for selecting the layout strategy can be found here. Figure 3 As illustrated, this implementation uses a layout manager to efficiently organize and present the network topology diagram. The layout manager has the ability to parse the inherent characteristics of the standardized data model, and automatically selects the most suitable layout strategy based on this. Simultaneously, it also supports users manually specifying layout strategies according to actual needs or preferences. After selecting and executing a layout strategy, the system evaluates the generated layout effect and dynamically adjusts the selection or application of subsequent strategies based on the evaluation results, ensuring the clarity and readability of the final visualization result.

[0033] As a preferred embodiment, the layout strategies include force-guided layout, grid layout, hierarchical layout, and composite layout. In automatic mode, the layout manager matches strategies based on the specific characteristics of the topology data. When the connectivity between network nodes is exceptionally complex, exceeding a preset quantization threshold, the system tends to select force-guided layout. This layout simulates the interaction forces between physical particles, automatically finding and forming a stable and uniformly distributed layout in the mesh topology by adjusting key parameters such as repulsive and attractive forces between nodes and the central force pointing towards the center of the canvas. If the device nodes in the data model exhibit obvious regular row and column arrangements, grid layout will be automatically enabled. This strategy automatically aligns nodes to a preset grid, creating a uniform visual effect. When there are clear directional and hierarchical relationships between devices, such as master-slave relationships, data flow directions, or local structures, hierarchical layout becomes the preferred choice. This layout is suitable for directed acyclic graph structures, systematically arranging nodes on multiple horizontal or vertical levels, clearly showing the dependencies and hierarchical affiliations between nodes.

[0034] For more complex hybrid topology features, the system will enable a composite layout strategy. This strategy first groups the nodes in the standardized data model according to their type or other logical rules. Then, different layout strategies can be applied within and between different groups. For example, a grid layout can be used within a group to maintain order, and a force-guided layout can be used between groups to show the connection relationship, thus achieving multi-level and multi-style layout effect integration.

[0035] The evaluation of the layout effect is crucial for dynamic adjustment. If the evaluation finds excessive node overlap, severe connection intersections, or an unsatisfactory overall visual effect, the system will attempt to activate backup strategies. For example, if the initially selected layout is unsatisfactory, the system may automatically try another strategy more suitable for the current topology characteristics, or ultimately use the relatively robust force-guided layout as the default strategy for final presentation, ensuring that a user-understandable and easy-to-operate visual network topology map is generated as much as possible under any circumstances.

[0036] In step S4, to enhance the user experience, this implementation extends the event mechanism of the Antv / X6 graphics engine, constructing a multi-dimensional interactive control system. Users can freely drag nodes on the canvas to adjust their positions. The system utilizes the engine's built-in alignment function to assist in precise node positioning, enabling flexible layout arrangement. Regarding the presentation of connecting lines, orthogonal routers are applied to ensure that lines automatically bypass nodes to avoid overlap. Simultaneously, smooth connectors optimize the path shape of the connecting lines, and combined with an optimized polyline turning point algorithm, the connecting lines are displayed more smoothly and naturally.

[0037] In this implementation, user actions are responded to by listening to various interactive events of nodes and connections. The method utilizes the engine's `on` method to capture and process various events such as single-click selection, double-click triggering, dragging movement, and mouse hovering in / out. When a user right-clicks on a node, connection, or blank area of ​​the canvas, a corresponding context menu is triggered. This customizable menu provides rich operation options, allowing users to directly edit the basic visual style of nodes or connections, or configure their attribute information according to business needs, such as device details, asset status, and relationships. It can also be used solely to view detailed information about related objects.

[0038] To improve operational efficiency, this implementation also integrates keyboard shortcuts. Through the X6 plugin extension, users can execute frequently used commands using preset shortcuts, such as copying, pasting, saving the current view, deleting selected objects, selecting all graphic elements, undoing the previous operation, and resetting the view state. Furthermore, the interaction incorporates a dynamic visual feedback mechanism; when the mouse hovers over a node or connection, the interface automatically highlights the associated nodes and paths, clearly demonstrating the connection relationships; when a node's state changes, dynamic animation effects such as a breathing light can be triggered, intuitively conveying the state change information to the user. These interactive functions together constitute an efficient and intuitive way for users to interact with the visualized network topology map.

[0039] In step S5, to ensure that the visualized network topology map can reflect network status changes in real time, this implementation uses a front-end status management library to centrally manage and monitor the standardized data model. Since this data model is the core data source for the entire method application, its status changes need to be continuously tracked; this can be viewed concurrently here. Figure 4 The illustration helps to understand the overall sequence of processes such as state changes and user interactions.

[0040] When network status or specific data changes, such as when an alarm message is received via WebSocket or when a user edits the attribute information of a node in real time, the relevant attribute values ​​of the corresponding node or connection in the state management library are updated; this update mechanism can avoid unnecessary global refreshes.

[0041] Leveraging the reactive mechanism of the state management library, this implementation can automatically trigger a re-rendering process for affected graphical objects. When an attribute change in the data model is detected, the system intelligently updates only the associated graphical elements on the canvas. For example, when a device node's state changes to faulty, its corresponding graphical object color will immediately update to a preset warning red. This partial update method effectively improves rendering efficiency and ensures a smooth user interface.

[0042] For scenarios involving large-scale changes to the network structure, such as adding or deleting entire subnets or significantly reorganizing node connections, if the magnitude of the change exceeds a preset threshold after quantification, the system will not only update the graphical style but also re-trigger the layout strategy selection and calculation process. Based on the updated topology data characteristics, the system will re-evaluate and potentially dynamically adjust the layout strategy, execute a new layout algorithm to calculate node positions, and ultimately achieve adaptive dynamic updating and rearrangement of the entire topology map, ensuring that the visualization results always clearly and accurately reflect the current network structure.

[0043] As a preferred embodiment of this implementation, such as Figure 1 As shown, the method further includes: S6, performing data synchronization and performance optimization. The main purpose of this step is to improve the method's response efficiency and user experience during execution. When new topology data is received, such as real-time updates pushed via WebSocket, the new data is compared with the currently maintained standardized data model in a refined manner; through difference identification, newly added nodes and connections, elements that need to be deleted, and existing objects with changed attributes are identified. Based on this difference result, only the identified changed parts are incrementally updated, avoiding unnecessary global re-rendering of the entire canvas, significantly improving processing efficiency and performance.

[0044] At the visualization update level, this implementation fully utilizes the batch operation interface provided by the Antv / X6 graphics engine. Based on the difference comparison results, batch methods such as adding nodes, removing nodes, and updating node attributes are invoked to perform view update operations. To make data changes more intuitively understandable to users, corresponding transition animation effects, such as fade-in / fade-out or scaling transformations, can be provided for element addition and removal operations. For attribute update operations, such as changes in node state, color gradient and other animation effects are used to provide visual cues, conveying the intent and content of the data changes to the user.

[0045] For large-scale network topology graphs containing numerous nodes and connections, this implementation also integrates a Scroller plugin to provide a smooth canvas panning and zooming experience. When the size of the entire topology graph exceeds a preset reasonable threshold, a view optimization strategy can be automatically implemented; specifically, the range of the user's current visible area, i.e., the viewport, can be determined, and only graphic elements within that viewport area can be intelligently rendered. This on-demand rendering mechanism effectively reduces the browser's rendering burden, ensuring that users still receive a smooth operating response and browsing experience when displaying ultra-large-scale network structures.

Claims

1. A dynamic drawing and layout method of an Antv / X6-based visual network topology graph, characterized in that, Comprise the following steps: S1, construct a standardized data model decoupled from the rendering layer, for describing network topology; the standardized data model comprises node objects, edge objects and topology objects; S2, initialize the canvas instance based on Antv / X6 graphics engine, register custom nodes and lines, and instantiate the standardized data model into graphical objects and add them to the canvas through mapping functions; S3, through the selection and application of multiple layout strategies, execute the corresponding layout algorithm to calculate the node coordinates and trigger the animation transition, generate a user-operable visual network topology graph; S4, based on the interactive control system, by extending the event mechanism of Antv / X6 graphics engine, provide multi-dimensional dynamic interaction function support between users and visual network topology graph; S5, manage and monitor the data changes of the standardized data model in real time, when data changes occur, only update the changed part, and trigger the re-rendering or re-layout of the corresponding visual network topology graph.

2. The method for dynamic drawing and layout of visualized network topology map according to claim 1, characterized in that, In step S1, the format of the standardized data model adopts JSON format, wherein: the node object contains the unique ID, name, basic type, state type, metadata attribute and specific business attribute of each node in the network; the edge object contains the source node ID, target node ID, basic attribute and link attribute of each edge in the network; the topology object is formed by forming a corresponding set of all node objects and edge objects, which is the application basis of the standardized data model.

3. The method of claim 1, wherein: In step S2, initialize the canvas instance of Antv / X6 graphics engine in Vue or React framework, configure the basic properties of the canvas instance; when registering custom nodes and lines, based on SVG or HTML template, customize the graphical appearance of various network device nodes and edge object styles in the initialized node of Vue or React framework, and design different SVG graphics for different network devices; after completing the design and registration, execute the mapping process, instantiate the standardized data model and add it to the canvas.

4. The method of claim 1, wherein: In step S3, the layout manager automatically parses the data characteristics in the standardized data model, and selects the corresponding layout strategy based on the data characteristics; or manually select the corresponding layout strategy by controlling the layout manager; after the layout strategy is executed, evaluate the layout effect, and dynamically adjust the selection and application of related layout strategies according to the evaluation result.

5. The method of visualizing a dynamically drawn and laid out network topology map of claim 4, wherein: The layout strategy includes force-directed layout, grid layout and hierarchical layout; when automatically selecting force-directed layout, the corresponding data characteristics are that the connection degree of network nodes reaches a preset threshold, representing complex relationship between nodes; when automatically selecting grid layout, the corresponding data characteristics are that each device presents a regular row-column arrangement; when automatically selecting hierarchical layout, the corresponding data characteristics are that there is a clear directionality and hierarchical association between devices.

6. The method of visualizing a dynamically drawn and laid out network topology map of claim 5, wherein: When force-directed layout is applied in mesh topology, repulsion and attraction between nodes are used to automatically form stable layout; the formed visual network topology graph is optimized by the force-directed parameters built in Antv / X6 graphics engine, including stiffness, repulsion and central force; The grid layout automatically aligns each node in the instantiated standardized data model to the corresponding grid; The hierarchical layout is applied in the directed acyclic graph topology, and each node is arranged on multiple levels and presents the node relationship including master and backup, flow direction and locality.

7. The method of claim 5, wherein: The layout strategy also includes a composite layout; when the composite layout is automatically selected, the corresponding data feature is a mixed topology feature; when the composite layout is applied, each node in the standardized data model is grouped according to the type, and different layout strategies are used within and between groups.

8. The method for dynamic drawing and layout of visualized network topology map according to claim 1, characterized in that: In step S4, the multi-dimensional dynamic interaction function under the interaction control system includes: node dragging and alignment, connection optimization, interaction event listening, context menu, shortcut key operation, dynamic highlighting and animation rendering.

9. The method for dynamic drawing and layout of visualized network topology map according to claim 1, characterized in that: In step S5, the front-end state management library is used to manage and monitor the standardized data model in real time, and when the data changes, the standardized data model instantiation process in step S2 is automatically triggered to realize the re-addition and rendering of related graphic objects in the canvas; when the data change amplitude exceeds the preset amplitude threshold, the layout strategy selection process in step S3 is re-triggered to dynamically update the layout strategy.

10. The method for dynamic drawing and layout of visualized network topology map according to claim 1, characterized in that, The method further comprises: S6, performing data synchronization and performance optimization, specifically: When the data changes occur, the newly received standardized data model is compared with the current standardized data model, the changed objects are identified and updated incrementally; Based on the difference comparison result, the batch API of the Antv / X6 graphic engine is called to update the visual network topology graph, and the change intention is presented to the user through the animation when the visual network topology graph is updated; In the Antv / X6 graphic engine, the Scroller plug-in is integrated to provide translation and scaling function support for the canvas of the visual network topology graph; when the canvas size exceeds the preset size threshold, the viewport of the current canvas is determined, and only the elements in the viewport are rendered.

Images