CN117876526A

CN117876526A - Drawing method and device of flow chart, electronic equipment and storage medium

Info

Publication number: CN117876526A
Application number: CN202311676594.3A
Authority: CN
Inventors: 王馨悦; 郑瑞环
Original assignee: Agricultural Bank of China
Current assignee: Agricultural Bank of China
Priority date: 2023-12-07
Filing date: 2023-12-07
Publication date: 2024-04-12

Abstract

The invention discloses a drawing method and device of a flow chart, electronic equipment and a storage medium, wherein the method comprises the following steps: determining an element to be edited based on a flow chart editing operation, and determining an element type corresponding to the element to be edited; wherein the element types include a main body element and a polyline element; determining a target element level based on the element type, and acquiring element attributes corresponding to the element to be edited; determining a target drawing tool corresponding to the target element level, determining a target element based on the target drawing tool and the element attribute, and determining a target flow chart according to the target element. Based on the technical scheme, the drawing tool corresponding to the element type of the element to be edited is obtained, the target element is determined based on the drawing tool and the element attribute, and then the target flow chart is determined based on the target element, so that drawing efficiency of the flow chart is improved.

Description

Drawing method and device of flow chart, electronic equipment and storage medium

Technical Field

The present invention relates to the field of computer technologies, and in particular, to a method and apparatus for drawing a flowchart, an electronic device, and a storage medium.

Background

With the development and progress of technology, the flow chart is used as a visual graphic representation method and is widely applied in various fields. The flow chart can clearly show the relation and sequence among various operation flows, and has important roles in many aspects of research, design, development, management, training and the like.

However, in the conventional flowchart drawing method, the drawing of the flowchart is realized through a fixed flowchart drawing tool, so that a final flowchart file is obtained after the drawing is completed, and the flowchart can be displayed in the webpage after further processing of a developer, so that a large amount of manpower is wasted, and the fixed flowchart drawing tool is excessively relied on.

Disclosure of Invention

The invention provides a drawing method, a drawing device, electronic equipment and a storage medium of a flow chart.

According to an aspect of the present invention, there is provided a drawing method of a flowchart, the method including:

Determining an element to be edited based on a flow chart editing operation, and determining an element type corresponding to the element to be edited; wherein the element types include a main body element and a polyline element;

determining a target element level based on the element type, and acquiring element attributes corresponding to the element to be edited;

determining a target drawing tool corresponding to the target element level, determining a target element based on the target drawing tool and the element attribute, and determining a target flow chart according to the target element.

According to another aspect of the present invention, there is provided a drawing apparatus of a flowchart, the apparatus including:

the element type determining module is used for determining an element to be edited based on the editing operation of the flow chart and determining the element type corresponding to the element to be edited; wherein the element types include a main body element and a polyline element;

the element attribute determining module is used for determining a target element level based on the element type and acquiring element attributes corresponding to the element to be edited;

and the flow chart determining module is used for determining a target drawing tool corresponding to the target element level, determining a target element based on the target drawing tool and the element attribute, and determining a target flow chart according to the target element.

According to another aspect of the present invention, there is provided an electronic apparatus including:

at least one processor; and

a memory communicatively coupled to the at least one processor; wherein,

the memory stores a computer program executable by the at least one processor to enable the at least one processor to perform the drawing method of the flow chart according to any one of the embodiments of the present invention.

According to another aspect of the present invention, there is provided a computer readable storage medium storing computer instructions for causing a processor to implement a method of drawing a flowchart according to any one of the embodiments of the present invention when executed.

According to the technical scheme, the element to be edited is determined based on the flow chart editing operation, the element type corresponding to the element to be edited is determined, the target element level is determined based on the element type, the element attribute corresponding to the element to be edited is acquired, the target drawing tool corresponding to the target element level is further determined, the target element is determined based on the target drawing tool and the element attribute, and the target flow chart is determined according to the target element. Based on the technical scheme, the drawing tool corresponding to the element type of the element to be edited is obtained, the target element is determined based on the drawing tool and the element attribute, and then the target flow chart is determined based on the target element, so that drawing efficiency of the flow chart is improved.

It should be understood that the description in this section is not intended to identify key or critical features of the embodiments of the invention or to delineate the scope of the invention. Other features of the present invention will become apparent from the description that follows.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings required for the description of the embodiments will be briefly described below, and it is apparent that the drawings in the following description are only some embodiments of the present invention, and other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.

Fig. 1 is a flow chart of a drawing method of a flow chart provided in an embodiment of the present invention;

FIG. 2 is a schematic diagram of a flow chart drawing interface provided by an embodiment of the present invention;

FIG. 3 is a flowchart of a method for drawing a flowchart provided in an embodiment of the present invention;

fig. 4 is a block diagram of a drawing apparatus of a flowchart provided in an embodiment of the present invention;

fig. 5 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.

Detailed Description

In order that those skilled in the art will better understand the present invention, a technical solution in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in which it is apparent that the described embodiments are only some embodiments of the present invention, not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the present invention without making any inventive effort, shall fall within the scope of the present invention.

It should be noted that the terms "first," "second," and the like in the description and the claims of the present invention and the above figures are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged where appropriate such that the embodiments of the invention described herein may be implemented in sequences other than those illustrated or otherwise described herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.

Example 1

Fig. 1 is a flow chart of a drawing method of a flow chart provided in an embodiment of the present invention, where the embodiment may be adapted to determine a drawing tool and an element attribute corresponding to an element to be edited, and further determine a target element, and determine a flow chart based on the target element, where the method may be performed by a drawing device of the flow chart, where the drawing device of the flow chart may be implemented in a form of hardware and/or software, and where the drawing device of the flow chart may be configured in an electronic device, where the electronic device may be a terminal device or a server device, and so on.

As shown in fig. 1, the method includes:

s110, determining an element to be edited based on the editing operation of the flow chart, and determining an element type corresponding to the element to be edited.

The flowchart editing operation may be an editing operation that a user adds an element in the flowchart or selects an existing element to issue. An element to be edited may be understood as a flow diagram element within a flow diagram that requires attribute settings. It should be noted that, different types of elements may exist in the flowchart, for example, the elements may be main elements and broken line elements in the flowchart, where the main elements may include each flow node in the flowchart, and may be start-stop nodes, judgment nodes, processing nodes, and so on. The polyline element may be a connection line connecting two flow nodes.

Specifically, the element to be edited is determined based on the editing operation of the flow chart, and the element type corresponding to the element to be edited is determined, for example, the user can select the element as the element to be edited by clicking or touching a graphic element on a screen through a mouse, the system can detect the operation of the user and determine the clicked or touched graphic element, the element type corresponding to the current element to be edited can be determined by acquiring an element identification code corresponding to the element to be edited, further, different editing operation options can be provided for the user based on the elements to be edited of different element types, for example, the width information of the main element and the element identification of the main element can be set for the main element.

On the basis of the technical scheme, the method for determining the element to be edited based on the editing operation of the flow chart comprises the following steps: responding to element triggering operation in a flow chart to be edited, and determining the element to be edited based on the element triggering operation; and/or, in response to a click operation of a preset editing area in the to-be-edited flowchart, displaying an element selection interface corresponding to the click operation, and determining the to-be-edited element based on the element selection interface.

The flow chart to be edited may be a flow chart to be edited, for example, may be an imported external flow chart, or may be a flow chart for new creation. An element triggering operation may be understood as a triggering operation of an element in the flow chart to be edited, for example, may be a clicking operation, etc. The preset editing area may be a preset flowchart drawing area. The element selection interface may be an interface for making an element selection that instructs a user.

Specifically, in response to an element triggering operation in the to-be-edited flowchart, the to-be-edited element is determined based on the element triggering operation, or in response to a clicking operation in a preset editing area in the to-be-edited flowchart, an element selection interface corresponding to the clicking operation is displayed, and the to-be-edited element is determined based on the element selection interface. The method for determining the to-be-edited flowchart may be to determine the to-be-edited flowchart based on the flowchart description file by analyzing the flowchart description file, or may be to newly establish a blank flowchart as the to-be-edited flowchart based on a new operation of the user, and for the to-be-edited flowchart, the user may add the flowchart element by clicking a preset editing area, or may determine the to-be-edited element by triggering an element in the to-be-edited flowchart.

It should be noted that, in the technical solution provided by the present invention, when the flowchart editing interface is displayed for the user, the flowchart editing interface may be displayed as two areas, as shown in fig. 2, which may include a flowchart functional area and a flowchart drawing area, where the preset editing area may be a flowchart drawing area, and the flowchart functional area may provide various flowchart functions for the user, for example, the user may select a flowchart description file to be imported by triggering a "secondary editing" control in the flowchart functional area, or may clear all contents in the current flowchart to be edited by triggering a "redrawing" control in the flowchart functional area. It can be understood that when the user triggers the "second edit" control, after the user selects the flow chart description file to be imported, a file identifier can be extracted from the flow chart description file, based on the file identifier, whether the flow chart description file is a flow chart description file generated by the flow chart drawing method provided by the embodiment of the invention can be determined, if the flow chart description file is determined to be not the flow chart description file generated by the flow chart drawing method provided by the embodiment of the invention based on the file identifier, a corresponding error prompt is displayed, and the user is prompted that the file type is wrong and cannot be resolved correctly by the error prompt.

S120, determining a target element level based on the element type, and acquiring element attributes corresponding to the element to be edited.

The target element level may be understood as a level where the element to be edited is currently located, that is, different element types correspond to different level attributes. The element attribute may be attribute information of the element to be edited currently, for example, may be location information of the element, element identification, element description information, and the like.

Specifically, the target element hierarchy is determined based on the element type, and the element attribute corresponding to the element to be edited is obtained, for example, the element hierarchy corresponding to the element to be edited may be determined based on the element type of the element to be edited, and the element attribute corresponding to the element to be edited may be obtained, for example, after the element to be edited is selected by the current user, the target element hierarchy may be determined according to the element type, and the element attribute editing interface corresponding to the element to be edited is popped up, so that the user may input the element attribute corresponding to the element to be edited through the element attribute editing interface.

On the basis of the technical scheme, before the element attribute corresponding to the element to be edited is acquired, the method further comprises the following steps: obtaining broken line inflection point information corresponding to the element to be edited under the condition that the element type of the element to be edited is a broken line element; and determining a broken line editing page corresponding to the element to be edited based on the broken line inflection point information, and determining the element attribute based on the broken line editing page.

The inflection point of the broken line can be understood as a point of which the direction of the broken line is changed, and the inflection point not only comprises a hanging point of the broken line segment, but also comprises a starting point and a stopping point of the broken line, and the corresponding inflection point information can be the number of inflection points corresponding to the current broken line element and the corresponding inflection point coordinates. The polyline editing interface may be understood as an editing interface for inputting polyline attribute information.

Specifically, when the element type of the element to be edited is a broken line element, broken line inflection point information corresponding to the element to be edited is obtained, and then a broken line editing page corresponding to the element to be edited is determined based on the broken line inflection point information, and element attributes are determined based on the broken line editing page.

It should be noted that, when the element type is a main element, a main element editing interface corresponding to the main element may be displayed for the user, the user may select a type of the main element and a direction of the current main element in the main element editing interface, the type of the main element may include a flow node, a start node, an end node, and a connection manner between adjacent nodes, the connection manner may include unidirectional connection or bidirectional connection, and it may be understood that the connection manner in the main element may only connect two adjacent nodes, and the polyline element may establish a connection relationship between any two nodes in the current flow chart based on a setting of the user.

On the basis of the technical scheme, the determining the target element level based on the element type comprises the following steps: setting a hierarchy attribute of the polyline layer to a first preset value in the case that the element type is a polyline element, so as to determine the target element hierarchy based on the hierarchy attribute value; and setting the hierarchy attribute of the polyline layer to a second preset value under the condition that the element type is a main element, so as to determine the target element hierarchy based on the hierarchy attribute value.

The hierarchy attribute may be understood as an attribute value of a polyline layer, and may be used to determine a target element hierarchy. The polyline layer may be a layer for drawing polyline elements, and the body layer may be a layer for drawing body elements, correspondingly. The first preset value corresponds to the polyline layer. The second preset value corresponds to the main body layer.

Specifically, in the case where the element type is a polyline element, the hierarchy attribute of the polyline layer is set to a first preset value to determine a target element hierarchy based on the hierarchy attribute value, and in the case where the element type is a main body element, the hierarchy attribute of the polyline layer is set to a second preset value to determine the target element hierarchy based on the hierarchy attribute value. It should be noted that, because the technical solution provided in the embodiment of the present invention draws different elements in the flowchart through different drawing tools, canvas may be used to draw the polyline element, and when drawing the polyline, the hierarchy attribute of the polyline layer is set to all, that is, the first preset value, and at this time, the click event of the drawing area can only be captured at the polyline layer. When the body layer is drawn, the attribute value of the polyline level is set to none, i.e., a second preset value. At the moment, the click event penetrates through the polyline layer to be captured by the main drawing body layer and then responds, and then the target element layer corresponding to the element type can be determined by acquiring the layer attribute value of the polyline layer.

On the basis of the technical scheme, the method further comprises the following steps: under the condition that the element type is a broken line element, obtaining inflection point coordinates of the broken line element; and determining a polyline color value corresponding to the polyline element based on the inflection point coordinates and the intermediate layer, and highlighting the polyline element based on the color value.

Wherein an intermediate layer may be understood as a hierarchy for highlighting polyline elements, located between the polyline layer and the subject layer.

Specifically, under the condition that the element type is a broken line element, the inflection point coordinates of the broken line element are obtained, further, a broken line color value corresponding to the broken line element is determined based on the inflection point coordinates and the middle layer, and the broken line element is highlighted based on the color value. For example, when there are multiple broken lines in the drawing area, in order to quickly determine which broken line is selected by the user, an intermediate layer may be added in the hierarchical structure, where the intermediate layer is also implemented by Canvas, and its width and height settings and drawing content are consistent with those of the broken line layer. The unique difference is that each broken line drawn by the layer is filled with different colors, when a user clicks a certain position of the broken line layer, the clicked position is converted into a pixel position in a Canvas, then color value information of the pixel position corresponding to the middle layer is queried, if the color exists, broken line point information of the corresponding broken line is read and displayed in a broken line point editing panel, and filling in red in the broken line layer indicates that the broken line is in a selected state. It should be noted that, the color values corresponding to the middle layer and each broken line element are randomly generated, and only the color values corresponding to the different broken line elements are required to be ensured to be different.

S130, determining a target drawing tool corresponding to the target element level, determining a target element based on the target drawing tool and the element attribute, and determining a target flow chart according to the target element.

The object drawing tool may be understood as a drawing tool for drawing each element in the flowchart, and may be Canvas, VUE, CSS, and the like, for example. The target element may be a rendered element. A target flow chart may be understood as the final flow chart consisting of a plurality of target elements.

Specifically, determining a target drawing tool corresponding to a target element hierarchy, determining a target element based on the target drawing tool and an element attribute, and determining a target flowchart according to the target element, for example, in a flowchart editor, the element may be divided into different hierarchies, such as a top-level element, a primary element, a secondary element, and the like. According to the level of the target element, a corresponding drawing tool can be selected for editing, and after the target drawing tool is determined, the target element can be determined based on the element attribute corresponding to the current element to be edited, which is set by a user, for example, the attribute of the target element such as color, size, font and the like needs to be determined, and after the target element is determined, a target flow chart is determined based on the target element, and it can be understood that the target flow chart is formed by a plurality of target elements, so that the target flow chart at least comprises two target elements.

On the basis of the technical scheme, after the target flow chart is determined according to the target element, the method further comprises the following steps: when an editing completion instruction is detected, acquiring element attribute information and flow chart attribute information of each target element in the target flow chart; a flow chart description file corresponding to the target flow chart is determined based on the element attribute information and the flow chart attribute information.

The editing completion instruction may be understood as instruction information for issuing by triggering the editing completion control. The element attribute information may be an attribute corresponding to each element in the flowchart. Flow chart attribute information may be understood as attribute information for locating a target flow chart. The flowchart description file may be a description file having a specific format for describing positions of elements in the target flowchart and positions of the flowchart display, and may be, for example, a description file in JSON format.

Specifically, after an editing completion instruction is detected, element attribute information and flow chart attribute information of each target element in the target flow chart are obtained, and further, a flow chart description file corresponding to the target flow chart is determined based on the element attribute information and the flow chart attribute information, for example, after the user completes editing of the target flow chart, a "generating" control of a flow chart functional area can be triggered, and after the user triggers the functional control, a flow chart description file containing data required by the current drawing flow chart for back display can be generated.

On the basis of the above technical solution, the obtaining element attribute information and flow chart attribute information of each target element in the target flow chart includes: acquiring a canvas size and a main body element width corresponding to the target flow chart, determining flow chart relative distance information corresponding to the target flow chart, and taking the main body element width, the canvas size and the flow chart relative distance information as the flow chart attribute information; element types corresponding to the target elements are determined, and element attribute information corresponding to the target elements is extracted based on the element types.

The canvas size can be understood as the canvas size of the broken line layer, and the canvas size can be changed along with the drawing operation of a user, namely after the user adds a new main body element, the current canvas size is detected to not contain the new main body element, and the transverse width or the longitudinal length of the canvas can be automatically increased, so that the adjusted canvas can normally contain the flow chart. The width of the main body element can be understood as the width information of each node corresponding to the main body element, and a user can set the width information of the main body element by triggering a 'set width' control in the functional area of the flow chart, and the default width of the main body element is 200px. The relative distance information is distance information between the flowchart and the upper left corner of the flowchart drawing area, for example, the distance information between the start node and the upper left corner of the flowchart drawing area may be distance information between the start node and the upper left corner of the flowchart drawing area, and the click position of the user in the flowchart drawing area when adding the start node is used as the position of the start node, so as to obtain the relative distance information of the target flowchart. The element attribute information may be attribute information corresponding to each target element in the flowchart.

Specifically, the canvas size and the main body element width corresponding to the target flow chart are obtained, the flow chart relative distance information corresponding to the target flow chart is determined, the main body element width, the canvas size and the flow chart relative distance information are used as flow chart attribute information, the element type corresponding to each target element is determined, the element attribute information corresponding to each target element is extracted based on the element type, for example, the element attribute and the flow chart attribute corresponding to the target flow chart are extracted and stored through preset fields, further a flow chart description file corresponding to the target flow chart is generated, the width of each flow chart node in the flow chart is represented through a width field, the width and height in a canvas info field represent canvas sizes, namely canvas sizes of broken line layers, the upper left corner of a main body drawing part in the flow chart represents distance information relative to the upper left corner of a drawing area, and the parameter and the width are used as parameter information required for dynamically calculating the flow chart display size when the flow chart is displayed together.

On the basis of the above technical solution, the extracting element attribute information corresponding to each target element based on the element type includes: under the condition that the element type is a main element, acquiring node attribute information corresponding to a target element; and acquiring the polyline attribute information corresponding to the target element under the condition that the element type is a polyline element.

The node attribute information may be information for representing a related attribute of the current node, for example, the node attribute information includes at least one of a node type, a node identification, a node description, a node identification, and a node location, and the corresponding polyline attribute information may be information for describing an attribute corresponding to the current polyline element, for example, the polyline attribute information includes at least one of polyline inflection point coordinates, polyline directions, polyline description information, and polyline corresponding nodes. It should be noted that, the description information may be text description information corresponding to the current element, for example, may be a processing manner of data, etc., and the user may set the corresponding element description information according to the requirement.

Specifically, under the condition that the element type is a main element, node attribute information corresponding to the target element is acquired, under the condition that the element type is a broken line element, broken line attribute information corresponding to the target element is acquired, for example, element attribute information corresponding to the broken line element is stored through lines fields, and the element attribute information comprises coordinate information of a certain endpoint in the broken line on an x axis and a y axis of a canvas, wherein the coordinate information respectively represents left and top. type represents arrow information of a broken line at the endpoint, tip represents description information of the broken line, and position and distance are used for determining the position of the description information relative to the broken line point. For the first node of each polyline, there will be a startIndex field for recording the start node information corresponding to the polyline. For the last node of each polyline, there will be an endIndex field for recording the end node information corresponding to the polyline. The nodes attribute information corresponding to the main body element is stored through the datas field, the nodes attribute information comprises the categories of flow nodes, double-headed arrows, single-headed arrows, start nodes, end nodes and the like, and the non-broken line part is laid out in a table mode. type represents the type of the node, where point represents the flow node, title represents the description information of the node, id represents the id information of the node, and id information may be used to highlight the node later, row and column represent the location of the node in the table.

Example two

Fig. 3 is a flowchart of a drawing method of a flowchart provided in an embodiment of the present invention, where the drawing method of the flowchart is further optimized based on the foregoing embodiment. The specific implementation manner can be seen in the technical scheme of the embodiment. Wherein, the technical terms identical to or corresponding to the above embodiments are not repeated herein.

It should be noted that, in various application systems related to the flow, the flow chart is shown at the front end, and implementing highlighting the current flow node is one of the basic functions of the system. However, most of the systems show complex business processes, and even if the software is used for drawing the flow chart by specialized flow chart drawing, more manpower and time are required to complete the flow chart drawing. Meanwhile, the current professional flow chart drawing software mostly needs payment to obtain the use authorization, even if the flow chart obtained in the way cannot be directly used for front-end display, the front-end engineer is still required to perform corresponding development to be used for displaying in the webpage, and the process consumes more development manpower, so that the traditional flow chart drawing method needs to be optimized. As shown in fig. 3, the method of the embodiment of the present invention includes:

it should be noted that, the flow chart drawing interface provided in the embodiment of the present invention is divided into an upper part and a lower part, the upper part is a flow chart functional area, and the lower part is a flow chart drawing area, and the same flow chart functional area in the embodiment of the present invention supports four operations, namely: setting width, secondary editing, redrawing and generating. The setting width dynamically sets the width of the flow nodes in the flow chart, the redrawing operation clears the content drawn by the current page, the generating button generates a flow chart description file containing data required by the back display of the current drawing flow chart, the secondary editing button allows a user to select one flow chart description file for importing operation, the imported content is checked to determine whether the imported content is the file generated by the tool, and if so, the corresponding content is drawn in a drawing area of the page and secondary editing is supported by the user. The drawing area is used for drawing the content required by the flow chart, namely: flow nodes, arrows and polylines. Arrows and polylines are required to support the user to draw the corresponding document at the designated location. To simplify the implementation, the solution implements the polyline separately from the other parts. The polyline elements and the corresponding remark documents are drawn by Canvas; the remainder will be completed with VUE and CSS rendering. Thus, the present solution involves operations of drawing type switching and selection.

Determining an element to be edited: specifically, when the element type of the element to be edited is a broken line element, broken line inflection point information corresponding to the element to be edited is obtained, and then a broken line editing page corresponding to the element to be edited is determined based on the broken line inflection point information, and element attributes are determined based on the broken line editing page. It should be noted that, when the element type is a main element, a main element editing interface corresponding to the main element may be displayed for the user, the user may select a type of the main element and a direction of the current main element in the main element editing interface, the type of the main element may include a flow node, a start node, an end node, and a connection manner between adjacent nodes, the connection manner may include unidirectional connection or bidirectional connection, and it may be understood that the connection manner in the main element may only connect two adjacent nodes, and the polyline element may establish a connection relationship between any two nodes in the current flow chart based on a setting of the user.

When clicking any blank area of the drawing area of the flow chart, a corresponding element type selection popup window is popped up at the clicking position, when selecting any drawing node, a node editing window associated with the node is popped up, so that a user completes operations such as deleting, editing and adding the current node based on the window, the frame of the node becomes a theme color to indicate that the node is in a selected state, when clicking the node adding operation, a corresponding operation popup window is popped up, the user is supported to select the type to be added and the adding direction of the adding element relative to the selected node, when the user needs to add a connection relation between adjacent nodes, namely, when the user selects a single arrow and a double arrow, the user is supported to add a corresponding remark file, when the user selects the flow node, the user is required to input a corresponding node name and a node ID value of the node, and the node ID value is used for judging the current flow node when the subsequent flow chart is displayed back. When a plurality of folding lines exist in the drawing area, in order to quickly judge which folding line is selected by a user, a middle layer can be added into the hierarchical structure, the middle layer is also realized by Canvas, and the width and the height of the middle layer are set and the drawing content of the middle layer are consistent with those of the folding line layer. The unique difference is that each broken line drawn by the layer is filled with different colors, when a user clicks a certain position of the broken line layer, the clicked position is converted into a pixel position in a Canvas, then color value information of the pixel position corresponding to the middle layer is queried, if the color exists, broken line point information of the corresponding broken line is read and displayed in a broken line point editing panel, and filling in red in the broken line layer indicates that the broken line is in a selected state. It should be noted that, the color values corresponding to the middle layer and each broken line element are randomly generated, and only the color values corresponding to the different broken line elements are required to be ensured to be different.

Determining an element hierarchy and determining a target element: specifically, determining a target drawing tool corresponding to a target element hierarchy, determining a target element based on the target drawing tool and an element attribute, and determining a target flowchart according to the target element, for example, in a flowchart editor, the element may be divided into different hierarchies, such as a top-level element, a primary element, a secondary element, and the like. According to the level of the target element, a corresponding drawing tool can be selected for editing, and after the target drawing tool is determined, the target element can be determined based on the element attribute corresponding to the current element to be edited, which is set by a user, for example, the attribute of the target element such as color, size, font and the like needs to be determined, and after the target element is determined, a target flow chart is determined based on the target element, and it can be understood that the target flow chart is formed by a plurality of target elements, so that the target flow chart at least comprises two target elements.

Illustratively, when drawing a polyline, the present solution draws a polyline using Canvas and places the polyline layer over the subject layer. At this time, the response hierarchy of the click event is clarified by the pointer-events attribute of the CSS. When drawing of a polyline is started, this attribute value of the polyline level is set to all. At this time, the click event of the drawing area can be captured only at the polyline level. When the subject hierarchy is drawn, this attribute value of the polyline hierarchy is set to none. At this time, the click event will penetrate the polyline layer and be captured by the drawn subject layer and then respond; when drawing the broken line, the monitoring of the clicking event is added to the Canvas, and the corresponding broken line is drawn in sequence according to the clicking sequence of the user. A polyline editor panel may appear that supports the user in dynamically adjusting the specific locations of the various nodes and effecting them in real time. When clicking the "end drawing" control of the panel, the user needs to select the arrow direction required by the fold line and input a corresponding document at the fold line where remarks are required to be displayed.

Determining a target flow chart based on the target elements and generating a flow chart description file: specifically, the element attribute and the flowchart attribute corresponding to the target flowchart may be extracted and stored through preset fields, so as to generate a flowchart description file corresponding to the target flowchart, the width of each flow node in the flowchart is represented by a width field, the canvas size of a canvas, that is, the canvas size of a polyline layer, is represented by a width and a height in a canvas info field, the distance information of the upper left corner of a main drawing part in the flowchart relative to the upper left corner of a drawing area is represented by a position info, and the parameter and the width are taken as parameter information required by dynamically calculating the display size of the flowchart when the flowchart is displayed together. Element attribute information corresponding to the polyline elements is stored through lines fields, and the element attribute information comprises coordinate information of a certain endpoint in the polyline on the x axis and the y axis of the canvas, wherein the coordinate information is represented by left and top. type represents arrow information of a broken line at the endpoint, tip represents description information of the broken line, and position and distance are used for determining the position of the description information relative to the broken line point. For the first node of each polyline, there will be a startIndex field for recording the start node information corresponding to the polyline. For the last node of each polyline, there will be an endIndex field for recording the end node information corresponding to the polyline. The nodes attribute information corresponding to the main body element is stored through the datas field, the nodes attribute information comprises the categories of flow nodes, double-headed arrows, single-headed arrows, start nodes, end nodes and the like, and the non-broken line part is laid out in a table mode. type represents the type of the node, wherein point represents the flow node, title represents the description information of the node, id represents the id information of the node, the id information can be used for highlighting the node later, row and column represent the position of the node in the table, and further, based on the parameters, a flow chart description file corresponding to the target flow can be generated.

It should be noted that after the generation of the description file of the flowchart is completed, in the subsequent flowchart display process, after the dependency package corresponding to the present invention is introduced in the JavaScript file corresponding to the entry file in the front-end item by using the vue method, a global component named GlobalProcess is registered for the flowchart display. The component draws a corresponding flow chart in the front-end page according to the entered flow chart description file information, the current node ID, and the flow chart information. When the component name is the same as the existing component in the project, the user-defined component name is supported to be transmitted when the Vue.use method is used for registration, and further, when the component is used for display, the information recorded in the original flow chart needs to be dynamically corrected. The reason for this is that developers typically perform editing operations of the flow chart on the display, and business personnel typically use notebook computers to view corresponding business flow information on the browser. Only by dynamically modifying the drawing size of the flow chart, the user can be ensured to see the main body part of the flow chart under the condition of not sliding the page, and the user experience is improved. Therefore, the positional information of the broken line portion needs to be corrected according to the actual size after the main body portion is drawn. The modification of each polyline point location information is associated with a positionInfo field and a width field in the description file. When the polyline points are located at the upper and left sides of the drawing main body part, the modification of the position information thereof only needs to consider the positionInfo field. The rest is needed according to the actual rendering condition of the drawing main body part. For example, the width is changed from 200 to 300, at this time, the width value of each node becomes large, and when the number of names of the flow nodes is too large, the flow nodes which originally need to be displayed in two rows may become displayed in one row, so that the height value of the relevant broken line point is affected. Dynamic calculations may not be performed when the canvas size is less different from the body portion width and height.

Example III

Fig. 4 is a block diagram of a drawing device of a flowchart according to an embodiment of the present invention. As shown in fig. 4, the apparatus includes: element type determination module 410, element attribute determination module 420, and flowchart determination module 430.

An element type determining module 410, configured to determine an element to be edited based on a flowchart editing operation, and determine an element type corresponding to the element to be edited; wherein the element types include a main body element and a polyline element;

An element attribute determining module 420, configured to determine a target element level based on the element type, and obtain an element attribute corresponding to the element to be edited;

the flowchart determining module 430 is configured to determine a target drawing tool corresponding to the target element hierarchy, determine a target element based on the target drawing tool and the element attribute, and determine a target flowchart according to the target element.

On the basis of the technical scheme, the element type determining module is used for responding to element triggering operation in a to-be-edited flow chart and determining the to-be-edited element based on the element triggering operation; and/or, in response to a click operation of a preset editing area in the to-be-edited flowchart, displaying an element selection interface corresponding to the click operation, and determining the to-be-edited element based on the element selection interface.

On the basis of the technical scheme, the element attribute determining module comprises an editing page display unit, a display unit and a display unit, wherein the editing page display unit is used for acquiring broken line inflection point information corresponding to the element to be edited under the condition that the element type of the element to be edited is a broken line element before acquiring the element attribute corresponding to the element to be edited; and determining a broken line editing page corresponding to the element to be edited based on the broken line inflection point information, and determining the element attribute based on the broken line editing page.

On the basis of the technical scheme, the element attribute determining module comprises a target level determining unit, wherein the target level determining unit is used for setting the level attribute of the broken line layer to be a first preset value in the case that the element type is a broken line element so as to determine the target element level based on the level attribute value; setting a hierarchy attribute of the polyline layer to a second preset value under the condition that the element type is a main element, so as to determine the target element hierarchy based on the hierarchy attribute value, wherein the first preset value corresponds to the polyline layer; the second preset value corresponds to the main body layer.

On the basis of the technical scheme, the device further comprises: the description file generation module is used for acquiring element attribute information and flow chart attribute information of each target element in the target flow chart after the target flow chart is determined according to the target element and after an editing completion instruction is detected; a flow chart description file corresponding to the target flow chart is determined based on the element attribute information and the flow chart attribute information.

On the basis of the technical scheme, the description file generation module is used for acquiring the canvas size and the main body element width corresponding to the target flow chart, determining flow chart relative distance information corresponding to the target flow chart, and taking the main body element width, the canvas size and the flow chart relative distance information as the flow chart attribute information, wherein the relative distance information is distance information between a flow chart and the upper left corner of a flow chart drawing area; element types corresponding to the target elements are determined, and element attribute information corresponding to the target elements is extracted based on the element types.

On the basis of the technical scheme, the description file generation module is used for acquiring node attribute information corresponding to a target element under the condition that the element type is a main element, wherein the node attribute information comprises at least one of a node type, a node identifier, a node description, a node identifier and a node position; and under the condition that the element type is a broken line element, obtaining broken line attribute information corresponding to the target element, wherein the broken line attribute information comprises at least one of broken line inflection point coordinates, broken line pointing, broken line description information and a broken line corresponding node.

The drawing device of the flow chart provided by the embodiment of the invention can execute the drawing method of the flow chart provided by any embodiment of the invention, and has the corresponding functional modules and beneficial effects of the execution method.

Example IV

Fig. 5 shows a schematic diagram of the structure of an electronic device 10 that may be used to implement an embodiment of the invention. Electronic devices are intended to represent various forms of digital computers, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. Electronic equipment may also represent various forms of mobile devices, such as personal digital processing, cellular telephones, smartphones, wearable devices (e.g., helmets, glasses, watches, etc.), and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be exemplary only, and are not meant to limit implementations of the inventions described and/or claimed herein.

As shown in fig. 5, the electronic device 10 includes at least one processor 11, and a memory, such as a Read Only Memory (ROM) 12, a Random Access Memory (RAM) 13, etc., communicatively connected to the at least one processor 11, in which the memory stores a computer program executable by the at least one processor, and the processor 11 may perform various appropriate actions and processes according to the computer program stored in the Read Only Memory (ROM) 12 or the computer program loaded from the storage unit 18 into the Random Access Memory (RAM) 13. In the RAM 13, various programs and data required for the operation of the electronic device 10 may also be stored. The processor 11, the ROM 12 and the RAM 13 are connected to each other via a bus 14. An input/output (I/O) interface 15 is also connected to bus 14.

Various components in the electronic device 10 are connected to the I/O interface 15, including: an input unit 16 such as a keyboard, a mouse, etc.; an output unit 17 such as various types of displays, speakers, and the like; a storage unit 18 such as a magnetic disk, an optical disk, or the like; and a communication unit 19 such as a network card, modem, wireless communication transceiver, etc. The communication unit 19 allows the electronic device 10 to exchange information/data with other devices via a computer network, such as the internet, and/or various telecommunication networks.

The processor 11 may be a variety of general and/or special purpose processing components having processing and computing capabilities. Some examples of processor 11 include, but are not limited to, a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), various specialized Artificial Intelligence (AI) computing chips, various processors running machine learning model algorithms, digital Signal Processors (DSPs), and any suitable processor, controller, microcontroller, etc. The processor 11 performs the respective methods and processes described above, for example, the drawing method of the flowchart.

In some embodiments, the method of drawing a flowchart may be implemented as a computer program tangibly embodied on a computer-readable storage medium, such as the storage unit 18. In some embodiments, part or all of the computer program may be loaded and/or installed onto the electronic device 10 via the ROM 12 and/or the communication unit 19. When the computer program is loaded into the RAM 13 and executed by the processor 11, one or more steps of the drawing method of the flowchart described above may be performed. Alternatively, in other embodiments, the processor 11 may be configured to perform the method of drawing the flow chart in any other suitable way (e.g. by means of firmware).

Various implementations of the systems and techniques described here above may be implemented in digital electronic circuitry, integrated circuit systems, field Programmable Gate Arrays (FPGAs), application Specific Integrated Circuits (ASICs), application Specific Standard Products (ASSPs), systems On Chip (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs, the one or more computer programs may be executed and/or interpreted on a programmable system including at least one programmable processor, which may be a special purpose or general-purpose programmable processor, that may receive data and instructions from, and transmit data and instructions to, a storage system, at least one input device, and at least one output device.

A computer program for carrying out methods of the present invention may be written in any combination of one or more programming languages. These computer programs may be provided to a processor of a general purpose computer, special purpose computer, or other programmable data processing apparatus, such that the computer programs, when executed by the processor, cause the functions/acts specified in the flowchart and/or block diagram block or blocks to be implemented. The computer program may execute entirely on the machine, partly on the machine, as a stand-alone software package, partly on the machine and partly on a remote machine or entirely on the remote machine or server.

In the context of the present invention, a computer-readable storage medium may be a tangible medium that can contain, or store a computer program for use by or in connection with an instruction execution system, apparatus, or device. The computer readable storage medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. Alternatively, the computer readable storage medium may be a machine readable signal medium. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

To provide for interaction with a user, the systems and techniques described here can be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to a user; and a keyboard and a pointing device (e.g., a mouse or a trackball) through which a user can provide input to the electronic device. Other kinds of devices may also be used to provide for interaction with a user; for example, feedback provided to the user may be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form, including acoustic input, speech input, or tactile input.

The systems and techniques described here can be implemented in a computing system that includes a background component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such background, middleware, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: local Area Networks (LANs), wide Area Networks (WANs), blockchain networks, and the internet.

The computing system may include clients and servers. The client and server are typically remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. The server can be a cloud server, also called a cloud computing server or a cloud host, and is a host product in a cloud computing service system, so that the defects of high management difficulty and weak service expansibility in the traditional physical hosts and VPS service are overcome.

It should be appreciated that various forms of the flows shown above may be used to reorder, add, or delete steps. For example, the steps described in the present invention may be performed in parallel, sequentially, or in a different order, so long as the desired results of the technical solution of the present invention are achieved, and the present invention is not limited herein.

The above embodiments do not limit the scope of the present invention. It will be apparent to those skilled in the art that various modifications, combinations, sub-combinations and alternatives are possible, depending on design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the scope of the present invention.

Claims

1. A method of drawing a flow chart, comprising:

2. The method of claim 1, wherein the determining an element to be edited based on a flow-sheet editing operation comprises:

responding to element triggering operation in a flow chart to be edited, and determining the element to be edited based on the element triggering operation; and/or the number of the groups of groups,

and responding to clicking operation of a preset editing area in the flow chart to be edited, displaying an element selection interface corresponding to the clicking operation, and determining the element to be edited based on the element selection interface.

3. The method of claim 1, further comprising, prior to obtaining the element attribute corresponding to the element to be edited:

obtaining broken line inflection point information corresponding to the element to be edited under the condition that the element type of the element to be edited is a broken line element;

and determining a broken line editing page corresponding to the element to be edited based on the broken line inflection point information, and determining the element attribute based on the broken line editing page.

4. The method of claim 1, wherein the determining a target element level based on the element type comprises:

setting a hierarchy attribute of the polyline layer to a first preset value in the case that the element type is a polyline element, so as to determine the target element hierarchy based on the hierarchy attribute value;

Setting a hierarchy attribute of the polyline layer to a second preset value under the condition that the element type is a main element, so as to determine the target element hierarchy based on the hierarchy attribute value, wherein the first preset value corresponds to the polyline layer; the second preset value corresponds to the main body layer.

5. The method of claim 1, further comprising, after said determining a target flow chart from said target element:

when an editing completion instruction is detected, acquiring element attribute information and flow chart attribute information of each target element in the target flow chart;

a flow chart description file corresponding to the target flow chart is determined based on the element attribute information and the flow chart attribute information.

6. The method according to claim 5, wherein the obtaining element attribute information and flowchart attribute information of each of the target elements in the target flowchart includes:

acquiring a canvas size and a main body element width corresponding to the target flow chart, determining flow chart relative distance information corresponding to the target flow chart, and taking the main body element width, the canvas size and the flow chart relative distance information as flow chart attribute information, wherein the relative distance information is distance information between a flow chart and the upper left corner of a flow chart drawing area;

Element types corresponding to the target elements are determined, and element attribute information corresponding to the target elements is extracted based on the element types.

7. The method according to claim 6, wherein the extracting element attribute information corresponding to each of the target elements based on the element type includes:

acquiring node attribute information corresponding to a target element under the condition that the element type is a main element, wherein the node attribute information comprises at least one of a node type, a node identification, a node description, a node identification and a node position;

and under the condition that the element type is a broken line element, obtaining broken line attribute information corresponding to the target element, wherein the broken line attribute information comprises at least one of broken line inflection point coordinates, broken line pointing, broken line description information and a broken line corresponding node.

8. A drawing apparatus of a flowchart, comprising:

9. An electronic device, the electronic device comprising:

at least one processor; and

a memory communicatively coupled to the at least one processor; wherein,

the memory stores a computer program executable by the at least one processor to enable the at least one processor to perform the method of drawing a flowchart of any one of claims 1-7.

10. A computer readable storage medium storing computer instructions for causing a processor to implement the method of drawing a flow chart according to any one of claims 1-7 when executed.