CN111552898A

CN111552898A - Flowchart drawing method and device based on Html5, computer equipment and storage medium

Info

Publication number: CN111552898A
Application number: CN202010200026.6A
Authority: CN
Inventors: 张勤暘
Original assignee: Ping An Life Insurance Company of China Ltd
Current assignee: Ping An Life Insurance Company of China Ltd
Priority date: 2020-03-19
Filing date: 2020-03-19
Publication date: 2020-08-18

Abstract

The invention discloses a flow chart drawing method, a flow chart drawing device, computer equipment and a storage medium based on Html5, wherein the method comprises the following steps executed by a client: the client receives the drawing information sent by the server in real time through an SSH channel established with the server, analyzes the drawing information to obtain data of a plurality of json structures, and achieves the purpose of rapidly obtaining data for establishing a flow chart from the server, further obtains data entities and logic information for associating the data entities from the data of each json structure, then draws a frame chart corresponding to each data entity in an Html5 canvas through a preset function, establishes vector connection between the frame charts based on the logic information to obtain the flow chart corresponding to the drawing information, achieves rapid drawing of the flow chart through the logic information of the data entities and the Html5 canvas, and improves the drawing efficiency of the flow chart.

Description

Flowchart drawing method and device based on Html5, computer equipment and storage medium

Technical Field

The invention relates to the field of data processing, in particular to a flow chart drawing method and device based on Html5, computer equipment and a storage medium.

Background

In a development environment, a test environment and a production environment, a flow chart/architecture chart/topological graph belongs to the basic basis of links such as system design, operation and maintenance and the like, and plays an important role in various fields of enterprises, particularly the technical field, such as flow display, architecture and the like. Thus, these drawings are typically rendered when needed, and the industry now includes many open source flow diagram rendering tools, such as ProcessOn, NCH ClickCharts Pro, and the like.

However, in implementing the present invention, the inventors have realized that the existing implementations suffer from at least the following problems: at present, flow chart drawing tools in the industry are too bulky and redundant, occupy more resources, are difficult to be directly integrated into projects, and cannot accurately manufacture drawings meeting requirements.

Disclosure of Invention

The embodiment of the invention provides a flow chart drawing method and device based on Html5, computer equipment and a storage medium, so that the flow chart drawing efficiency is improved.

In order to solve the above technical problem, an embodiment of the present application provides a flowchart drawing method based on Html5, including the following steps executed by a server:

when a flow chart drawing request of a client is received, acquiring a data screening condition contained in the flow chart drawing request, and acquiring source data corresponding to the data screening condition from a database;

performing data splicing on the source data to obtain drawing information;

constructing an SSH channel connected with the client based on the Websocket based on a WebSocket technology;

and sending the drawing information to the client based on the SSH channel.

Optionally, the building an SSH channel connected to the WebSocket of the client based on the WebSocket technology includes:

establishing a WebSocket connection with the client, and establishing SSH service by using the WebSocket connection;

loading authentication configuration information of the SSH service, and waiting for a connection request of the client;

when an SSH connection request which is sent by a client and carries authentication information is received, matching the authentication information with the authentication configuration information;

and if the authentication information is successfully matched with the authentication configuration information, responding to the SSH connection request and generating the SSH channel between the client and the SSH connection request.

Optionally, after the drawing information is sent to the client based on the SSH channel, the flowchart drawing method based on Html5 further includes the following steps performed by the server:

if the source data are monitored to be changed, the changed source data are spliced again to obtain updated data;

generating updated drawing information according to the updated data;

and sending the updated drawing information to the client so that the client updates the flow chart according to the updated drawing information.

In order to solve the above technical problem, an embodiment of the present application provides a flowchart drawing method based on Html5, including the following steps performed by a client:

receiving drawing information sent by a server in real time through an SSH channel constructed with the server;

analyzing the drawing information to obtain data of a plurality of json structures, and acquiring data entities and logic information for associating the data entities from the data of each json structure;

drawing a frame graph corresponding to each data entity in an Html5 canvas through a preset function, wherein the frame graph comprises position information and attribute information;

and establishing vector connection between the frame diagrams based on the logic information to obtain a flow chart corresponding to the drawing information.

Optionally, the drawing, by a preset function, a frame diagram corresponding to each data entity in the Html5 canvas includes:

acquiring position information corresponding to each data entity, and extracting a temporary abscissa and a temporary ordinate in the position information;

acquiring a minimum value X1 and a maximum value X2 of the temporary abscissa, and acquiring a minimum value Y1 and a maximum value Y2 of the temporary ordinate;

acquiring initial coordinates (a1, b1), (a2, b1), (a1, b2) and (a2, b2) of 4 vertexes of the Html5 canvas, determining a minimum value a1 and a maximum value a2 of an initial abscissa of the Html5 canvas according to the initial coordinates, and determining a minimum value b1 and a maximum value b2 of an initial ordinate of the Html5 canvas;

determining a minimum value b1 and a maximum value b2 of an initial ordinate, and determining a transverse adjustment ratio and a longitudinal adjustment ratio based on a minimum value Y1 and a maximum value Y2 of the temporary ordinate, a minimum value a1 and a maximum value a2 of the initial abscissa, and a minimum value X1 and a maximum value X2 of the temporary abscissa;

determining target position information corresponding to each data entity according to the transverse adjustment proportion and the longitudinal adjustment proportion;

and drawing the frame diagram on the Html5 canvas according to the target position information.

Optionally, after the vector connection between the frame diagrams is established based on the logic information to obtain the flow diagram corresponding to the drawing information, the method further includes the following steps executed by the client:

monitoring the Html5 canvas in real time;

when detecting that the flowchart in the Html5 canvas is passively updated according to a client event, acquiring the updated flowchart and change information of the updated flowchart;

determining a changed data entity and changed logic information as a source data source to be updated based on the change information;

and sending the source data to be updated to the server side so that the server side updates the data in the database according to the source data to be updated.

In order to solve the above technical problem, an embodiment of the present application further provides an apparatus for drawing a flowchart based on Html5, where the apparatus for drawing a flowchart based on Html5 includes a server, and the server includes:

the data acquisition module is used for acquiring data screening conditions contained in a flow chart drawing request when the flow chart drawing request of a client is received, and acquiring source data corresponding to the data screening conditions from a database;

the data splicing module is used for carrying out data splicing on the source data to obtain drawing information;

the channel construction module is used for constructing an SSH channel based on WebSocket connection and connected with the client based on a WebSocket technology;

and the data transmission module is used for sending the drawing information to the client based on the SSH channel.

In order to solve the technical problem, an embodiment of the present application further provides an Html 5-based flowchart drawing device, where the Html 5-based flowchart drawing device includes a client, and the client includes:

the data receiving module is used for receiving the drawing information sent by the server in real time through an SSH channel constructed with the server;

the data analysis module is used for analyzing the drawing information to obtain data of a plurality of json structures, and acquiring data entities and logic information used for associating the data entities from the data of each json structure;

the graph drawing module is used for drawing a frame graph corresponding to each data entity in an Html5 canvas through a preset function, wherein the frame graph comprises position information and attribute information;

and the graph connection module is used for establishing vector connection between the frame graphs based on the logic information to obtain a flow chart corresponding to the drawing information.

In order to solve the technical problem, an embodiment of the present application further provides a computer device, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and the processor implements the steps of the above flowchart drawing method based on Html5 when executing the computer program.

In order to solve the technical problem, an embodiment of the present application further provides a computer-readable storage medium, where a computer program is stored, and the computer program, when executed by a processor, implements the steps of the above flowchart drawing method based on Html 5.

On one hand, when a server receives a flow chart drawing request from a client, a data screening condition contained in the flow chart drawing request is obtained, source data corresponding to the data screening condition is obtained from a database, the server splices the source data to obtain drawing information, based on a WebSocket technology, the server constructs an SSH channel connected with the client based on a WebSocket, and sends the drawing information to the client based on the SSH channel, and because the SSH channel has the characteristics of one-time communication and long-term real-time interaction, the real-time and rapid data acquisition is realized without authentication before each data transmission, so that the data transmission efficiency is improved, and on the other hand, the client receives the drawing information sent by the server in real time through the SSH channel constructed with the server, the drawing information is analyzed to obtain data of a plurality of json structures, data for constructing the flow chart are rapidly obtained from the server side, the data entities and logic information for associating the data entities are further obtained from the data of each json structure, the frame chart corresponding to each data entity is drawn in the Html5 canvas through a preset function, vector connection between the frame charts is established based on the logic information, the flow chart corresponding to the drawing information is obtained, the flow chart is rapidly drawn through the logic information of the data entities and the Html5 canvas, and the drawing efficiency of the flow chart is improved.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings needed to be used in the description of the embodiments of the present invention will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art that other drawings can be obtained according to these drawings without inventive labor.

FIG. 1 is an exemplary system architecture diagram in which the present application may be applied;

FIG. 2 is a flow diagram of one embodiment of an Html 5-based flow chart rendering method of the present application;

FIG. 3 is a schematic block diagram of one embodiment of an apparatus for mapping a flow chart based on Html5 according to the present application;

FIG. 4 is a schematic block diagram of one embodiment of a computer device according to the present application.

Detailed Description

Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs; the terminology used in the description of the application herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "including" and "having," and any variations thereof, in the description and claims of this application and the description of the above figures are intended to cover non-exclusive inclusions. The terms "first," "second," and the like in the description and claims of this application or in the above-described drawings are used for distinguishing between different objects and not for describing a particular order.

Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the application. The appearances of the phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. It is explicitly and implicitly understood by one skilled in the art that the embodiments described herein can be combined with other embodiments.

The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are some, not all, embodiments of the present invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.

Referring to fig. 1, as shown in fig. 1, a system architecture 100 may include

terminal devices

101, 102, 103, a network 104 and a server 105. The network 104 serves as a medium for providing communication links between the

terminal devices

101, 102, 103 and the server 105. Network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, to name a few.

The user may use the

terminal devices

101, 102, 103 to interact with the server 105 via the network 104 to receive or send messages or the like.

The

terminal devices

101, 102, 103 may be various electronic devices having display screens and supporting web browsing, including but not limited to smart phones, tablet computers, E-book readers, MP3 players (Moving Picture E interface displays a properties Group Audio Layer III, mpeg compression standard Audio Layer 3), MP4 players (Moving Picture E interface displays a properties Group Audio Layer IV, mpeg compression standard Audio Layer 4), laptop and desktop computers, and the like.

The server 105 may be a server providing various services, such as a background server providing support for pages displayed on the

terminal devices

101, 102, 103.

It should be noted that the flowchart drawing method based on Html5 provided by the embodiment of the present application is executed by a server and a client (terminal device).

It should be understood that the number of terminal devices, networks, and servers in fig. 1 is merely illustrative. Any number of terminal devices, networks and servers may be provided according to implementation needs, and the

terminal devices

101, 102 and 103 in this embodiment may specifically correspond to an application system in actual production.

The flowchart drawing method based on Html5 in the embodiment of the application specifically includes the following steps executed by the server:

performing data splicing on the source data to obtain drawing information;

constructing an SSH channel connected with a client based on WebSocket based on a WebSocket technology;

and sending the drawing information to the client based on the SSH channel.

The flowchart drawing method based on Html5 in the embodiment of the application specifically includes the following steps executed by the client:

Referring to fig. 2, fig. 2 shows a flowchart drawing method based on Html5 according to an embodiment of the present invention, which is detailed as follows:

s201: when receiving a flow chart drawing request from a client, a server acquires data screening conditions contained in the flow chart drawing request, and acquires source data corresponding to the data screening conditions from a database.

Specifically, after a user at a client clicks a drawing button of a browser at the client, the client sends a drawing request of a flow chart to a server, the server receives the request through a network transmission protocol, acquires a flow chart drawing requirement contained in the request, and selects corresponding source data from a database at the server according to the flow chart drawing requirement.

It should be noted that the flow chart in this embodiment may specifically refer to an architecture diagram, a topology diagram, a data flow diagram, a framework diagram, and the like, which are involved in the links of system design, operation, and maintenance, and the like, and the specific type and efficacy may be determined according to the actual situation, which should not be limited too much here.

Wherein the source data includes but is not limited to: data entities, logical information, etc.

Wherein, the data entity refers to a storage object in a database table.

The logical information may specifically be association information between the storage objects, for example, the data object a belongs to the data object B; alternatively, the logical information may also be constraint information for the storage object, for example, the range of the data object C is (C1, C2), and for example, the type of the data object D is a double floating point type.

It should be noted that the data entity and the logic information are both stored in the data table, and the field is determined to belong to the data entity or the logic information according to the field name of the data table.

Network transport protocols include, but are not limited to: internet Control Message Protocol (ICMP), Address Resolution Protocol (ARP), File Transfer Protocol (FTP), and the like.

S202: and the server performs data splicing on the source data to obtain drawing information.

Specifically, after the acquired source data is obtained, data splicing is required to be performed so as to send drawing information obtained by splicing a plurality of source data to the client, and the specific process is to integrate data with the same or similar types and establish association between the data to obtain drawing information used for drawing the flow chart.

In this embodiment, data splicing may be implemented by Ajax technology or dynamic sql.

S203: based on the WebSocket technology, the server side constructs an SSH channel connected with the client side based on the Websocket.

The WebSocket is a protocol for performing full-duplex communication on a single TCP connection, so that data exchange between a client and a server is simpler, and the server is allowed to actively push data to the client. In WebSocketAPI, the browser and the server only need to complete one handshake, and the browser and the server can directly establish persistent connection and perform bidirectional data transmission, so that the problem that the server frequently sends requests to the client and wastes resources is avoided.

In this embodiment, a full-duplex communication protocol is established by using WebSocket, so that a client and a server are continuously connected, and after data of the server or the client is updated, the other end is rapidly updated in real time through the duplex communication protocol.

S204: and the server side sends the drawing information to the client side based on the SSH channel.

Specifically, the server sends the drawing information obtained in step S203 to the client through a network transport protocol based on the SSH channel.

S205: and the client receives the drawing information sent by the server in real time through an SSH channel constructed with the server.

Specifically, the client sends the receiving drawing information to the real-time server through a network transmission protocol.

S206: the client analyzes the drawing information to obtain data of a plurality of json structures, and acquires the data entity and logic information for associating the data entity from the data of each json structure.

Specifically, the client analyzes the drawing information to obtain data of a plurality of json structures, and then obtains data entities contained in each json structure data and logic information used for representing association between the data entities in a regular matching manner.

Json (JavaScript Object Notation) is a lightweight data exchange format. The method is based on a subset of ECMAScript (js specification established by European computer Association), a text format completely independent of a programming language is adopted to store and represent data, and json is adopted to perform data conversion and analysis in the embodiment, so that the data conversion speed can be increased, and the drawing efficiency of the flow chart can be improved.

Further, the data entity and the logic information for associating the data entity are obtained from the data of each json structure, and may be specifically performed in a manner of performing regular matching through a regular expression.

S207: and the client draws a frame graph corresponding to each data entity in an Html5 canvas through a preset function, wherein the frame graph comprises position information and attribute information.

Specifically, the client draws a frame diagram corresponding to each data entity in the Html5 canvas through a preset function.

HTML5(HyperText Markup Language5, H5) is a fifth major modified standard of the HyperText Markup Language (HTML) applied under the standard universal Markup Language, the core Language of the world wide web. The HTML5 not only provides multimedia support function on the mobile device, but also enables the web page APP developed based on the HTML5 to have shorter start time and faster networking speed.

Where the Canvas element (Canvas) is rendered pixel by pixel at HTML5 by drawing a 2D or 3D image on the webpage using JavaScript.

It should be noted that, when there are many data entities, the information configured in the current page cannot accommodate drawing of the position information of each data entity, that is, when each data entity cannot be drawn on one page, a dynamic page adaptation manner is adopted to draw a corresponding frame map for the data entity.

The preset function is set according to an actually required function, and is not limited herein.

In this embodiment, a plurality of frame diagram instances are stored in advance in the Canvas, a corresponding relationship exists between the identification information in the data entity and the frame diagram instances, and the frame diagram corresponding to the data entity is generated in the HTML5 by the preset function according to the corresponding relationship.

S208: and the client establishes vector connection between the frame graphs based on the logic information to obtain a flow chart corresponding to the drawing information.

Specifically, according to the association between the logic information and the data entity, the logic information is adopted to perform vector connection on the frame diagram represented by the data entity, and a flow diagram corresponding to the drawing information is obtained.

In this embodiment, different data flow orders exist between the frame diagrams represented by different data entities, for example, if the data N is data having a certain characteristic in the data M, a change in the data M may affect the data N, and in a normal case, a change in the data N does not affect the data M, so that a vector connection from the data M to the data N is generated.

Furthermore, a preset online browsing plug-in is adopted to display the flow chart, so that the flow chart can be directly browsed on different types of equipment.

Specifically, on some mobile intelligent devices, the flow chart in the current format cannot be directly analyzed, so that under normal conditions, the flow chart cannot realize cross-platform.

The online browsing plug-in is a plug-in used for analyzing the generated flow chart, so that the flow chart can be displayed on different devices.

In this embodiment, on one hand, when receiving a flow chart drawing request from a client, a server acquires a data filtering condition included in the flow chart drawing request and acquires source data corresponding to the data filtering condition from a database, and the server performs data splicing on the source data to obtain drawing information, based on the WebSocket technology, the server constructs an SSH channel connected to the client based on a WebSocket, and the server sends the drawing information to the client based on the SSH channel, and since the SSH channel has the characteristics of one-time communication and long-term real-time interaction, the server realizes real-time and fast acquisition of data without authentication before each data transmission, thereby improving the efficiency of data transmission, and on the other hand, the client receives the drawing information sent by the server in real time through the SSH channel constructed with the server and analyzes the drawing information to obtain data of a plurality of json structures, the data used for building the flow chart is rapidly acquired from the server side, the data entities and the logic information used for correlating the data entities are further acquired from the data of each json structure, the frame diagrams corresponding to the data entities are drawn in the Html5 canvas through a preset function, vector connection between the frame diagrams is established based on the logic information, the flow chart corresponding to the drawing information is obtained, the flow chart is rapidly drawn through the logic information of the data entities and the Html5 canvas, and the drawing efficiency of the flow chart is improved.

In some optional implementation manners of this embodiment, step S203 is applied to the server, and based on the WebSocket technology, the server constructing the SSH channel connected to the client based on the WebSocket includes:

establishing a WebSocket connection with a client, and establishing an SSH service by using the WebSocket connection;

loading authentication configuration information of the SSH service, and waiting for a connection request of a client;

when an SSH connection request which is sent by a client and carries authentication information is received, matching the authentication information with authentication configuration information;

and if the authentication information is successfully matched with the authentication configuration information, responding to the SSH connection request and generating an SSH channel between the client and the client.

Wherein, SSH is an abbreviation of Secure Shell, also called Secure Shell protocol, and is formulated by Network Group of IETF (Network Working Group); SSH is a security protocol built on an application layer basis. SSH is a relatively reliable protocol that is dedicated to providing security for telnet sessions and other web services. The SSH protocol can effectively prevent the problem of information leakage in the remote management process.

In the embodiment, the SSH service is established by using the WebSocket connection, so that a long-lasting long-connection SSH channel is realized, authentication is not required each time during data transmission, and the safety and the efficiency of the data transmission are improved.

In this embodiment, through the mode of constructing the SSH channel, one-time handshake and long-term connection are realized, and it is avoided that the request verification is required for each data transmission, which is beneficial to improving the efficiency of data transmission.

In some optional implementations of the present embodiment, after step S208, the flowchart drawing method based on Html5 further includes the following steps performed by the server:

generating updated drawing information according to the updated data;

Specifically, the server monitors data of the database in real time, when the source data changes, re-splices the changed part of the source data to obtain updated data, generates drawing information corresponding to the part of the updated data, and sends the drawing information to the client, and the client updates the flow chart after receiving the drawing information corresponding to the updated data.

In the embodiment, when the source data change is monitored, the flow chart is updated in real time according to the changed information, so that the timeliness and the accuracy of updating the flow chart are ensured.

In some optional implementations of this embodiment, in step S207, drawing, through a preset function, a frame diagram corresponding to each data entity in the Html5 canvas includes:

acquiring a minimum value X1 and a maximum value X2 of a temporary abscissa, and acquiring a minimum value Y1 and a maximum value Y2 of a temporary ordinate;

determining a minimum value b1 and a maximum value b2 of an initial ordinate based on a minimum value X1 and a maximum value X2 of a temporary abscissa, a minimum value Y1 and a maximum value Y2 of a temporary ordinate, a minimum value a1 and a maximum value a2 of an initial abscissa, and determining a lateral adjustment ratio and a longitudinal adjustment ratio;

Specifically, the size of the Html5 canvas is usually preset, and when there are more data entities or there is a large difference in the data entity position information, there is a case that the Html5 canvas cannot be completely displayed, or when there are fewer data entities and there is a small difference in the data entity position information, there is a case that only a very small portion of the Html5 canvas is displayed, so that the embodiment compares the data entities with the Html5 canvas, and determines the adjustment ratio of the data entities, so that the finally generated skeleton map is clearly displayed on the Html5 canvas.

In this embodiment, the position information of the data entity and the coordinate information of the drawing board are acquired, the adjustment proportion is determined, the data entity is adjusted and then is put on the drawing board, the frame diagram is drawn, and the drawing robustness of the frame diagram is ensured.

In some optional implementations of the present embodiment, after step S208, the flowchart drawing method based on Html5 further includes the following steps performed by the client:

monitoring the Html5 canvas in real time;

when detecting that the flowchart in the Html5 canvas is passively updated according to the client event, acquiring the updated flowchart and the change information of the updated flowchart;

and sending the source data to be updated to the server so that the server updates the data in the database according to the source data to be updated.

Specifically, after a drawn flow chart is displayed through Html5, a client monitors an Html5 canvas in real time, when a client user operates an Html5 page through an attached tool of the Html5 page, a corresponding client event is generated, so that the flow chart in the Html5 canvas is changed, at this time, the updated flow chart and change information corresponding to the updated flow chart are obtained, and a changed data entity and changed logic information are determined as a source data source to be updated based on the change information and are further synchronized to a server, so that consistency between the data source in a server database and Html5 page data is ensured.

In this embodiment, the client monitors the Html5 canvas in real time, and when the flowchart in the Html5 canvas is passively updated according to the client event, the updated information is acquired and synchronized to the server, so that the consistency of data is realized, the graphical interface operation of the client is facilitated, and the data of the server is quickly and efficiently modified.

It should be understood that, the sequence numbers of the steps in the foregoing embodiments do not imply an execution sequence, and the execution sequence of each process should be determined by its function and inherent logic, and should not constitute any limitation to the implementation process of the embodiments of the present invention.

Referring to fig. 3, fig. 3 is a schematic block diagram of an Html 5-based flowchart drawing apparatus, which corresponds to the Html 5-based flowchart drawing method according to the above-described embodiment one to one. As shown in fig. 3, the flowchart drawing apparatus based on Html5 includes a server, and the server includes a data obtaining module 311, a data splicing module 312, a channel constructing module 313, and a data transmitting module 314. The functional modules are explained in detail as follows:

the data obtaining module 311 is configured to, when receiving a flow chart drawing request from a client, obtain a data screening condition included in the flow chart drawing request, and obtain source data corresponding to the data screening condition from a database;

a data splicing module 312, configured to splice data of the source data to obtain drawing information;

the channel construction module 313 is used for constructing an SSH channel based on Websocket connection with the client based on the WebSocket technology;

and the data transmission module 314 is configured to send the drawing information to the client based on the SSH channel.

Further, the channel building block 313 includes:

the service building unit is used for building WebSocket connection with the client and building SSH service by using the WebSocket connection;

the authentication configuration unit is used for loading authentication configuration information of the SSH service and waiting for a connection request of a client;

the authentication matching unit is used for matching the authentication information with the authentication configuration information when receiving an SSH connection request which is sent by the client and carries the authentication information;

and the channel generation unit is used for responding to the SSH connection request and generating an SSH channel between the client and the client if the authentication information is successfully matched with the authentication configuration information.

Further, the server also includes:

the data updating module is used for splicing the changed source data again to obtain updated data if the source data is monitored to be changed;

the redrawing module is used for generating updated drawing information according to the updated data;

and the update data synchronization module is used for sending the update drawing information to the client so that the client updates the flow chart according to the update drawing information.

Referring to fig. 3, as shown in fig. 3, the flowchart drawing apparatus based on Html5 includes a client, and the client includes a data receiving module 321, a data parsing module 322, a graph drawing module 323, and a graph connecting module 324. The functional modules are explained in detail as follows:

the data receiving module 321 is configured to receive, in real time, drawing information sent by the server through an SSH channel established with the server;

the data analysis module 322 is configured to analyze the drawing information to obtain data of a plurality of json structures, and obtain a data entity and logic information for associating the data entity from the data of each json structure;

the graph drawing module 323 is used for drawing a frame map corresponding to each data entity in an Html5 canvas through a preset function, wherein the frame map comprises position information and attribute information;

and the graph connection module 324 is configured to establish vector connection between the frame graphs based on the logic information, so as to obtain a flowchart corresponding to the drawing information.

Further, the graphic drawing module 323 includes:

the position information acquisition unit is used for acquiring position information corresponding to each data entity and extracting a temporary abscissa and a temporary ordinate in the position information;

a temporary coordinate acquisition unit for acquiring a minimum value X1 and a maximum value X2 of a temporary abscissa, and acquiring a minimum value Y1 and a maximum value Y2 of a temporary ordinate;

an initial coordinate acquiring unit for acquiring initial coordinates (a1, b1), (a2, b1), (a1, b2) and (a2, b2) of 4 vertices of the Html5 canvas, determining a minimum value a1 and a maximum value a2 of an initial abscissa of the Html5 canvas according to the initial coordinates, and determining a minimum value b1 and a maximum value b2 of an initial ordinate of the Html5 canvas;

an adjustment ratio determination unit for determining a minimum value b1 and a maximum value b2 of the initial abscissa, and determining a lateral adjustment ratio and a longitudinal adjustment ratio, based on the minimum value X1 and the maximum value X2 of the temporary abscissa, the minimum value Y1 and the maximum value Y2 of the temporary ordinate, the minimum value a1 and the maximum value a2 of the initial abscissa;

the target position determining unit is used for determining target position information corresponding to each data entity according to the transverse adjustment proportion and the longitudinal adjustment proportion;

and the graph drawing unit is used for drawing the frame graph on the Html5 canvas according to the target position information.

Further, the client further comprises:

the real-time monitoring module is used for monitoring the Html5 canvas in real time;

the updating data acquisition module is used for acquiring the updated flow chart and the change information of the updated flow chart when detecting that the flow chart in the Html5 canvas is passively updated according to the client event;

the updating data analysis module is used for determining changed data entities and changed logic information based on the change information and taking the changed data entities and the changed logic information as source data sources to be updated;

and the update data transmission module is used for sending the source data to be updated to the server so that the server updates the data in the database according to the source data to be updated.

For specific limitations of the flowchart drawing apparatus based on Html5, reference may be made to the above limitations of the flowchart drawing method based on Html5, and details thereof are not repeated here. The various modules in the above flowchart based Html5 apparatus may be implemented in whole or in part by software, hardware, and combinations thereof. The modules can be embedded in a hardware form or independent from a processor in the computer device, and can also be stored in a memory in the computer device in a software form, so that the processor can call and execute operations corresponding to the modules.

In order to solve the technical problem, an embodiment of the present application further provides a computer device. Referring to fig. 4, fig. 4 is a block diagram of a basic structure of a computer device according to the present embodiment.

The computer device 4 comprises a memory 41, a processor 42, a network interface 43 communicatively connected to each other via a system bus. It is noted that only the computer device 4 having the components connection memory 41, processor 42, network interface 43 is shown, but it is understood that not all of the shown components are required to be implemented, and that more or fewer components may be implemented instead. As will be understood by those skilled in the art, the computer device is a device capable of automatically performing numerical calculation and/or information processing according to a preset or stored instruction, and the hardware includes, but is not limited to, a microprocessor, an Application Specific Integrated Circuit (ASIC), a Programmable Gate Array (FPGA), a Digital Signal Processor (DSP), an embedded device, and the like.

The computer device can be a desktop computer, a notebook, a palm computer, a cloud server and other computing devices. The computer equipment can carry out man-machine interaction with a user through a keyboard, a mouse, a remote controller, a touch panel or voice control equipment and the like.

The memory 41 includes at least one type of readable storage medium including a flash memory, a hard disk, a multimedia card, a card-type memory (e.g., SD or D interface display memory, etc.), a Random Access Memory (RAM), a Static Random Access Memory (SRAM), a Read Only Memory (ROM), an Electrically Erasable Programmable Read Only Memory (EEPROM), a Programmable Read Only Memory (PROM), a magnetic memory, a magnetic disk, an optical disk, etc. In some embodiments, the memory 41 may be an internal storage unit of the computer device 4, such as a hard disk or a memory of the computer device 4. In other embodiments, the memory 41 may also be an external storage device of the computer device 4, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like, which are provided on the computer device 4. Of course, the memory 41 may also include both internal and external storage devices of the computer device 4. In this embodiment, the memory 41 is generally used for storing an operating system installed in the computer device 4 and various types of application software, such as program codes for controlling electronic files. Further, the memory 41 may also be used to temporarily store various types of data that have been output or are to be output.

The processor 42 may be a Central Processing Unit (CPU), controller, microcontroller, microprocessor, or other data Processing chip in some embodiments. The processor 42 is typically used to control the overall operation of the computer device 4. In this embodiment, the processor 42 is configured to execute the program code stored in the memory 41 or process data, such as program code for executing control of an electronic file.

The network interface 43 may comprise a wireless network interface or a wired network interface, and the network interface 43 is generally used for establishing communication connection between the computer device 4 and other electronic devices.

The present application further provides another embodiment, which is to provide a computer readable storage medium storing an interface display program, which is executable by at least one processor to cause the at least one processor to perform the steps of the Html 5-based flowchart drawing method as described above.

Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better implementation manner. Based on such understanding, the technical solutions of the present application may be embodied in the form of a software product, which is stored in a storage medium (such as ROM/RAM, magnetic disk, optical disk) and includes instructions for enabling a terminal device (such as a mobile phone, a computer, a server, an air conditioner, or a network device) to execute the method according to the embodiments of the present application.

It is to be understood that the above-described embodiments are merely illustrative of some, but not restrictive, of the broad invention, and that the appended drawings illustrate preferred embodiments of the invention and do not limit the scope of the invention. This application is capable of embodiments in many different forms and is provided for the purpose of enabling a thorough understanding of the disclosure of the application. Although the present application has been described in detail with reference to the foregoing embodiments, it will be apparent to one skilled in the art that the present application may be practiced without modification or with equivalents of some of the features described in the foregoing embodiments. All equivalent structures made by using the contents of the specification and the drawings of the present application are directly or indirectly applied to other related technical fields and are within the protection scope of the present application.

Claims

1. An Html 5-based flow chart drawing method is characterized in that the Html 5-based flow chart drawing method comprises the following steps executed by a server side:

performing data splicing on the source data to obtain drawing information;

and sending the drawing information to the client based on the SSH channel.

2. The Html 5-based flowchart drawing method of claim 1, wherein the WebSocket-based technology, constructing the SSH channel based on the WebSocket connection with the client, comprises:

3. The Html 5-based flowchart rendering method according to claim 1 or 2, wherein after the sending of the rendering information to the client based on the SSH channel, the Html 5-based flowchart rendering method further comprises the following steps performed by a server:

generating updated drawing information according to the updated data;

4. An Html 5-based flow chart drawing method, characterized in that the Html 5-based flow chart drawing method comprises the following steps executed by a client:

5. The Html 5-based flow chart drawing method of claim 4, wherein the drawing the frame chart corresponding to each data entity in the Html5 canvas through a preset function comprises:

6. The Html 5-based flowchart drawing method according to claim 4 or 5, wherein after the vector connection between the frame graphs is established based on the logic information to obtain the flowchart corresponding to the drawing information, the method further includes the following steps executed by the client:

monitoring the Html5 canvas in real time;

7. An Html 5-based flowchart drawing device, wherein the Html 5-based flowchart drawing device comprises a server side, and the server side comprises:

8. An Html 5-based flowchart drawing device, wherein the Html 5-based flowchart drawing device comprises a client, and the client comprises:

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the Html 5-based flowchart rendering method according to any one of claims 1 to 3 when executing the computer program, or implements the Html 5-based flowchart rendering method according to any one of claims 4 to 6 when executing the computer program.

10. A computer-readable storage medium, in which a computer program is stored, which, when being executed by a processor, implements the Html 5-based flowchart rendering method according to any one of claims 1 to 3, or which, when being executed by a processor, implements the Html 5-based flowchart rendering method according to any one of claims 4 to 6.