Bpmn-based credit approval business process visualization method and device

Abstract

The application provides a kind of based on BPMN's credit approval business process visualization method and device, the method comprises: obtaining credit approval business flow chart, at least one credit approval business node is included in credit approval business flow chart, each credit approval business node is correspondingly with node graph element attribute;Credit approval business state data is acquired, and the node graph element attribute of each credit approval business node in credit approval business flow chart is updated according to credit approval business state data;According to the size of canvas container, the size of credit approval business flow chart and the display position of credit approval business flow chart in canvas container are adjusted;Credit approval business flow chart is loaded in canvas container.The technical scheme provided in the present application can automatically trigger the automatic centering and full-screen fitting of global flow chart, and synchronously refreshes credit approval business node graph element state, so as to realize dynamic tracking and panoramic adaptation of credit approval business process.

Description

Technical Field

[0001] This invention relates to the field of electronic process technology, and in particular to a visualization method and apparatus for a credit approval business process based on BPMN. Background Technology

[0002] As businesses expand and regulatory requirements become increasingly stringent, credit approval processes often involve complex procedures, encompassing multi-level reviews, cross-departmental collaboration, conditional branch judgments, and handling of anomalies. Simultaneously, the deepening of digital transformation has made the electronic processing of credit approval processes an inevitable trend. In the handling of credit transactions such as supply chain finance contract approval, bill discounting, and credit line approval, extremely complex approval workflows are often involved, with various intricate business actions such as rejection, refusal, transfer, and countersigning. Current mainstream credit approval systems typically incorporate workflow engines such as Activiti and Camunda in the backend to model and schedule business flows, while the frontend provides a visual representation of the business processes.

[0003] However, current front-end visualization of business processes is largely limited to static rendering. A typical approach is for the server to render the Business Process Model and Notation (BPMN) as a static image or an HTML layer with fixed coordinates based on the current approval status, and then send it to the front-end for display. Alternatively, the front-end may use a basic credit approval business process visualization library to perform a one-time loading and rendering of the XML file. Credit approval personnel can only passively receive pre-rendered static charts when viewing the current credit approval flow status. This static rendering mode leads to several problems: First, it lacks dynamic perception and fine-grained feedback on credit approval processes, making it impossible to achieve differentiated, real-time dynamic rendering of different approval statuses on the front-end. Second, it lacks an efficient visualization and tracking mechanism for complex approval flows. In scenarios with numerous approval nodes and extremely long process chains, the front-end rendering component struggles to adaptively center and fit to the screen when faced with changes in container size, window scaling, or large-scale complex charts. In summary, existing credit approval business process visualization methods suffer from a severe disconnect between credit approval business data and the process view, preventing users from intuitively grasping the real-time progress and node status of the process.

[0004] Therefore, how to design a visualization method for credit approval business processes based on BPMN to achieve real-time and accurate mapping and automated visual tracking of credit approval business process status, so as to improve users' review efficiency and credit approval business experience, has become an urgent problem to be solved in this field. Summary of the Invention

[0005] Firstly, addressing the problems existing in the prior art, this invention provides a visualization method for credit approval business processes based on BPMN, achieving real-time accurate mapping and automated visual tracking of the credit approval business process status. The method includes:

[0006] Obtain a credit approval business process diagram, which includes at least one credit approval business node, and each credit approval business node has a corresponding node element attribute.

[0007] Obtain credit approval business status data, and update the node element attributes of each credit approval business node in the credit approval business process diagram based on the credit approval business status data;

[0008] Adjust the size of the credit approval business process diagram and its display position on the canvas container according to the size of the canvas container;

[0009] Load the credit approval business process diagram into the canvas container.

[0010] A visualization method for credit approval business processes based on BPMN is provided by the present invention:

[0011] Each credit approval business node also has a corresponding node ID;

[0012] The credit approval business status data includes: node ID and activity identifier;

[0013] The steps of updating the node element attributes of each credit approval business node in the credit approval business process diagram based on the credit approval business status data include:

[0014] The activity identifier and the credit approval business node are matched according to the node ID, and the node element attributes of the credit approval business node are updated according to the activity identifier.

[0015] According to the present invention, a visualization method for a credit approval business process based on BPMN is provided, wherein the node primitive attributes are mounted in the document object model of the credit approval business node in the form of Cascading Style Sheet style class names.

[0016] A visualization method for credit approval business processes based on BPMN is provided by the present invention:

[0017] Each credit approval business node has corresponding node location coordinates;

[0018] The steps of adjusting the size of the credit approval business process diagram and its display position on the canvas container according to the size of the canvas container include:

[0019] The origin coordinates and the width and height of the rectangle of the credit approval business process diagram are determined based on the coordinates of all nodes in the diagram.

[0020] The topological center of the credit approval business process diagram is determined based on the origin coordinates and the width and height values ​​of the rectangle.

[0021] Using the topological center of the credit approval business process diagram as the anchor point, the credit approval business process diagram is scaled and centered according to the size of the canvas container.

[0022] According to the present invention, a visualization method for a credit approval business process based on a BPMN (British Border Mapping Method) includes the following steps: determining the origin coordinates and the width and height of the rectangle of the credit approval business process diagram based on the coordinates of all nodes in the diagram.

[0023] The minimum horizontal coordinate, minimum vertical coordinate, maximum horizontal coordinate, and maximum vertical coordinate of the credit approval business process diagram are determined based on the coordinates of all nodes in the diagram.

[0024] The origin coordinates are obtained based on the minimum values ​​of the horizontal and vertical axes of the credit approval business process diagram.

[0025] The width of the rectangle is obtained based on the minimum and maximum values ​​of the horizontal coordinates in the credit approval business process diagram.

[0026] The height of the rectangle is obtained based on the minimum and maximum values ​​of the vertical coordinates in the credit approval business process diagram.

[0027] According to the visualization method for credit approval business process based on BPMN provided by the present invention, the formula for calculating the topology center of the credit approval business process diagram is:

[0028] ;

[0029] ;

[0030] in, The x-coordinate of the origin is represented. The ordinate of the origin is represented by its vertical coordinate. This represents the minimum value of the horizontal axis of the credit approval business process diagram. This represents the width of the rectangle. This represents the minimum value of the vertical axis of the credit approval business process diagram. This represents the height of the rectangle.

[0031] According to a visualization method for a credit approval business process based on BPMN provided by the present invention, the step of scaling the credit approval business process diagram includes:

[0032] The scaling ratio is determined based on the size of the canvas container and the size of the credit approval business process diagram;

[0033] The credit approval business process diagram is smoothly scaled using the topological center of the diagram as the anchor point according to the scaling ratio.

[0034] According to the present invention, a method for visualizing a credit approval business process based on a BPMN includes the following step: centering the credit approval business process diagram.

[0035] Align the topological center of the credit approval business process diagram with the center point of the canvas container, and center the credit approval business process diagram at the center of the canvas container.

[0036] According to a BPMN-based visualization method for credit approval business processes provided by the present invention, before scaling and centering the credit approval business process diagram according to the size of the canvas container, the method further includes:

[0037] The size of the canvas container is obtained using the exponential backoff waiting method.

[0038] Secondly, the present invention also provides a visualization device for a credit approval business process based on BPMN, the device comprising:

[0039] The acquisition unit is configured to acquire a credit approval business process diagram, which includes at least one credit approval business node, and each credit approval business node has a corresponding node element attribute.

[0040] The element attribute configuration unit is configured to acquire credit approval business status data and update the node element attributes of each credit approval business node in the credit approval business process diagram according to the credit approval business status data.

[0041] The adjustment unit is configured to adjust the size of the credit approval business process diagram and the display position of the credit approval business process diagram in the canvas container according to the size of the canvas container;

[0042] The loading unit is configured to load the credit approval business process diagram into the canvas container.

[0043] The BPMN-based visualization method for credit approval business processes provided in this application acquires a credit approval business process diagram and credit approval business status data. Based on the credit approval business status data, it updates the node element attributes of each credit approval business node in the process diagram. It also adjusts the size and display position of the credit approval business process diagram within the canvas container according to the container's dimensions. The process diagram is then loaded into the canvas container. When the credit approval business status data is updated or the front-end canvas container undergoes size deformation due to window adjustments, this application can automatically trigger automatic centering and full-screen alignment of the global process diagram, and simultaneously refresh the status of credit approval business node elements. This achieves dynamic tracking and panoramic adaptation of the credit approval business process, thereby improving user review efficiency and the credit approval business experience. Attached Figure Description

[0044] To more clearly illustrate the technical solutions in this invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0045] Figure 1 This is a flowchart illustrating the visualization method for the credit approval business process based on BPMN provided by the present invention.

[0046] Figure 2 This is a schematic diagram of the coordinates of credit approval business nodes in the credit approval business process diagram provided by the present invention;

[0047] Figure 3 This is a schematic diagram of the method for adjusting the size and position of the credit approval business process diagram provided by the present invention;

[0048] Figure 4 This is a schematic diagram of the structure of the visualization device for the credit approval business process based on BPMN provided by the present invention. Detailed Implementation

[0049] To make the objectives, technical solutions, and advantages of this invention clearer, the technical solutions of this invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of this invention. All other embodiments obtained by those skilled in the art based on the embodiments of this invention without creative effort are within the scope of protection of this invention.

[0050] In the first aspect, this application provides a visualization method for credit approval business processes based on BPMN, such as... Figure 1 As shown, the method includes steps 110-140:

[0051] Step 110: Obtain the credit approval business process flowchart;

[0052] Specifically, the credit approval business process diagram includes at least one credit approval business node, and each credit approval business node corresponds to node element attributes. In this application, node element attributes can be understood as the appearance attributes presented when the credit approval business node is visualized, including the node's fill color, outline color, and text color, etc. That is to say, each credit approval business node in this application corresponds to an independent node element attribute. When not associated with credit approval business status data, the credit approval business node element attributes can be default.

[0053] In a preferred embodiment, the credit approval business process diagram is data from a BPMN model, in XML format. Credit approval business node information, including node IDs and the aforementioned node element attributes, can be extracted from the XML data of the credit approval business process diagram. The node ID is a unique identifier for the credit approval business node.

[0054] Step 120: Obtain credit approval business status data, and update the node element attributes of each credit approval business node in the credit approval business process diagram according to the credit approval business status data.

[0055] Specifically, the credit approval business status data in this application can be understood as implementation approval status data generated based on the actual credit approval business flow, which can display the status of credit approval business nodes such as completed, processing, unprocessed, and rejected. The credit approval business status data can be acquired in real time at a preset frequency. In this state, the node element attributes of each credit approval business node in the credit approval business process diagram are updated in real time according to the credit approval business status data at the preset frequency. Alternatively, the credit approval business status data can also be automatically acquired according to a certain instruction. In this state, the node element attributes of each credit approval business node in the credit approval business process diagram are automatically updated according to the credit approval business status data under a certain instruction.

[0056] In a preferred embodiment, credit approval business status data is obtained from the BPMN model. This credit approval business status data includes the aforementioned node ID and activity identifier. The activity identifier indicates the current approval status of the credit approval business node, including "Completed," "Processing," "Unprocessed," and "Rejected." When updating node element attributes based on the credit approval business status data, firstly, the activity identifier in the credit approval business status data is matched with the credit approval business node based on the node ID, and then the node element attributes of the credit approval business node corresponding to the current activity identifier are updated based on the activity identifier.

[0057] In a preferred implementation, the node primitive attributes in this application are mounted in the Document Object Model (DOM) of the credit approval business node in the form of Cascading Style Sheets (CSS) style class names. When updating node primitive attributes, the Marker injection mechanism of the browser's underlying drawing interface Canvas can be used to mount the node primitive attributes to the DOM of the credit approval business node, realizing dynamic binding between the credit approval business status and visual presentation. Canvas is used for graphics rendering and layer management, the Marker injection mechanism is used to attach markers to target nodes at runtime, and CSS is the language that controls the appearance of the webpage, applying style rules in batches to HTML / DOM elements through class names. In this application, different class names are used to represent different credit approval business statuses, and the visual status of the credit approval business node is switched by adding or removing class names from DOM elements. For example, the activity markers include four types: "Completed," "Processing," "Not Processed," and "Rejected," each corresponding to one of the four node primitive attributes. The node primitive attribute corresponding to the "Processing" activity marker is the first primitive attribute representing "node outline highlighting." If there is a credit approval business node with node ID "001" and its activity identifier is "processing", then when the credit approval business process diagram is displayed subsequently, the "outline" of the credit approval business node with node ID "001" will be "highlighted".

[0058] Step 130: Adjust the size of the credit approval business process diagram and its display position on the canvas container according to the size of the canvas container.

[0059] Specifically, after updating the node element attributes of each credit approval business node in the credit approval business process diagram, the display style of each credit approval business node in the diagram can be determined. Before finally displaying the credit approval business process diagram, it is also necessary to adjust the size of the credit approval business process diagram and its display position within the canvas container according to the size of the canvas container, so that the credit approval business process diagram can be accurately centered in display containers of different sizes.

[0060] In a preferred embodiment, each credit approval business node corresponds to node position coordinates, which include: the minimum horizontal coordinate, the minimum vertical coordinate, the maximum horizontal coordinate, and the maximum vertical coordinate. These four node coordinate values ​​collectively represent the position of a credit approval business node in the credit approval business process diagram. In such a way... Figure 2 In the node coordinate diagram shown, the minimum horizontal coordinate of node A in the credit approval business is 1, the minimum vertical coordinate is 1, the maximum horizontal coordinate is 3.5, and the maximum vertical coordinate is 3; the minimum horizontal coordinate of node B in the credit approval business is 4.5, the minimum vertical coordinate is 1, the maximum horizontal coordinate is 7, and the maximum vertical coordinate is 3; the same applies to other credit approval business nodes in the diagram.

[0061] The process of adjusting the size of the credit approval business process diagram and its display position on the canvas container according to the size of the canvas container includes steps 310-330:

[0062] Step 310: Determine the origin coordinates and rectangle width and height of the credit approval business process diagram based on the coordinates of all nodes in the diagram.

[0063] Specifically, based on the coordinates of all nodes in the credit approval process flowchart, an origin and border range of the flowchart can be determined, with all nodes in the flowchart as the reference point, rather than the canvas container. These two parameters serve as the basis for subsequent adjustments to the position and size of the credit approval process flowchart, allowing users to always focus on the actual credit approval process and improving the visualization experience.

[0064] In a preferred embodiment, the minimum, minimum, maximum, and maximum values ​​of the horizontal and vertical coordinates of the credit approval process flowchart are first determined based on the coordinates of all nodes in the flowchart. For example, the minimum horizontal coordinate of all credit approval process nodes in the flowchart is the minimum horizontal coordinate of the credit approval process flowchart; the same applies to the coordinates of other credit approval process flowcharts. Then, the following three calculations are performed: First, the origin coordinates are obtained based on the minimum and minimum horizontal and vertical coordinates of the credit approval process flowchart. This origin coordinate represents the reference point of the credit approval process flowchart, not the coordinate system of the canvas container. Second, the minimum horizontal coordinate is subtracted from the maximum horizontal coordinate in the credit approval process flowchart to obtain the rectangle width, which represents the width of the credit approval process flowchart. Third, the minimum vertical coordinate is subtracted from the maximum vertical coordinate in the credit approval process flowchart to obtain the rectangle height, which represents the height of the credit approval process flowchart. Figure 2 In the node coordinate diagram shown, the minimum horizontal and vertical coordinates of the credit approval business process diagram are both 1, and the maximum horizontal and vertical coordinates are 14 and 9 respectively. Therefore, the origin coordinates of the credit approval business process diagram are (1,1), the rectangle width is 13, and the rectangle height is 8.

[0065] Step 320: Determine the topological center of the credit approval business process diagram based on the origin coordinates and the width and height values ​​of the rectangle.

[0066] Specifically, this application determines the topological center of the credit approval business process diagram based on the origin coordinates and the width and height values ​​of the rectangle. The topological center of the credit approval business process diagram is the spatial centroid of the entire credit approval business process diagram in the canvas coordinate system, and is the spatial anchor point for subsequent smooth scaling and centering of the credit approval business process diagram.

[0067] In a preferred embodiment, the calculation formula for the topology center of the credit approval business process diagram is as follows: (1)-(2):

[0068] (1);

[0069] (2);

[0070] in, The x-coordinate represents the coordinates of the origin. The ordinate represents the coordinates of the origin. This represents the minimum value on the horizontal axis of the credit approval business process diagram. The width of the rectangle representing the credit approval process flowchart. This represents the minimum value on the vertical axis of the credit approval business process diagram. This represents the height of the rectangle indicating the credit approval process flowchart. Figure 2 The coordinates of the origin of the credit approval business process diagram shown in the node coordinate diagram are... =1、 =1, rectangle width The height of the rectangle is 13. If the value is 8, then the coordinates of the topological center of this credit approval business process diagram are... =5、 =7.5.

[0071] Step 330: Using the topological center of the credit approval business process diagram as the anchor point, scale and center the credit approval business process diagram according to the size of the canvas container.

[0072] Specifically, based on the topology center of the aforementioned credit approval business process diagram and the size of the front-end canvas container, this application smoothly scales and centers the credit approval business process diagram, thereby achieving automatic centering and full-screen alignment of the global credit approval business process diagram.

[0073] In a preferred embodiment, the step of scaling the credit approval business process diagram includes: first, determining the scaling ratio based on the size of the canvas container and the size of the credit approval business process diagram; then, smoothly scaling the credit approval business process diagram using the topological center of the credit approval business process diagram as the anchor point, according to the scaling ratio. During this process, upper and lower scaling limits and margin parameters can also be set to ensure that all credit approval business nodes are fully displayed within the visible area of ​​the canvas container.

[0074] In a preferred embodiment, the step of centering the credit approval business process diagram includes: aligning the topological center of the credit approval business process diagram with the center point of the canvas container, and centering the credit approval business process diagram at the center of the canvas container. During positioning and movement, a smooth animation transition is used to complete the view displacement.

[0075] In a preferred implementation, to ensure the reliability of the scaling and centering in an asynchronous rendering environment, this application further utilizes an exponential backoff method to obtain the canvas container size before scaling and centering the credit approval business process diagram based on the canvas container size. Exponential backoff is a retry strategy where the waiting time increases exponentially after each failure, avoiding system overload caused by frequent retries. Before importing the credit approval business process diagram, an exponential backoff instruction is executed to obtain the canvas container size until a valid canvas container size is obtained. Additionally, an exponential backoff strategy can also be introduced after the scaling operation is completed, repeatedly reading the data in an exponential backoff manner until a valid scaling value is obtained, thus avoiding subsequent calculation errors due to inconsistencies in instantaneous states.

[0076] Step 140: Load the credit approval business process diagram into the canvas container;

[0077] Specifically, after determining the node element attributes of the credit approval business nodes and scaling and centering the credit approval business process diagram, the credit approval business process diagram can be loaded into the canvas container.

[0078] The BPMN-based visualization method for credit approval business processes provided in this application obtains a credit approval business process diagram and credit approval business status data. Based on the credit approval business status data, it updates the node element attributes of each credit approval business node in the credit approval business process diagram. It also adjusts the size of the credit approval business process diagram and its display position within the canvas container according to the canvas container's size. The credit approval business process diagram is then loaded into the canvas container. When the credit approval business status data is updated or the front-end canvas container undergoes size deformation due to window adjustments, this application can automatically trigger automatic centering and full-screen alignment of the global process diagram and simultaneously refresh the status of credit approval business node elements. This achieves dynamic tracking and panoramic adaptation of the credit approval business process, thereby improving user review efficiency and the credit approval business experience.

[0079] In a second aspect, this application also provides a visualization device for a BPMN-based credit approval business process. The visualization device for a BPMN-based credit approval business process provided by this invention will be described below. The visualization device for a BPMN-based credit approval business process described below can be referred to in correspondence with the visualization method for a BPMN-based credit approval business process described above. Figure 4 This is a schematic diagram of the structure of the visualization device for the credit approval business process based on BPMN provided by the present invention, as shown below. Figure 4 As shown, the device includes:

[0080] The acquisition unit 410 is configured to acquire a credit approval business process diagram, which includes at least one credit approval business node, and each credit approval business node has a corresponding node element attribute.

[0081] The element attribute configuration unit 420 is configured to acquire credit approval business status data and update the node element attributes of each credit approval business node in the credit approval business process diagram according to the credit approval business status data.

[0082] The adjustment unit 430 is configured to adjust the size of the credit approval business process diagram and the display position of the credit approval business process diagram in the canvas container according to the size of the canvas container;

[0083] Loading unit 440 is configured to load the credit approval business process diagram into the canvas container.

[0084] The aforementioned BPMN-based visualization device for credit approval business processes implements non-destructive dynamic injection of node primitive attributes and, in conjunction with the visible area of ​​the front-end canvas container, centers and scales the flowchart, ensuring the final display effect of the credit approval business process flowchart. Other preferred embodiments, specific implementations, technical problems solved, and achievable technical effects of the aforementioned BPMN-based visualization device for credit approval business processes all correspond to the BPMN-based visualization method for credit approval business processes and will not be elaborated upon here.

[0085] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. Those skilled in the art can understand and implement this without any creative effort.

[0086] Through the above description of the embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus necessary general-purpose hardware platforms, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solutions, in essence or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods described in the various embodiments or some parts of the embodiments.

[0087] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0088] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A visualization method for credit approval business processes based on BPMN, characterized in that, The method includes: Obtain a credit approval business process diagram, which includes at least one credit approval business node, and each credit approval business node has a corresponding node element attribute. Obtain credit approval business status data, and update the node element attributes of each credit approval business node in the credit approval business process diagram based on the credit approval business status data; Adjust the size of the credit approval business process diagram and its display position on the canvas container according to the size of the canvas container; Load the credit approval business process diagram into the canvas container.

2. The method according to claim 1, characterized in that: Each credit approval business node also has a corresponding node ID; The credit approval business status data includes: node ID and activity identifier; The steps of updating the node element attributes of each credit approval business node in the credit approval business process diagram based on the credit approval business status data include: The activity identifier and the credit approval business node are matched according to the node ID, and the node element attributes of the credit approval business node are updated according to the activity identifier.

3. The method according to claim 2, characterized in that, The node primitive attributes are attached to the document object model of the credit approval business node in the form of Cascading Style Sheet style class names.

4. The method according to claim 1, characterized in that: Each credit approval business node has corresponding node location coordinates; The steps of adjusting the size of the credit approval business process diagram and its display position on the canvas container according to the size of the canvas container include: The origin coordinates and the width and height of the rectangle of the credit approval business process diagram are determined based on the coordinates of all nodes in the diagram. The topological center of the credit approval business process diagram is determined based on the origin coordinates and the width and height values ​​of the rectangle. Using the topological center of the credit approval business process diagram as the anchor point, the credit approval business process diagram is scaled and centered according to the size of the canvas container.

5. The method according to claim 4, characterized in that, The steps for determining the origin coordinates and the width and height of the rectangle in the credit approval business process diagram based on the coordinates of all nodes in the diagram include: The minimum horizontal coordinate, minimum vertical coordinate, maximum horizontal coordinate, and maximum vertical coordinate of the credit approval business process diagram are determined based on the coordinates of all nodes in the diagram. The origin coordinates are obtained based on the minimum values ​​of the horizontal and vertical axes of the credit approval business process diagram. The width of the rectangle is obtained based on the minimum and maximum values ​​of the horizontal coordinates in the credit approval business process diagram. The height of the rectangle is obtained based on the minimum and maximum values ​​of the vertical coordinates in the credit approval business process diagram.

6. The method according to claim 5, characterized in that, The formula for calculating the topology center of the credit approval business process diagram is: ； ； in, The x-coordinate of the origin is represented. The ordinate of the origin is represented by its vertical coordinate. This represents the minimum value of the horizontal axis of the credit approval business process diagram. This represents the width of the rectangle. This represents the minimum value of the vertical axis of the credit approval business process diagram. This represents the height of the rectangle.

7. The method according to claim 4, characterized in that, The steps for scaling the credit approval business process diagram include: The scaling ratio is determined based on the size of the canvas container and the size of the credit approval business process diagram; The credit approval business process diagram is smoothly scaled using the topological center of the diagram as the anchor point according to the scaling ratio.

8. The method according to claim 4, characterized in that, The steps for centering the credit approval business process flowchart include: Align the topological center of the credit approval business process diagram with the center point of the canvas container, and center the credit approval business process diagram at the center of the canvas container.

9. The method according to claim 4, characterized in that, Before scaling and centering the credit approval process diagram according to the size of the canvas container, the method further includes: The size of the canvas container is obtained using the exponential backoff waiting method.

10. A visualization device for credit approval business processes based on BPMN, characterized in that, The device includes: The acquisition unit is configured to acquire a credit approval business process diagram, which includes at least one credit approval business node, and each credit approval business node has a corresponding node element attribute. The element attribute configuration unit is configured to acquire credit approval business status data and update the node element attributes of each credit approval business node in the credit approval business process diagram according to the credit approval business status data. The adjustment unit is configured to adjust the size of the credit approval business process diagram and the display position of the credit approval business process diagram in the canvas container according to the size of the canvas container; The loading unit is configured to load the credit approval business process diagram into the canvas container.

Images