Method and system for dynamically adjusting flow chart based on external data source

Abstract

The invention relates to a method and a system for dynamically adjusting a flow chart based on an external data source. The method comprises the following steps: creating a flow chart canvas through a graphic editing engine and initializing a flow chart instance; dynamically configuring nodes and edges in the flow chart based on drag and drop interaction and a preset style library; dynamically associating each node in the flow chart with an external data source updated in real time, and displaying dynamic content through event monitoring; and finishing the adjustment of the flow chart. The method aims at solving the problems that in traditional industrial research, an industrial chain is difficult to display visually, and data real-time updating and correlation analysis are difficult.

Description

Technical Field

[0001] The present invention relates to the field of data analysis, and particularly to a method and system for dynamically adjusting a flowchart based on an external data source. Background Art

[0002] In today's digital age, data analysis plays a crucial role in many fields. Especially in complex business scenarios such as industrial chain research, efficient data analysis and decision support are of great importance. However, existing technical means have many problems that cannot be ignored when dealing with complex data analysis.

[0003] Traditional industrial research methods are difficult to intuitively display the complexity and dynamics of the industrial chain. The industrial chain involves many links and elements, and each link is interrelated and mutually influential, with its structure and development trend being extremely complex. However, when presenting the industrial chain, traditional tools often adopt static and abstract ways, making it difficult for researchers to quickly and comprehensively grasp the overall picture and internal logical relationships of the industrial chain, which is not conducive to in-depth analysis and decision-making.

[0004] In terms of data processing, traditional tools have obvious deficiencies in real-time data update and correlation analysis. With the rapid change of the market environment, data is in a continuous state of update. However, traditional tools cannot obtain and integrate the latest data in a timely manner, making it difficult to achieve effective correlation analysis between data. This will not only affect the timeliness of the research, resulting in the lag of research results behind the actual situation, but also reduce the accuracy of the analysis, greatly discounting the reliability of the research conclusions, and thus affecting the scientific nature of decision-making.

[0005] Therefore, there is an urgent need to propose a method and system for dynamically adjusting a flowchart based on an external data source to solve the problems that existing data analysis technologies have many defects when facing complex business scenarios and cannot meet the requirements of efficient and accurate data analysis and decision support. Summary of the Invention

[0006] Regarding some problems existing in the prior art, the purpose of the present invention is to provide a method and system for dynamically adjusting a flowchart based on an external data source to solve the above problems.

[0007] To achieve the above object, on the one hand, the present invention provides a method for dynamically adjusting a flowchart based on an external data source, including the following steps:

[0008] Create a flowchart canvas through a graphic editing engine and initialize a flowchart instance;

[0009] Dynamically configure nodes and edges in the flowchart based on drag-and-drop interaction and a preset style library;

[0010] Dynamically associate each node in the flowchart with an externally sourced data that is updated in real time, and display dynamic content through event listening to complete the adjustment of the flowchart.

[0011] Further, in the method for dynamically adjusting a flowchart based on an external data source, the graphic editing engine supports HTML and SVG rendering, has features including data-driven and event-driven, and through the event-driven, at least one function among node drag-and-drop, connection line editing, and right-click menu interaction can be realized.

[0012] Further, in the method for dynamically adjusting a flowchart based on an external data source, the steps of dynamically configuring flowchart nodes and edges based on drag-and-drop interaction and a preset style library include:

[0013] Preset style library construction: The system generates a preset style library, which includes multiple color styles for setting the colors of flowchart elements, and also includes nodes of multiple shapes and edge elements of multiple types in the preset style library;

[0014] Node configuration: When adding a node, the size, border, and text-related attributes of the node can be custom-adjusted, and the node can embed HTML elements;

[0015] Edge configuration: When adding an edge, the style and starting position of the edge can be custom-set;

[0016] Drag-and-drop interaction operation: The node or edge can be dragged and dropped onto the canvas after being selected from the configuration item bar.

[0017] Further, in the method for dynamically adjusting a flowchart based on an external data source, after completing the adjustment of the flowchart, it further includes exporting the flowchart as a picture.

[0018] Further, in the method for dynamically adjusting a flowchart based on an external data source, the steps of exporting the flowchart as a picture include:

[0019] Obtain and process the SVG data of the flowchart;

[0020] Render the SVG data onto the canvas and generate a picture after converting the image format;

[0021] Share the content of the generated picture.

[0022] In addition, on the other hand of the present invention, a system for dynamically adjusting a flowchart based on an external data source is also proposed, including a flowchart drawing module, a node dynamic association data module, and a flowchart export module;

[0023] The flowchart drawing module is used to create a flowchart canvas based on a graphics editing engine and generate a logic diagram. The flowchart drawing module includes a create flowchart canvas unit, an initialize flowchart instance unit, a custom draw flowchart unit, and a quick draw mind map unit. The create flowchart canvas unit is used to generate an independent drawing container based on the graphics editing engine. The initialize flowchart instance unit is used to initialize a flowchart instance by configuring a unique identifier, a data generation function, and status parameters. The custom draw flowchart unit supports dynamic configuration of nodes and edges through a preset style library and drag-and-drop interaction. The quick draw mind map unit is used to automatically generate and expand the logic structure of the flowchart based on a hierarchical plug-in.

[0024] The node dynamic association data module is used to dynamically bind the nodes in the flowchart to an externally sourced data that is updated in real time, and trigger the display of the associated data through an interaction event. The node dynamic association data module includes a node link management unit and a node data display unit. The node link management unit is used to implement the binding and update of the node to the dynamic data source. The node data display unit is used to display the data associated with the node in real time and support jumping to the data source.

[0025] The flowchart export module is used to convert the flowchart into SVG data and support export to static images in multiple formats or copying to the clipboard. The flowchart export module includes an obtain and process SVG data unit, an SVG convert to image unit, a copy image unit, and a picture quality and performance optimization unit. The obtain and process SVG data unit is used to obtain the SVG data of the flowchart. The SVG convert to image unit is used to render the SVG data into a static image. The copy image unit is used to achieve image sharing through the clipboard API. The picture quality and performance optimization unit is used to improve the export efficiency of the static image through resolution adjustment and data compression.

[0026] Further, in the system for dynamically adjusting a flowchart based on an external data source, the graphics editing engine supports HTML and SVG rendering and integrates data-driven and event-driven interaction logics.

[0027] Further, in the system for dynamically adjusting a flowchart based on an external data source, in the initialize flowchart instance unit, the status parameters include an edit state and a view state. The edit state allows modification of the flowchart structure, and the view state only supports data display.

[0028] Further, in the system for dynamically adjusting a flowchart based on an external data source, the quick draw mind map unit automatically generates the parent-child node connection relationship through a hierarchical plug-in and supports dynamically adding or deleting child nodes.

[0029] Further, in the system for dynamically adjusting the flowchart based on an external data source, the node link management unit triggers an association operation through a right-click menu and supports binding to an external data source with real-time updates. The external data source includes metric data, chart data, and document data; the node data display unit realizes data preview when the mouse hovers and click-through to a detailed page through event listening.

[0030] Compared with the prior art, the present invention has at least the following technical effects:

[0031] A method and system for dynamically adjusting a flowchart based on an external data source provided by the present invention, through interactive design based on a graphics editing engine, support drag-and-drop operations, a preset style library, and custom configuration, enabling users to quickly create a flattened and concrete flowchart, intuitively displaying complex industrial chain structures and dynamic logical relationships, thereby solving the problem of difficulty in clearly presenting complexity in traditional tools.

[0032] Further, through the dynamic binding of nodes to an external data source and in combination with an event listening mechanism (such as a right-click menu, hover preview, click-through), real-time data updates and interactive display are achieved, which can significantly improve the timeliness and prediction accuracy of industrial chain analysis and overcome the defects of rigid data association and lagging updates in traditional tools.

[0033] Further, the present invention provides a multi-format image export function, supports SVG data rendering, clipboard copying, and performance optimization, ensures high-quality image output while improving export efficiency, and facilitates the retention, sharing, and cross-platform application of research results, thereby solving the problem of inconvenient retention of results in traditional tools. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] Figure 1 It is a flowchart of a method for dynamically adjusting a flowchart based on an external data source in an embodiment of the present invention;

[0035] Figure 2 It is a flowchart of a system for dynamically adjusting a flowchart based on an external data source in another embodiment of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0036] The following will describe in more detail a method and system for dynamically adjusting a flowchart based on an external data source of the present invention with reference to the schematic diagrams, which show the preferred embodiments of the present invention. It should be understood that those skilled in the art can modify the present invention described herein while still achieving the beneficial effects of the present invention. Therefore, the following description should be understood as a broad guidance for those skilled in the art and not as a limitation on the present invention.

[0037] For clarity, not all features of the actual embodiments are described. In the following description, well-known functions and structures are not described in detail, because they would obscure the present invention with unnecessary details. It should be recognized that in the development of any actual embodiment, numerous implementation details must be made to achieve the specific goals of the developer, such as changing from one embodiment to another in accordance with system-related or business-related constraints. Additionally, it should be recognized that such development work might be complex and time-consuming, but it is merely routine work for those skilled in the art.

[0038] In the following paragraphs, the present invention will be described more specifically by way of example with reference to the accompanying drawings. According to the following description, the advantages and features of the present invention will become clearer. It should be noted that the drawings are all in a very simplified form and use non-precise scales, solely for the purpose of facilitating and clearly assisting in explaining the objectives of the embodiments of the present invention.

[0039] On the one hand, as Figure 1 shown, this embodiment provides a method for dynamically adjusting a flowchart based on an external data source, including the following steps:

[0040] S1: Create a flowchart canvas through a graphics editing engine and initialize a flowchart instance;

[0041] S2: Dynamically configure the nodes and edges in the flowchart based on drag-and-drop interaction and a preset style library;

[0042] S3: Dynamically associate each node in the flowchart with a real-time updated external data source, and display dynamic content through event listening to complete the adjustment of the flowchart;

[0043] It should be noted that the flowchart, as an important tool for information expression, is often used to display system processes, business logics, and data flows, etc. In order to achieve a more flexible and user-friendly flowchart drawing function in this embodiment, it is developed based on the 'antv / x6' plugin. 'antv / x6' is a graphics editing engine open-sourced by Alibaba, which supports graphics rendering based on HTML and SVG, and has features including data-driven and event-driven, especially suitable for implementing interactive flowchart editing functions. Among them, through the event-driven, at least one function among node drag-and-drop, connection line editing, and right-click menu interaction can be achieved.

[0044] Specifically, for the creation of the flowchart canvas and the initialization of the flowchart instance in step S1, the following explanations are provided. To facilitate the display of system processes, business logics, data flows, etc., it is first necessary to draw a flowchart. However, the first step in flowchart drawing is to create a canvas to carry the flowchart. The creation of the flowchart canvas is achieved by defining the 'id' attribute in HTML. Each flowchart instance corresponds to a unique DOM container, which is responsible for carrying all the nodes and edge elements of the entire flowchart.

[0045] In addition, the initialization of the flowchart instance is completed by defining the'myGraphRende' method, which accepts three parameters: 'id','mindmapDataUseFun', and 'type'.

[0046] Among them, the parameter 'id': is used to specify the DOM container of the drawing canvas. By assigning a unique value to 'id', it can ensure that each flowchart instance in the page is independent of each other and avoid interference.

[0047] The parameter'mindmapDataUseFun': This parameter is a function that is responsible for generating the basic data structure of the mind map in the flowchart. The dynamic generation of mind map data enables the flowchart to be not only a tool for static display but also capable of real-time adjustment and update according to user needs.

[0048] The parameter 'type': This parameter is used to control the current state of the flowchart, which is divided into an edit state ('edit') and a view state ('view'). In the edit state, users can operate on the flowchart, such as adding, deleting nodes, or adjusting the connections between nodes. In the view state, the flowchart is only used for display and users cannot make modifications.

[0049] In this embodiment, during the initialization process, a variable 'graphIns' needs to be defined and instantiated through 'new Graph()'. 'Graph' is the core class in 'antv / x6', which encapsulates all the basic operations of the flowchart, including the addition, deletion of nodes and edges, and event listening. The instantiation of 'graphIns' provides the necessary support for subsequent operations on the flowchart.

[0050] Furthermore, for step S2, in order to achieve rich graphic styles and flexible editing functions, both the nodes and edge elements of the flowchart can be configured through parameters to meet the requirements in different application scenarios. Therefore, a custom drawing method for the flowchart is proposed. The steps of dynamically configuring the nodes and edges of the flowchart based on drag-and-drop interaction and a preset style library include preset style library construction, node configuration, edge configuration, and drag-and-drop interaction operations, which are specifically as follows:

[0051] S21: Construction of Preset Style Library

[0052] The system generates a preset style library, which includes multiple color styles. The color styles are used to set the colors of the flowchart elements, and the preset style library also includes nodes of multiple shapes and edge elements of multiple types.

[0053] S22: Node Configuration

[0054] Node Configuration: When adding a node, the size, border, and text-related attributes of the node can be customized, and the node can be embedded with HTML elements.

[0055] S23: Edge Configuration

[0056] When adding an edge, the style and starting position of the edge can be customized.

[0057] S24: Drag-and-Drop Interaction Operation

[0058] The node or edge can be dragged and dropped onto the canvas after being selected from the configuration item bar.

[0059] Specifically, in step S21, the preset style library includes multiple color styles. To meet different visual requirements, a constant array'styleSettingsArr' needs to be defined. This array contains four preset color styles, and each style includes background color, text color, border color, and line color parameters. This preset color style can provide a quick selection way for users, thus avoiding the cumbersome process of manually setting the colors of each graphic element. It should be noted that users can also customize more color styles according to actual needs. In addition, the preset style library also includes nodes of multiple shapes and edge elements of multiple types.

[0060] For step S22, as the basic unit of the flowchart, the diversity of the shape and style of the node directly determines the readability and aesthetics of the flowchart. In this embodiment, the'myNodeOption' method is used to generate the configuration information of the node. This method supports the built-in node types provided by 'antv / x6' (such as rectangle, circle, ellipse, rhombus, etc.) and custom nodes. Users can specify the width, height, border style, text content, and its position attributes of the node through this method. In addition, 'antv / x6' also supports using 'foreignObject' to render HTML fragments, allowing complex HTML elements such as forms and buttons to be embedded in the node, thus greatly expanding the expression ability of the node.

[0061] For step S23, the edges in the flowchart are responsible for connecting different nodes. Therefore, their styles and connection methods are crucial for the overall visual effect. For step S22, the'myEdgeOption' method is used to generate the configuration information for the edges. This method accepts three parameters: 'type', 'xP', and 'yP'. Among them, 'type' is the type of the edge. Currently, nine types of lines are supported, covering straight lines, bent lines, and their different arrow styles. These types can meet the connection requirements in different scenarios, such as showing the data flow direction and highlighting key points. 'xP' and 'yP' are used to determine the starting and ending positions of the edge. Through these parameters, the position of the connection line can be dynamically adjusted to meet the requirements of different layouts.

[0062] After completing the above steps, for step S24, the user can select any element through the configuration item bar and drag it onto the flowchart canvas. The system will listen for the `drop` event of the element and add the new element to the flowchart through the `graphIns.addEdge` method. Thus, the user can quickly construct a complex flowchart through simple drag-and-drop operations.

[0063] It should be noted that the mind map is a common tool for expressing logical structures, used to display the sub-topics at all levels extended from the central theme. In this solution, the 'Hierarchy' plugin library provided by 'antv / x6' is used to quickly create a mind map with a hierarchical structure. The basic structure of the mind map is initialized through the 'Graph.registerNode' method, which allows the user to define the appearance, size, and interaction behavior of the node. To enhance the interactivity, the node defines the button events ('add:topic:left' and 'add:topic:right') for adding sub-nodes on the left and right in the 'attrs' property. Through these buttons, the user can more conveniently expand or reduce the content of the mind map.

[0064] In addition, during the creation of the mind map, the 'Graph.registerConnector' method is used to represent the relationships between nodes in the form of lines. The style, bending degree, and connection method of the connector can all be customized through parameters to meet different visual and logical requirements. Finally, the 'Graph.registerEdge' is used to initialize the basic configuration information of the edge to ensure the integrity and correct connection of the mind map structure.

[0065] When the user clicks the button to add a child node to a certain node, the system will listen for the 'add:topic:left' and 'add:topic:right' events through the `graph.on` event, so as to dynamically add child nodes. This method can not only simplify the process of constructing the mind map, but also provide users with a higher degree of operation freedom.

[0066] Furthermore, for step S3, each node in the flowchart is dynamically associated with a real-time updated external data source, and dynamic content is displayed through event listening to complete the adjustment of the flowchart.

[0067] In practical applications, the flowchart nodes are usually not just simple graphic elements, but are associated with specific external data sources, and the external data sources include data links, chart links, and document links. To implement this function, in this embodiment, each node in the flowchart is dynamically associated with a real-time updated external data source, and dynamic content is displayed through event listening. This makes the flowchart not only able to display the process, but also serve as an information entry point to provide users with more valuable data display.

[0068] Specifically, dynamically associating each node in the flowchart with a real-time updated external data source can be achieved by listening for the right mouse button event. When the user right-clicks on a certain node, the system will pop up a menu, which contains options such as "Delete Link" and "Add Link". When the user selects "Add Link", a window for associating data will pop up, and the user can select the external data source to be associated in the window. The external data sources include data links, chart links, and document links. This design can not only improve the interactivity of the flowchart, but also enhance its data carrying capacity, making the flowchart the center of data display and operation.

[0069] After the user selects the associated data, the system will obtain the currently selected node element through the 'graphIns.getSelectedCells' method and add the associated data to the attributes of this node. In this way, each node of the flowchart can carry the data related to it. The associated data can be not only static text or charts, but also dynamically generated reports or real-time data, enabling the flowchart to adapt to different application scenarios.

[0070] After that, when the user hovers the mouse over a certain node, the system will display the data associated with this node by listening for the 'graph.on('node:mouseenter')' event. The user can click on the node to view the detailed information and directly jump to the detailed page of the data source or report. This interaction method makes the flowchart not only have a display function, but also can serve as an entry point for data query and operation.

[0071] In practical applications, exporting a flowchart as an image is a common requirement. In other words, it allows users to save, share, or embed complex graphics in the form of static images into other documents. The following details how to export a flowchart as a high-quality image file.

[0072] It should be noted that after completing the adjustment of the flowchart in the above steps S1 - S3, it also includes step S4 of exporting the flowchart as an image. The step of exporting the flowchart as an image includes:

[0073] S41: Obtain and process the SVG data of the flowchart;

[0074] S42: Render the SVG data onto a canvas and generate an image after converting the image format;

[0075] S43: Share the content of the generated image.

[0076] Specifically, regarding step S41, the flowchart is rendered in the 'antv / x6' in SVG (Scalable Vector Graphics) format. The advantage of the SVG format lies in its vector characteristics based on XML (Extensible Markup Language), which can maintain clarity at different resolutions and is very suitable for exporting high-quality images.

[0077] When exporting a flowchart as an image, first, the SVG data of the flowchart needs to be obtained. In this embodiment, all graphic elements in the current canvas are obtained by calling relevant methods and converted into a complete SVG string. The SVG string contains all the structural information of the flowchart, including nodes, edges, styles, and layouts. To ensure that the exported image contains all content, all style attributes need to be copied during the processing, and all elements within the canvas range should be correctly included in the exported SVG file.

[0078] It should be noted that for step S42, after obtaining the SVG data, the SVG data is converted into common image formats such as PNG, JPEG, or WebP. The specific steps are as follows:

[0079] First, the SVG data is loaded into an image object, and then the image object is drawn onto the canvas. This process includes setting the width and height of the canvas to adapt to the size of the image, ensuring that every detail of the image is clearly presented. After that, the image data drawn on the canvas is converted into binary format, and the user can choose to download the picture, save it locally, or directly upload it to the server.

[0080] Furthermore, for step S43, in addition to downloading the generated image, users may also need to copy the generated image to the clipboard for direct pasting into other applications. This function can be achieved by using the clipboard API. After the image is successfully drawn on the canvas, the image data can be directly copied to the clipboard, facilitating users to directly paste the flowchart into documents, emails, or other editing tools without saving the file.

[0081] In addition, in practical applications, the quality of the exported image and the performance of the export process are also important aspects that users are concerned about. To ensure the quality of the exported image, when creating the canvas, a higher resolution can be set, and the width-to-height ratio of the canvas can be adjusted before export to meet different display requirements, thereby ensuring that the exported image remains clear when enlarged or printed.

[0082] It should be noted that for large-scale flowcharts, SVG data also needs to be optimized, such as removing redundant whitespace, merging paths, or using more efficient compression algorithms. This can not only reduce the file size but also improve the export speed, ensuring a smooth experience for users during operation.

[0083] Through the above steps S41 - S43, it is easier to export the drawn flowchart as a high-quality image file to meet the needs of archiving, sharing, and display.

[0084] In another embodiment, as Figure 2 shown, a dynamic data analysis system based on a flowchart is also provided, including a flowchart drawing module, a node dynamic association data module, and a flowchart export module;

[0085] The flowchart drawing module is used to create a flowchart canvas based on a graphics editing engine and generate a logic diagram; the flowchart drawing module includes a create flowchart canvas unit, an initialize flowchart instance unit, a custom draw flowchart unit, and a quick draw mind map unit; the create flowchart canvas unit is used to generate an independent drawing container based on the graphics editing engine; the initialize flowchart instance unit is used to initialize the flowchart instance by configuring a unique identifier, a data generation function, and status parameters; the custom draw flowchart unit supports dynamic configuration of nodes and edges through a preset style library and drag-and-drop interaction; the quick draw mind map unit is used to automatically generate and expand the logic structure of the flowchart based on a hierarchical plugin.

[0086] The node dynamic association data module is used to dynamically bind the nodes in the flowchart to an externally sourced data that is updated in real time, and trigger the display of the associated data through interaction events. The node dynamic association data module includes a node link management unit and a node data display unit. The node link management unit is used to implement the binding and update of the node to the dynamic data source. The node data display unit is used to display the data associated with the node in real time and support jumping to the data source.

[0087] The flowchart export module is used to convert the flowchart into SVG data and support exporting it as static images in multiple formats or copying it to the clipboard. The flowchart export module includes an SVG data acquisition and processing unit, an SVG image conversion unit, an image copying unit, and an image quality and performance optimization unit. The SVG data acquisition and processing unit is used to acquire the SVG data of the flowchart. The SVG image conversion unit is used to render the SVG data as a static image. The image copying unit is used to achieve image sharing through the clipboard API. The image quality and performance optimization unit is used to improve the export efficiency of the static image by adjusting the resolution and compressing the data.

[0088] Furthermore, the graphic editing engine supports HTML and SVG rendering and integrates data-driven and event-driven interaction logics.

[0089] Furthermore, in the initialization flowchart instance unit, the status parameters include an editing status and a viewing status. The editing status allows modification of the flowchart structure, and the viewing status only supports data display.

[0090] Furthermore, the steps for the custom flowchart drawing unit to support dynamic configuration of nodes and edges through a preset style library and drag-and-drop interaction are as follows:

[0091] Preset style library construction: The system generates a preset style library, which includes multiple color styles. The color styles are used to set the colors of the flowchart elements, and the preset style library also includes nodes of multiple shapes and edge elements of multiple types.

[0092] Node configuration: When adding a node, the user can customize its size, border, and text-related attributes, and can also embed HTML elements into the node.

[0093] Edge configuration: When adding an edge, the user selects a style and sets the start and end position parameters, and adjusts the style and connection position of the edge to fit the flowchart layout.

[0094] Drag-and-drop interaction operation: The drawing interface is set with a configuration item bar, and the user drags and drops nodes or edge elements from the configuration item bar onto the canvas.

[0095] Furthermore, the quick mind map drawing unit automatically generates the connection relationship between parent and child nodes through a hierarchical plug-in, and supports dynamically adding or deleting child nodes. In this embodiment, the hierarchical plug-in is the 'Hierarchy' plug-in library provided by 'antv / x6' to quickly create a mind map with a hierarchical structure.

[0096] Furthermore, the node link management unit triggers the association operation through the right-click menu and supports binding to an external data source with real-time updates. The external data source includes metric data, chart data, and research report data; the node data display unit realizes data preview when the mouse hovers and click to jump to the detailed page through event listening.

[0097] In this embodiment, in the SVG conversion image unit, the formats of the static images include PNG format, JPEG format, and WebP format.

[0098] In summary, in a dynamic data analysis method and system based on a flowchart provided by an embodiment of the present invention, through an interactive design based on a graphic editing engine, it supports drag-and-drop operations, a preset style library, and custom configuration, enabling users to quickly create a flattened and concrete flowchart to intuitively display a complex industrial chain structure and dynamic logical relationships, thereby solving the problem that it is difficult to clearly present complexity in traditional tools.

[0099] Furthermore, through the dynamic binding of nodes to an external data source and in combination with an event listening mechanism (such as a right-click menu, hover preview, click to jump), real-time data update and interactive display are achieved, which can significantly improve the timeliness and prediction accuracy of industrial chain analysis and overcome the defects of rigid data association and lagging update in traditional tools.

[0100] Furthermore, the present invention provides a multi-format image export function, which supports SVG data rendering, clipboard copying, and performance optimization, ensuring high-quality image output while improving the export efficiency, facilitating the retention, sharing, and cross-platform application of research results, thereby solving the problem of inconvenient retention of traditional tool results.

[0101] The above are only the preferred embodiments of the present invention and do not impose any limitation on the present invention. Any person skilled in the art within the technical field of the present invention, without departing from the technical solution of the present invention, makes any form of equivalent replacement or modification and other changes to the technical solution and technical content disclosed by the present invention, all of which fall within the content of the technical solution of the present invention and still belong to the protection scope of the present invention.

Claims

1. A method for dynamically adjusting a flow chart based on an external data source, characterized in that: The following steps are involved: Create a flowchart canvas and initialize a flowchart instance through the graphics editing engine; Dynamically configure nodes and edges in flowcharts based on drag-and-drop interactions and a library of preset styles; The adjustment of the flowchart is completed by dynamically associating each node in the flowchart with an external data source that is updated in real time, and displaying dynamic content through event monitoring.

2. The method for dynamically adjusting a flow chart based on an external data source according to claim 1, characterized in that: The graphic editing engine supports HTML and SVG rendering, and has data-driven and event-driven features. At least one function including node dragging and dropping, line editing, and right-click menu interaction is implemented through the event-driven feature.

3. The method for dynamically adjusting a flow chart based on an external data source according to claim 1, characterized in that: The step of dynamically configuring the nodes and edges of the flowchart based on drag-and-drop interaction and a preset style library includes: Preset style library construction: the system generates a preset style library, which includes multiple color styles. The color styles are used to set the colors of the flowchart elements. The preset style library also includes nodes of multiple shapes and edge elements of multiple types. Node configuration: When adding a node, the size, border and text-related properties of the node can be customized, and the node can be embedded in HTML elements; Edge configuration: When adding an edge, the style and starting position of the edge can be customized; Drag-and-drop interactive operation: The node or edge can be selected from the configuration item bar and then dragged and dropped to the canvas.

4. The method for dynamically adjusting a flow chart based on an external data source according to claim 1, characterized in that: After the adjustment of the flowchart is completed, the process further includes exporting the flowchart as a picture.

5. The method for dynamically adjusting a flow chart based on an external data source according to claim 4, characterized in that: The step of exporting the flowchart as a picture includes: Obtain and process the SVG data of the flowchart; Render the SVG data onto a canvas and convert the image format to generate a picture; The generated picture is shared.

6. A system for dynamically adjusting a flow chart based on an external data source, characterized in that: It includes a flowchart drawing module, a node dynamic association data module and a flowchart export module; The flowchart drawing module is used to create a flowchart canvas based on a graphic editing engine and generate a logic diagram; the flowchart drawing module includes a flowchart canvas creation unit, a flowchart instance initialization unit, a flowchart custom drawing unit and a quick mind map drawing unit; the flowchart canvas creation unit is used to generate an independent drawing container based on the graphic editing engine; the flowchart instance initialization unit is used to initialize the flowchart instance by configuring a unique identifier, a data generation function and a state parameter; the flowchart custom drawing unit supports dynamic configuration of nodes and edges through a preset style library and drag-and-drop interaction; the quick mind map drawing unit is used to automatically generate and expand the logical structure of the flowchart based on a hierarchical plug-in; The node dynamic association data module is used to dynamically bind the nodes in the flow chart with the external data source updated in real time, and trigger the display of the associated data through interactive events; the node dynamic association data module includes a node link management unit and a node data display unit; the node link management unit is used to realize the binding and update of the node with the dynamic data source; the node data display unit is used to display the data associated with the node in real time and support jumping to the data source; The flowchart export module is used to convert the flowchart into SVG data, and supports exporting to static images in multiple formats or copying to the clipboard; the flowchart export module includes an SVG data acquisition and processing unit, an SVG image conversion unit, an image copying unit and a picture quality performance optimization unit; the SVG data acquisition and processing unit is used to acquire the SVG data of the flowchart; the SVG image conversion unit is used to render the SVG data into a static image; the image copying unit is used to realize image sharing through the clipboard API; the image quality performance optimization unit is used to improve the export efficiency of the static image through resolution adjustment and data compression.

7. The system for dynamically adjusting a flow chart based on an external data source according to claim 6, characterized in that: The graphic editing engine supports HTML and SVG rendering, and integrates data-driven and event-driven interaction logic.

8. The system for dynamically adjusting a flow chart based on an external data source according to claim 6, characterized in that: In the initialization flowchart instance unit, the state parameters include an editing state and a viewing state. The editing state allows the flowchart structure to be modified, and the viewing state only supports data display.

9. The system for dynamically adjusting a flow chart based on an external data source according to claim 6, characterized in that: The quick mind map drawing unit automatically generates parent-child node connection relationships through a hierarchical plug-in, and supports dynamic addition or deletion of child nodes.

10. The system for dynamically adjusting a flow chart based on an external data source according to claim 6, characterized in that: The node link management unit triggers associated operations through the right-click menu and supports binding of external data sources that are updated in real time. The external data sources include indicator data, chart data, and document data. The node data display unit implements data preview when the mouse hovers and clicks to jump to the detailed page through event monitoring.

Images