System deployment diagram dynamic drawing method and device, electronic equipment and storage medium

Abstract

The invention discloses a system deployment graph dynamic drawing method and device, electronic equipment and a storage medium, and the method comprises the steps: obtaining system architecture data of a target system, generating target JSON data according to the system architecture data, the target JSON data comprising node data and corresponding node attributes and edge data and corresponding edge attributes; the method comprises the following steps: creating an HTML (Hypertext Markup Language) page, introducing a JavaScript file of a preset visual library into the HTML page, and further loading target JSON data through the JavaScript file to obtain an initial network diagram; adding a click event and a corresponding interaction mode box for the initial network diagram through a visual library to obtain an interaction network diagram; and generating a corresponding animation effect according to the service flow of the interactive network diagram, and further rendering and displaying the animation effect on the interactive network diagram to obtain a system deployment diagram. The system management efficiency and accuracy are improved, and the method can be widely applied to the technical field of information.

Description

Technical Field

[0001] The present invention relates to the field of information technology, and in particular to a method, device, electronic equipment and storage medium for dynamically drawing a system deployment diagram. Background Art

[0002] After the system is put on the cloud, the number of hosts, components, and services is large and scattered. Each component may be deployed in different physical nodes or containers. There may be complex dependencies between these components. The failure of one component may affect the normal operation of multiple other components, which brings huge challenges to the operation and maintenance work of operation and maintenance personnel. Maintenance personnel need to have high technical capabilities and in-depth understanding of the system to accurately locate problems and quickly replace and upgrade services. Traditional system deployment diagrams are mostly drawn manually and are often static. They cannot reflect the operating status and changes of the system in real time, affecting the real-time and reliability of the system deployment diagram, thereby affecting the efficiency and accuracy of system management.

[0003] Terminology explanation:

[0004] vis-network: Visualization Network, a dynamic, browser-based visualization library. This library is mainly used to display network diagrams composed of nodes and edges, and supports custom shapes, styles, colors, sizes, images, and other functions. It also has built-in cluster support and uses HTML Canvas for rendering, ensuring smooth animation effects and good interactive experience on the browser.

[0005] System deployment diagram: A graphical representation of the system's internal components, services, network structure, and the interactions between them. Summary of the invention

[0006] The purpose of the present invention is to solve one of the technical problems existing in the prior art to at least a certain extent.

[0007] To this end, an object of an embodiment of the present invention is to provide a method for dynamically drawing a system deployment diagram, which improves the real-time performance and reliability of the system deployment diagram and also improves the efficiency and accuracy of system management.

[0008] Another object of an embodiment of the present invention is to provide a device for dynamically drawing a system deployment diagram.

[0009] In order to achieve the above technical objectives, the technical solutions adopted by the embodiments of the present invention include:

[0010] On the one hand, an embodiment of the present invention provides a method for dynamically drawing a system deployment diagram, comprising the following steps:

[0011] Obtaining system architecture data of a target system, and generating target JSON data according to the system architecture data, wherein the target JSON data includes node data and corresponding node attributes and edge data and corresponding edge attributes;

[0012] Create an HTML page, introduce a JavaScript file of a preset visualization library into the HTML page, and then load the target JSON data through the JavaScript file to obtain an initial network diagram;

[0013] Adding a click event and a corresponding interactive modal box to the initial network diagram through the visualization library to obtain an interactive network diagram;

[0014] A corresponding animation effect is generated according to the business flow of the interactive network diagram, and then the animation effect is rendered and displayed on the interactive network diagram to obtain a system deployment diagram.

[0015] Further, in one embodiment of the present invention, the step of obtaining the system architecture data of the target system and generating the target JSON data according to the system architecture data specifically includes:

[0016] Acquire the system architecture data from a system database through a PHP backend, and determine the node data, the node attributes, the edge data, and the edge attributes according to the system architecture data;

[0017] Encapsulating the node data and the node attributes into a first array, and encapsulating the edge data and the edge attributes into a second array;

[0018] The target JSON data is obtained according to the combination of the first array and the second array.

[0019] Further, in an embodiment of the present invention, determining the node data, the node attributes, the edge data and the edge attributes according to the system architecture data specifically includes:

[0020] Determine a plurality of system components and connection relationships between the system components according to the system architecture data;

[0021] Determine the node data and the node attributes according to the component configuration information of the system component;

[0022] The edge data and the edge attributes are determined according to the connection configuration information corresponding to the connection relationship.

[0023] Further, in one embodiment of the present invention, the JavaScript file of the preset visualization library is introduced into the HTML page, and then the target JSON data is loaded through the JavaScript file to obtain the initial network diagram, which specifically includes:

[0024] Load the VIS.js visualization library on the HTML page;

[0025] Create the JavaScript file, where the JavaScript file is configured to obtain the target JSON data and assign it to nodes and edges;

[0026] The JavaScript file is executed through the VIS.js visualization library to obtain the initial network diagram.

[0027] Further, in one embodiment of the present invention, adding a click event and a corresponding interactive modal box to the initial network diagram through the visualization library specifically includes:

[0028] Obtaining node information of each network node of the initial network graph;

[0029] Generate the interactive modal box corresponding to each of the network nodes through the VIS.js visualization library, and assign the node information to the interactive modal box;

[0030] The click event is added to each of the network nodes through the VIS.js visualization library, and the click event is configured to display the interactive modal box and the node information when the network node triggers a click.

[0031] Further, in one embodiment of the present invention, generating a corresponding animation effect according to the business flow of the interactive network diagram, and then rendering and displaying the animation effect on the interactive network diagram, specifically includes:

[0032] Acquire system operation data of the target system, and generate the business flow according to the system operation data;

[0033] Add the animateme animation class in the PATH of the SVG, and generate the animation effect according to the business flow;

[0034] The animateme animation class is introduced into the HTML page, and the animation effect is rendered and displayed on the interactive network diagram through the animateme animation class.

[0035] Furthermore, in one embodiment of the present invention, the system deployment diagram dynamic drawing method further includes the following steps:

[0036] Obtain system state change information of the target system, and adjust nodes and edges of the system deployment diagram according to the system state change information.

[0037] On the other hand, an embodiment of the present invention provides a system deployment diagram dynamic drawing device, including:

[0038] A data generation module, used to obtain system architecture data of a target system, and generate target JSON data according to the system architecture data, wherein the target JSON data includes node data and corresponding node attributes and edge data and corresponding edge attributes;

[0039] A data loading module is used to create an HTML page, introduce a JavaScript file of a preset visualization library into the HTML page, and then load the target JSON data through the JavaScript file to obtain an initial network diagram;

[0040] An interactive setting module, used to add a click event and a corresponding interactive modal box to the initial network diagram through the visualization library to obtain an interactive network diagram;

[0041] The animation setting module is used to generate corresponding animation effects according to the business flow of the interactive network diagram, and then render and display the animation effects on the interactive network diagram to obtain a system deployment diagram.

[0042] On the other hand, an embodiment of the present invention provides an electronic device, comprising a memory, a processor, a program stored in the memory and executable on the processor, and a data bus for realizing connection and communication between the processor and the memory, wherein the program, when executed by the processor, realizes the method for dynamically drawing a system deployment diagram as described above.

[0043] On the other hand, an embodiment of the present invention further provides a storage medium, which is a computer-readable storage medium used for computer-readable storage, and the storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the system deployment diagram dynamic drawing method as described above.

[0044] The advantages and beneficial effects of the present invention will be partly given in the following description, partly become apparent from the following description, or be understood through the practice of the present invention:

[0045] The embodiment of the present invention obtains the system architecture data of the target system, generates the target JSON data according to the system architecture data, the target JSON data includes the node data and the corresponding node attributes and the edge data and the corresponding edge attributes, creates an HTML page, introduces the JavaScript file of the preset visualization library in the HTML page, and then loads the target JSON data through the JavaScript file to obtain the initial network diagram, adds click events and corresponding interactive modal boxes to the initial network diagram through the visualization library to obtain the interactive network diagram, generates corresponding animation effects according to the business flow of the interactive network diagram, and then renders and displays the animation effects on the interactive network diagram to obtain the system deployment diagram. The embodiment of the present invention calls the visualization library to draw the initial network diagram, displays the node deployment content by configuring the click event and the interactive modal box, and displays the real-time business flow between the nodes through the animation effect, which can reflect the actual operation status and architecture changes of the system in real time and accurately, facilitates the maintenance personnel to quickly locate the problem and perform troubleshooting, improves the real-time and reliability of the system deployment diagram, and also improves the efficiency and accuracy of system management. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] In order to more clearly illustrate the technical solution in the embodiments of the present invention, the following introduction is made to the drawings required for use in the embodiments of the present invention. It should be understood that the drawings introduced below are only for the convenience of clearly describing some embodiments of the technical solution of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative work.

[0047] Figure 1 A flowchart of a method for dynamically drawing a system deployment diagram provided by an embodiment of the present invention;

[0048] Figure 2 A step flow chart of step S101 provided in an embodiment of the present invention;

[0049] Figure 3 A step flow chart of step S1011 provided in an embodiment of the present invention;

[0050] Figure 4 A step flow chart of step S102 provided in an embodiment of the present invention;

[0051] Figure 5 A step flow chart of step S103 provided in an embodiment of the present invention;

[0052] Figure 6 A step flow chart of step S104 provided in an embodiment of the present invention;

[0053] Figure 7Another step flow chart of the method for dynamically drawing a system deployment diagram provided by an embodiment of the present invention;

[0054] Figure 8 A schematic diagram of the structure of a system deployment diagram dynamic drawing device provided by an embodiment of the present invention;

[0055] Fig. 9 A schematic diagram of the hardware structure of an electronic device provided by an embodiment of the present invention;

[0056] Fig.10 A schematic diagram of the structure of a storage medium provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0057] Embodiments of the present invention are described in detail below, and examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are only used to explain the present application, and cannot be understood as limitations on the present application. It should be noted that, although the functional module division is performed in the system schematic diagram and the logical order is shown in the flow chart, in some cases, the steps shown or described may be performed in a different order from the module division in the system schematic diagram or the flow chart. For the step numbers in the following embodiments, they are only set for the convenience of explanation, and the order between the steps is not limited in any way. The execution order of each step in the embodiment can be adaptively adjusted according to the understanding of those skilled in the art.

[0058] In the description of the present invention, the meaning of "a plurality" is two or more. If there is a description of the first or the second, it is only for the purpose of distinguishing the technical features, and it cannot be understood as indicating or implying the relative importance or implicitly indicating the number of the indicated technical features or implicitly indicating the order of the indicated technical features. In addition, unless otherwise defined, all technical and scientific terms used in this document have the same meaning as those commonly understood by technicians in the technical field of this application. The terms used in this document are only for the purpose of describing the embodiments of the present application and are not intended to limit the present application.

[0059] The method for dynamically drawing a system deployment diagram provided in the embodiment of the present application can be applied to a terminal, can be applied to a server side, and can also be software running in a terminal or a server side. In some embodiments, the terminal can be a smart phone, a tablet computer, a laptop computer, a desktop computer, a set-top box, etc.; the server side can be configured as an independent physical server, or a server cluster or a distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms; the software can be an application that implements the method for dynamically drawing a system deployment diagram, etc., but is not limited to the above forms.

[0060] The present application can be used in many general or special computer system environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronic devices, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, etc. The present application can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present application can also be practiced in distributed computing environments, in which tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media including storage devices.

[0061] It should be noted that in each specific implementation of the present application, when it comes to the need to perform relevant processing based on data related to user identity or characteristics such as user information, user behavior data, user historical data, and user location information, the user's permission or consent will be obtained first, and the collection, use, and processing of these data will comply with the relevant laws, regulations, and standards of the relevant countries and regions. In addition, when the embodiment of the present application needs to obtain the user's sensitive personal information, the user's separate permission or consent will be obtained through a pop-up window or by jumping to a confirmation page. After clearly obtaining the user's separate permission or consent, the necessary user-related data for the normal operation of the embodiment of the present application will be obtained.

[0062] The purpose of the present invention is to provide a method for dynamically drawing a system deployment diagram, aiming to achieve real-time updating and dynamic display of the system deployment diagram, to help users more intuitively understand the operating status of the system and the interaction between components, and to display the flow of business flows between systems in an animated manner from a business perspective.

[0063] like Figure 1 FIG. 1 is a flowchart of a method for dynamically drawing a system deployment diagram according to an embodiment of the present invention. Figure 1 The embodiment of the present invention provides a method for dynamically drawing a system deployment diagram, which specifically includes the following steps:

[0064] S101. Obtain system architecture data of a target system, and generate target JSON data according to the system architecture data. The target JSON data includes node data and corresponding node attributes as well as edge data and corresponding edge attributes.

[0065] Specifically, the system deployment architecture diagram is usually represented in the form of a topology diagram, in which nodes and edges define the deployment structure of the system. Data is obtained from the database through PHP and converted into a JSON format that can be understood by JS.

[0066] like Figure 2 FIG. 1 is a flowchart of step S101 provided in an embodiment of the present invention, referring to FIG. Figure 2 As an optional implementation, the system architecture data of the target system is obtained, and the target JSON data is generated according to the system architecture data, which specifically includes:

[0067] S1011. Obtain system architecture data from a system database through a PHP backend, and determine node data, node attributes, edge data, and edge attributes according to the system architecture data;

[0068] S1012, encapsulating node data and node attributes into a first array, and encapsulating edge data and edge data into a second array;

[0069] S1013. Obtain target JSON data according to the combination of the first array and the second array.

[0070] Specifically, a PHP script or API endpoint is created on the PHP backend, which receives requests and returns the node and edge data required for the network graph, as well as various parameter data that define the nodes and edges. The data is usually returned in JSON format so that it can be easily parsed and used by JavaScript.

[0071] A query is executed through a PHP script to obtain node data, and the query result is converted into a PHP array, so as to extract node data and node attributes from MySQL data and encapsulate them into a first array; a query is executed through a PHP script to obtain edge data, and the query result is converted into a PHP array, so as to extract edge data and edge attributes from MySQL data and encapsulate them into a second array; the first array and the second array are combined into an object and converted into JSON format, the response header is set to JSON, and the target JSON data is output.

[0072] like Figure 3 FIG. 1 is a flow chart of step S1011 provided in an embodiment of the present invention, referring to FIG. Figure 3 As an optional implementation, node data, node attributes, edge data and edge attributes are determined according to the system architecture data, which specifically include:

[0073] S10111. Determine multiple system components and connection relationships between the system components according to the system architecture data;

[0074] S10112. Determine node data and node attributes according to component configuration information of the system component;

[0075] S10113. Determine edge data and edge attributes according to connection configuration information corresponding to the connection relationship.

[0076] Specifically, the system components in the system architecture data are taken as nodes, and the connection relationships between the system components are taken as edges, so as to obtain node data, node attributes, edge data and edge attributes.

[0077] S102, creating an HTML page, introducing a JavaScript file of a preset visualization library into the HTML page, and then loading target JSON data through the JavaScript file to obtain an initial network diagram.

[0078] Specifically, VIS.js is a powerful JavaScript library for creating dynamic and interactive data visualization. The embodiment of the present invention selects vis-network.min.js as the visualization library and selects vis-network.min.css to render the system deployment diagram.

[0079] like Figure 4 FIG. 1 is a flow chart of step S102 provided in an embodiment of the present invention, referring to FIG. Figure 4 As an optional implementation, a JavaScript file of a preset visualization library is introduced into the HTML page, and then the target JSON data is loaded through the JavaScript file to obtain an initial network diagram, which specifically includes:

[0080] S1021. Load the VIS.js visualization library in the HTML page;

[0081] S1022, creating a JavaScript file, where the JavaScript file is configured to obtain target JSON data and assign it to nodes and edges;

[0082] S1023. Execute the JavaScript file through the VIS.js visualization library to obtain an initial network diagram.

[0083] Specifically, create an HTML page on the front-end interface, which will contain the visualization information of the network diagram. In the HTML page, introduce the JavaScript file of VIS.js or other selected visualization library, use JavaScript to write code to load the data provided by the PHP backend, and use this data to create the initial network diagram in the VIS.js library.

[0084] S103. Add click events and corresponding interactive modal boxes to the initial network diagram through the visualization library to obtain an interactive network diagram.

[0085] Specifically, use VIS.js events to add interactivity to the network diagram. For example, when you click a node, you can display information related to the node or perform other operations. You can also add zooming, dragging, and other commonly used interactive functions.

[0086] like Figure 5 FIG. 1 is a flow chart of step S103 provided in an embodiment of the present invention, referring to FIG. Figure 5 As an optional implementation, a click event and a corresponding interactive modal box are added to the initial network diagram through a visualization library, which specifically includes:

[0087] S1031, obtaining node information of each network node of the initial network diagram;

[0088] S1032. Generate an interactive modal box corresponding to each network node through the VIS.js visualization library, and assign the node information to the interactive modal box;

[0089] S1033. Add a click event to each network node through the VIS.js visualization library. The click event is configured to display an interactive modal box and display node information when a network node triggers a click.

[0090] Specifically, get the node click event and assign the node information to the modal box: click the node, display the modal box, and display the clicked content; call the function to set the modal box content; when the user clicks the button, open the modal box and set the content; when the close button or other area is clicked, close the modal box. Add click events to each network node through the VIS.js visualization library. The click event is configured to display the interactive modal box and display the node information when the network node triggers a click. Display the modal box content in the HTML page.

[0091] S104: Generate corresponding animation effects according to the business flow of the interactive network diagram, and then render and display the animation effects on the interactive network diagram to obtain a system deployment diagram.

[0092] like Figure 6 FIG. 1 is a flow chart of step S104 provided in an embodiment of the present invention, referring to FIG. Figure 6 As an optional implementation, a corresponding animation effect is generated according to the business flow of the interactive network diagram, and then the animation effect is rendered and displayed on the interactive network diagram, which specifically includes:

[0093] S1041. Obtain system operation data of the target system, and generate a business flow according to the system operation data;

[0094] S1042. Add the animateme animation class in the PATH of SVG and generate animation effects according to the business flow;

[0095] S1043. Introduce the animateme animation class in the HTML page, and use the animateme animation class to render and display the animation effect on the interactive network diagram.

[0096] Specifically, the embodiment of the present invention writes animateme animation CSS to implement business flow; references the animation class and implements the animation effect through the Path of SVG.

[0097] like Figure 7 FIG. 1 is another flow chart of the steps of the method for dynamically drawing a system deployment diagram according to an embodiment of the present invention. Figure 7 As an optional implementation, the method for dynamically drawing a system deployment diagram further includes the following steps:

[0098] S105: Obtain system state change information of the target system, and adjust nodes and edges of the system deployment diagram according to the system state change information.

[0099] Specifically, the position, size, color and other properties of nodes and edges can be automatically adjusted according to the system's operating status and changes to better display the system's structure and functions. At the same time, the layout and style of the system deployment diagram can be automatically optimized and adjusted according to the user's behavior and habits to improve the user experience and usage efficiency.

[0100] The above describes the method flow and implementation process of the embodiment of the present invention. It can be understood that the embodiment of the present invention does not follow the conventional manual drawing of the system architecture diagram to display the deployment of each system, but actively explores the method of technological innovation with the idea of ​​digital transformation. By calling the VIS.JS library, the system deployment architecture diagram is drawn in real time and dynamically. Through the node click event, the node deployment content is displayed through the modal box, so that maintenance personnel can accurately locate when understanding the system deployment and handling system failures. At the same time, the business flow between each node is displayed through animation, so that maintenance personnel can better understand the business trends and the systems that the business needs to pass through. The embodiment of the present invention reflects the actual operating status and changes of the system in real time, improves the efficiency and accuracy of system management; through graphical display, it helps maintenance personnel to more intuitively understand the interactive relationship between the system architecture and components; provides interactive functions to facilitate users to quickly locate problems and troubleshoot.

[0101] It can be recognized that the embodiment of the present invention calls the visualization library to draw the initial network diagram, displays the node deployment content by configuring click events and interactive modal boxes, and displays the real-time business flow between nodes through animation effects. It can reflect the actual operating status and architectural changes of the system in real time and accurately, making it convenient for maintenance personnel to quickly locate problems and perform troubleshooting, thereby improving the real-time and reliability of the system deployment diagram, and also improving the efficiency and accuracy of system management.

[0102] Compared with the prior art, the embodiments of the present invention also have the following advantages:

[0103] 1) Real-time and dynamic: Traditional system deployment diagrams are often static and cannot reflect the system's operating status and changes in real time. The dynamic drawing method based on VIS-network can update and display the system deployment in real time, including the status of each component, connection relationship, etc. This real-time and dynamic nature enables system managers to respond to system changes more quickly and improve system stability and availability.

[0104] 2) Visualization and interactivity: VIS-network provides a wealth of visualization tools and interactive functions, making the system deployment diagram more intuitive and easy to understand. You can view and manage the system deployment diagram through simple operations such as zooming and clicking. At the same time, VIS-network also supports a variety of interactive methods, such as mouse hover prompts, node and edge click events, etc., so that users can have a deeper understanding of the system structure and function.

[0105] 3) Flexibility and scalability: The dynamic drawing method based on VIS-network is highly flexible and scalable. Users can customize the styles of nodes and edges, add or delete nodes and edges, set node properties and behaviors, etc. according to their needs. At the same time, VIS-network also supports a variety of data sources and data formats, such as CSV, JSON, etc., allowing users to import and export data more conveniently. This flexibility and scalability enables system deployment diagrams to better adapt to different scenarios and needs.

[0106] 4) Intelligence and adaptability: It can automatically adjust the position, size, color and other properties of nodes and edges according to the system's operating status and changes to better display the system's structure and functions. At the same time, it can also automatically optimize and adjust the layout and style of the system deployment diagram according to the user's behavior and habits to improve the user experience and usage efficiency.

[0107] 5) Intuitiveness: Displaying business flows through animation is an intuitive and attractive method that can help users quickly understand the operation mode and steps of complex business processes. Starting from the starting point, it is gradually unfolded in the order of business logic. The display of each step can be accompanied by corresponding text descriptions and graphic mark prompts to help users better understand. The introduction of animation can greatly enhance the user experience and the efficiency of information transmission.

[0108] like Figure 8 FIG. 1 is a schematic diagram showing a structure of a system deployment diagram dynamic drawing device provided by an embodiment of the present invention, referring to FIG. Figure 8 The embodiment of the present invention provides a system deployment diagram dynamic drawing device, including:

[0109] A data generation module is used to obtain system architecture data of a target system and generate target JSON data according to the system architecture data, wherein the target JSON data includes node data and corresponding node attributes as well as edge data and corresponding edge attributes;

[0110] The data loading module is used to create an HTML page, introduce the JavaScript file of the preset visualization library into the HTML page, and then load the target JSON data through the JavaScript file to obtain the initial network diagram;

[0111] The interactive setting module is used to add click events and corresponding interactive modal boxes to the initial network diagram through the visualization library to obtain an interactive network diagram;

[0112] The animation setting module is used to generate corresponding animation effects according to the business flow of the interactive network diagram, and then render and display the animation effects on the interactive network diagram to obtain a system deployment diagram.

[0113] The contents of the above method embodiments are all applicable to the present device embodiments. The functions specifically implemented by the present device embodiments are the same as those of the above method embodiments, and the beneficial effects achieved are also the same as those achieved by the above method embodiments.

[0114] The embodiment of the present invention further provides an electronic device, the electronic device comprising: a memory, a processor, a program stored in the memory and executable on the processor, and a data bus for realizing connection and communication between the processor and the memory, and the program is executed by the processor to realize the above-mentioned system deployment diagram dynamic drawing method. The electronic device can be any intelligent terminal including a tablet computer, a vehicle-mounted computer, etc.

[0115] like Fig. 9 FIG. 1 is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present invention, referring to FIG. Fig. 9 , an embodiment of the present invention provides an electronic device, including:

[0116] The processor 901 may be implemented by a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of the present invention;

[0117] The memory 902 can be implemented in the form of a read-only memory (ROM), a static storage device, a dynamic storage device, or a random access memory (RAM). The memory 902 can store an operating system and other application programs. When the technical solution provided in the embodiment of this specification is implemented by software or firmware, the relevant program code is stored in the memory 902, and the processor 901 calls and executes the system deployment diagram dynamic drawing method of the embodiment of the present invention;

[0118] Input / output interface 903, used to implement information input and output;

[0119] Communication interface 904, used to realize communication interaction between the device and other devices, which can be realized by wired mode (such as USB, network cable, etc.) or wireless mode (such as mobile network, WIFI, Bluetooth, etc.);

[0120] A bus 905 that transmits information between various components of the device (e.g., the processor 901, the memory 902, the input / output interface 903, and the communication interface 904);

[0121] The processor 901 , the memory 902 , the input / output interface 903 and the communication interface 904 are connected to each other in communication within the device via a bus 905 .

[0122] like Fig.10 FIG. 1 is a schematic diagram of a storage medium according to an embodiment of the present invention. Fig.10 The embodiment of the present invention further provides a storage medium, which is a computer-readable storage medium used for computer-readable storage. The storage medium stores one or more programs 1001, and the one or more programs 1001 can be executed by one or more processors to implement the above-mentioned system deployment diagram dynamic drawing method.

[0123] The memory, as a non-transient computer-readable storage medium, can be used to store non-transient software programs and non-transient computer executable programs. In addition, the memory may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some embodiments, the memory may optionally include a memory remotely disposed relative to the processor, and these remote memories may be connected to the processor via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0124] The embodiment of the present invention also discloses a computer program product or a computer program, wherein the computer program product or the computer program includes computer instructions, and the computer instructions are stored in a computer-readable storage medium. A processor of a computer device can read the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes Figure 1 The method shown.

[0125] In some selectable embodiments, the function / operation mentioned in the block diagram may not occur in the order mentioned in the operation diagram. For example, depending on the function / operation involved, the two boxes shown in succession can actually be executed substantially simultaneously or the above-mentioned boxes can sometimes be executed in reverse order. In addition, the embodiment presented and described in the flow chart of the present invention is provided by way of example, for the purpose of providing a more comprehensive understanding of technology. The disclosed method is not limited to the operation and logic flow presented herein. Selectable embodiments are expected, wherein the order of various operations is changed and the sub-operation of a part for which is described as a larger operation is performed independently.

[0126] In addition, although the present invention is described in the context of functional modules, it should be understood that, unless otherwise specified to the contrary, one or more of the above-mentioned functions and / or features can be integrated into a single physical device and / or software module, or one or more functions and / or features can be implemented in a separate physical device or software module. It is also understood that a detailed discussion of the actual implementation of each module is unnecessary for understanding the present invention. More specifically, in view of the properties, functions and internal relationships of the various functional modules in the device disclosed herein, the actual implementation of the module will be understood within the conventional skills of the engineer. Therefore, those skilled in the art can implement the present invention set forth in the claims without excessive experimentation using ordinary techniques. It is also understood that the specific concepts disclosed are merely illustrative and are not intended to limit the scope of the present invention, which is determined by the full scope of the appended claims and their equivalents.

[0127] If the above functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium, including several instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the above methods of each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program codes.

[0128] The logic and / or steps represented in the flowchart or otherwise described herein, for example, can be considered as an ordered list of executable instructions for implementing logical functions, and can be embodied in any computer-readable medium for use by an instruction execution system, device or apparatus (such as a computer-based system, a system including a processor, or other system that can fetch instructions from an instruction execution system, device or apparatus and execute instructions), or in conjunction with such instruction execution systems, devices or apparatuses. For the purposes of this specification, "computer-readable medium" can be any device that can contain, store, communicate, propagate or transmit a program for use by an instruction execution system, device or apparatus, or in conjunction with such instruction execution systems, devices or apparatuses.

[0129] More specific examples of computer-readable media (a non-exhaustive list) include the following: an electrical connection with one or more wires (electronic device), a portable computer disk case (magnetic device), a random access memory (RAM), a read-only memory (ROM), an erasable and editable read-only memory (EPROM or flash memory), an optical fiber device, and a portable compact disk read-only memory (CDROM). In addition, the computer-readable medium may even be a paper or other suitable medium on which the above-mentioned program is printed, since the above-mentioned program can be obtained electronically, for example, by optically scanning the paper or other medium, followed by editing, deciphering or processing in other suitable ways as necessary, and then stored in a computer memory.

[0130] It should be understood that the various parts of the present invention can be implemented by hardware, software, firmware or a combination thereof. In the above-mentioned embodiments, a plurality of steps or methods can be implemented by software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented by hardware, as in another embodiment, it can be implemented by any one of the following technologies known in the art or their combination: a discrete logic circuit having a logic gate circuit for implementing a logic function for a data signal, a dedicated integrated circuit having a suitable combination of logic gate circuits, a programmable gate array (PGA), a field programmable gate array (FPGA), etc.

[0131] In the above description of this specification, the description with reference to the terms "one embodiment / example", "another embodiment / example" or "certain embodiments / examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic representation of the above terms does not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner.

[0132] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the claims and their equivalents.

[0133] The above is a specific description of the preferred implementation of the present invention, but the present invention is not limited to the above embodiments. Those skilled in the art may make various equivalent modifications or substitutions without violating the spirit of the present invention. These equivalent modifications or substitutions are all included in the scope defined by the claims of this application.

Claims

1. A method for dynamically drawing a system deployment diagram, characterized in that: The following steps are involved: Obtaining system architecture data of a target system, and generating target JSON data according to the system architecture data, wherein the target JSON data includes node data and corresponding node attributes and edge data and corresponding edge attributes; Create an HTML page, introduce a JavaScript file of a preset visualization library into the HTML page, and then load the target JSON data through the JavaScript file to obtain an initial network diagram; Adding a click event and a corresponding interactive modal box to the initial network diagram through the visualization library to obtain an interactive network diagram; A corresponding animation effect is generated according to the business flow of the interactive network diagram, and then the animation effect is rendered and displayed on the interactive network diagram to obtain a system deployment diagram.

2. A method for dynamically drawing a system deployment diagram according to claim 1, characterized in that: The step of obtaining the system architecture data of the target system and generating the target JSON data according to the system architecture data specifically includes: Acquire the system architecture data from a system database through a PHP backend, and determine the node data, the node attributes, the edge data, and the edge attributes according to the system architecture data; Encapsulating the node data and the node attributes into a first array, and encapsulating the edge data and the edge attributes into a second array; The target JSON data is obtained according to the combination of the first array and the second array.

3. A method for dynamically drawing a system deployment diagram according to claim 2, characterized in that: The determining the node data, the node attributes, the edge data and the edge attributes according to the system architecture data specifically includes: Determine a plurality of system components and connection relationships between the system components according to the system architecture data; Determine the node data and the node attributes according to the component configuration information of the system component; The edge data and the edge attributes are determined according to the connection configuration information corresponding to the connection relationship.

4. A method for dynamically drawing a system deployment diagram according to claim 1, characterized in that: The step of introducing a JavaScript file of a preset visualization library into the HTML page and then loading the target JSON data through the JavaScript file to obtain an initial network diagram specifically includes: Load the VIS.js visualization library on the HTML page; Create the JavaScript file, where the JavaScript file is configured to obtain the target JSON data and assign it to nodes and edges; The JavaScript file is executed through the VIS.js visualization library to obtain the initial network diagram.

5. A method for dynamically drawing a system deployment diagram according to claim 4, characterized in that: The adding a click event and a corresponding interactive modal box to the initial network diagram through the visualization library specifically includes: Obtaining node information of each network node of the initial network graph; Generate the interactive modal box corresponding to each of the network nodes through the VIS.js visualization library, and assign the node information to the interactive modal box; The click event is added to each of the network nodes through the VIS.js visualization library, and the click event is configured to display the interactive modal box and the node information when the network node triggers a click.

6. A method for dynamically drawing a system deployment diagram according to claim 1, characterized in that: The generating of corresponding animation effects according to the business flow of the interactive network diagram, and then rendering and displaying the animation effects on the interactive network diagram specifically includes: Acquire system operation data of the target system, and generate the business flow according to the system operation data; Add the animateme animation class in the PATH of the SVG, and generate the animation effect according to the business flow; The animateme animation class is introduced into the HTML page, and the animation effect is rendered and displayed on the interactive network diagram through the animateme animation class.

7. A method for dynamically drawing a system deployment diagram according to any one of claims 1 to 6, characterized in that: The system deployment diagram dynamic drawing method also includes the following steps: The system state change information of the target system is obtained, and the nodes and edges of the system deployment diagram are adjusted according to the system state change information.

8. A system deployment diagram dynamic drawing device, characterized in that: include: A data generation module, used to obtain system architecture data of a target system, and generate target JSON data according to the system architecture data, wherein the target JSON data includes node data and corresponding node attributes and edge data and corresponding edge attributes; A data loading module is used to create an HTML page, introduce a JavaScript file of a preset visualization library into the HTML page, and then load the target JSON data through the JavaScript file to obtain an initial network diagram; An interactive setting module, used to add a click event and a corresponding interactive modal box to the initial network diagram through the visualization library to obtain an interactive network diagram; The animation setting module is used to generate corresponding animation effects according to the business flow of the interactive network diagram, and then render and display the animation effects on the interactive network diagram to obtain a system deployment diagram.

9. An electronic device, characterized in that: The electronic device includes a memory, a processor, a program stored in the memory and executable on the processor, and a data bus for realizing connection and communication between the processor and the memory. When the program is executed by the processor, the steps of the method for dynamically drawing a system deployment diagram as described in any one of claims 1 to 7 are realized.

10. A storage medium, the storage medium being a computer-readable storage medium, used for computer-readable storage, characterized in that: The storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the steps of the system deployment diagram dynamic drawing method as described in any one of claims 1 to 7.

Images