CN113268241B - Html 5-based flow chart automatic layout method - Google Patents

Html 5-based flow chart automatic layout method Download PDF

Info

Publication number
CN113268241B
CN113268241B CN202110816374.0A CN202110816374A CN113268241B CN 113268241 B CN113268241 B CN 113268241B CN 202110816374 A CN202110816374 A CN 202110816374A CN 113268241 B CN113268241 B CN 113268241B
Authority
CN
China
Prior art keywords
nodes
flow chart
node
html
data structure
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202110816374.0A
Other languages
Chinese (zh)
Other versions
CN113268241A (en
Inventor
戚付涛
张�林
刘启铨
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Whale Cloud Technology Co Ltd
Original Assignee
Whale Cloud Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Whale Cloud Technology Co Ltd filed Critical Whale Cloud Technology Co Ltd
Priority to CN202110816374.0A priority Critical patent/CN113268241B/en
Publication of CN113268241A publication Critical patent/CN113268241A/en
Application granted granted Critical
Publication of CN113268241B publication Critical patent/CN113268241B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/31—Programming languages or programming paradigms
    • G06F8/315—Object-oriented languages

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Computing Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Document Processing Apparatus (AREA)

Abstract

The invention discloses an html 5-based flow chart automatic layout method, which comprises the following steps: s1, dividing nodes in the flow chart; s2, setting a plus button between adjacent nodes, and selecting a node needing to be newly added by clicking the plus button; s3, generating a corresponding JS object numbered musical notation data structure by the program code through the clicked plus button position, and finishing adding of the newly added node; s4, executing codes according to the generated JS object numbered musical notation data structure, and creating a hypertext markup language structure; and S5, setting the styles of all nodes by adopting a cascading style sheet. Has the advantages that: when the flow chart is drawn, the method is simple to realize, the method can be realized only by html tags and styles, and the specific coordinate position of each node does not need to be accurately calculated like canvas or svg, so that the drawing efficiency is effectively improved.

Description

Html 5-based flow chart automatic layout method
Technical Field
The invention relates to the technical field of internet, in particular to an automatic flow chart layout method based on html 5.
Background
In a development environment, a test environment and a production environment, a flow chart, an architecture chart and a topological graph belong to basic bases of links such as system design, operation and maintenance and the like, and play an important role in various fields of enterprises, particularly in the technical field, such as flow display, architecture and the like; therefore, these drawings are generally drawn when necessary, wherein HTML5 (Hyper Text Markup Language 5) is a Language description way for constructing Web content and a Language way for constructing and presenting internet content; is considered as one of core technologies of the internet; the method is widely applied to the development of Internet application. The flow chart symbols are specially used for drawing, no matter what symbols need to be defined, the definition action is finished by a maker, and the work is finished without defining what symbols represent first, but after the organization structure or the operation flow center is provided with a plurality of symbols, classification is carried out, and different symbols are adopted for distinguishing according to the classification.
The prior technical scheme generally draws a flow chart in a manual layout mode, arranges the positions of nodes of the flow chart in a manual dragging mode, and arranges the connection lines among the nodes in a manual connection mode, so that the limitation of the manual layout is large, the layout arrangement is disordered, and when the layout is complicated, the layout needs to be continuously manually adjusted to prevent the nodes from covering each other and the connection lines from crossing; in addition, a scene that nodes are nested with each other may exist, when a for loop node is defined, the for loop node may be nested with a scene of a for loop node, and at this time, a manual layout cannot be expressed, so that it is necessary to design an automatic layout method based on html 5.
An effective solution to the problems in the related art has not been proposed yet.
Disclosure of Invention
Aiming at the problems in the related art, the invention provides an html 5-based automatic layout method for a flow chart, so as to overcome the technical problems in the prior related art.
Therefore, the invention adopts the following specific technical scheme:
an html 5-based automatic layout method for a flow chart, comprising the following steps:
s1, dividing nodes in the flow chart;
s2, setting a plus button between adjacent nodes, and selecting a node needing to be newly added by clicking the plus button;
s3, generating a corresponding JS object numbered musical notation data structure by the program code through the clicked plus button position, and finishing adding of the newly added node;
s4, executing codes according to the generated JS object numbered musical notation data structure, and creating a hypertext markup language structure;
and S5, setting the styles of all nodes by adopting a cascading style sheet.
Further, the dividing of the nodes in the flowchart in S1 includes dividing the nodes in the flowchart into one or more of a communication, a client action, a server action, an if statement, a verification event, a switch statement, a loop statement, a load statement, a destination address, and a JS.
Further, in the JS object numbered musical notation data structure, a conditional node is adopted to represent the branch of the if statement node.
Furthermore, in the JS object numbered musical notation data structure, a loop body of the loop statement node is represented by a loop node.
Furthermore, the JS object numbered musical notation data structure is described in node type by adopting a suitable code segment descriptor, and the next node of any node in the flow chart needs to be placed in a child node field.
Further, executing the code according to the generated JS object numbered musical notation data structure and creating the hypertext markup language structure in S4 includes generating a document object model tree structure by the program code according to the JS object numbered musical notation data structure, wherein the document object model tree structure is composed of hypertext markup language tags.
Furthermore, all node styles are flexible layouts using open source frames.
Further, the setting of the style of all the nodes by using the cascading style sheet in S5 includes adjusting the distance between all the nodes by using the cascading style sheet, adjusting the layout of all the nodes in the horizontal direction and the vertical direction, and adjusting the connection line between the nodes.
Further, the graph in the flow chart is enlarged and reduced by adopting the element conversion attribute of the cascading style sheet.
Further, the drawing of the flow chart can be subject to retraction and rollback operations.
The invention has the beneficial effects that:
(1) when the flow chart is drawn, the method is simple to realize, the method can be realized only by html tags and styles, and the specific coordinate position of each node does not need to be accurately calculated like canvas or svg, so that the drawing efficiency is effectively improved.
(2) All nodes in the flow chart can ensure equal distance, and the horizontal direction can ensure horizontal, vertical and centered; and any node can be added between any two nodes, If and for nodes can support adding nested nodes, and the layout is automatically recalculated after the nodes are added.
(3) According to the method, automatic drawing can be realized according to json data, only a specific data structure needs to be concerned, and the view is driven to change by the data; at the same time, the view supports zoom-in and zoom-out; view rendering supports undo and rollback operations.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings needed in the embodiments will be briefly described 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 to obtain other drawings without creative efforts.
FIG. 1 is a flow diagram of an automatic layout method according to the flow diagram of the present invention;
FIG. 2 is a diagram of the effect of the present invention;
FIG. 3 is a diagram of a json data structure of a flow chart of the present invention;
FIG. 4 is a schematic diagram of the json data structure of the For Each node of the present invention;
FIG. 5 is a diagram illustrating a json data structure of an If node according to the present invention;
FIG. 6 is a schematic diagram of the present invention adding a node;
FIG. 7 is a diagram illustrating the conversion of the json data structure to a DOM tree to an automatic layout graph in accordance with the present invention.
Detailed Description
For further explanation of the various embodiments, the drawings which form a part of the disclosure and which are incorporated in and constitute a part of this specification, illustrate embodiments and, together with the description, serve to explain the principles of operation of the embodiments, and to enable others of ordinary skill in the art to understand the various embodiments and advantages of the invention, and, by reference to these figures, reference is made to the accompanying drawings, which are not to scale and wherein like reference numerals generally refer to like elements.
According to the embodiment of the invention, an html 5-based automatic layout method for the flow chart is provided.
The present invention will be further described with reference to the accompanying drawings and detailed description, and as shown in fig. 1-2, according to an embodiment of the present invention, an html 5-based flowchart automatic layout method includes the following steps:
s1, dividing nodes in the flow chart;
specifically, in an embodiment, the dividing the nodes in the flowchart in S1 includes dividing the nodes in the flowchart into one or more nodes of communication (Message), Client Action (Client Action), Server Action (Server Action), if statement, verification event (valid), Switch statement (Switch), loop statement (For easy), load statement (Assign), Destination address (Destination), and js (javascript).
S2, setting a plus button between adjacent nodes, and selecting a node needing to be newly added by clicking the plus button;
s3, generating a corresponding JS Object numbered Notation (JavaScript Object Notation, hereinafter referred to as json) data structure by the program code through the clicked position of the plus button, and finishing the addition of the added node;
specifically, as shown in fig. 6, a plus button is provided between adjacent nodes, a popup window pops up when the plus button is clicked, a new node of which type needs to be added can be selected, and the new node needs to be added is clicked, at this time, the program code finds a corresponding position in the json data structure through the clicked plus button position, generates a corresponding json segment according to the above steps, and inserts the json segment into the json data structure, thereby completing the addition of the node.
S4, executing codes according to the generated JS object numbered musical notation data structure, and creating a hypertext Markup Language (html) structure;
and S5, setting the styles of all nodes by adopting a Cascading Style sheet (css).
Specifically, in an embodiment, the setting the style of all the nodes by using the cascading style sheet in S5 includes adjusting the distances between all the nodes by using the cascading style sheet, adjusting the layouts of all the nodes in the horizontal direction and the vertical direction, and adjusting the connecting lines between the nodes, where all the connecting lines do not intersect and overlap, and support mutual nesting of the nodes.
By means of the scheme, the method is simple in implementation mode when the flow chart is drawn, the method can be implemented only by means of the html tags and the html styles, the specific coordinate position of each node does not need to be accurately calculated like canvas or svg, and therefore drawing efficiency is effectively improved.
As shown in fig. 5, in one embodiment, in the JS object profile data structure, a conditional node (conditionNodes) is used to represent a branch of the if statement node.
In the json data structure, the branches of the If node are represented by the conditions field, the conditions field is an array, the first element in the array corresponds to the true branch of the If node, and the second element in the array corresponds to the false branch of the If node.
As shown in fig. 4, in one embodiment, in the JS object profile data structure, a loop body of the loop statement node is represented by a loop node (loopNodes).
Wherein, the loop body of the For easy node can be added with any node.
In one embodiment, the JS object profile data structure is described with an appropriate code segment descriptor (type field) to describe the node type, and the next node of any node in the flowchart needs to be placed in a child node (child node) field.
Specifically, as shown in fig. 3, in the json data structure, the node type is described by a type field, and since the flowchart is sequential, the next node of a certain node in the flowchart needs to be placed in the child node field.
As illustrated in fig. 7, in one embodiment, the executing the code according to the generated JS Object numbered musical notation data structure in S4 and creating the hypertext markup language structure includes the program code generating a Document Object Model (DOM) tree structure according to the JS Object numbered musical notation data structure, wherein the Document Object Model tree structure is composed of hypertext markup language tags.
Specifically, the DOM tree structure is composed of a series of html tags and used for describing specific nodes, the outermost layer of each node is wrapped by one html tag, drawing of lines is completely performed based on styles, line drawing is performed through loader attributes, before and after pseudo-elements of css, and the child node field in the json data structure determines the sequence of the nodes in the DOM tree.
In one embodiment, all the node patterns are flexible layouts adopting an open source framework, for example, when another node is embedded in an If node, the If node is automatically propped open, the If node is also automatically set to be horizontally and vertically centered, and then the spacing between all the nodes is adjusted by means of the pattern, so that the spacing between the nodes is ensured to be equidistant.
In one embodiment, the graph in the flowchart is enlarged and reduced by using the element conversion attribute of the cascading style sheet.
In one embodiment, the rendering of the flow diagram may be subject to undo and rollback operations.
In summary, according to the above technical solutions of the present invention, when the flowchart is drawn, the implementation manner of the present invention is simple, and the present invention can be implemented only by html tags and styles, and there is no need to accurately calculate the specific coordinate position of each node, such as canvas (tag definition Graphics) or svg (Scalable Vector Graphics), so as to effectively improve the drawing efficiency.
In addition, all nodes in the flow chart can ensure equal intervals, and the horizontal direction can ensure horizontal, vertical and centered; and any node can be added between any two nodes, If and for nodes can support adding nested nodes, and the layout is automatically recalculated after the nodes are added.
In addition, automatic drawing can be realized according to json data, only a specific data structure needs to be concerned, and the view is driven to change by the data; at the same time, the view supports zoom-in and zoom-out; view rendering supports undo and rollback operations.
The above description is only for the purpose of illustrating the preferred embodiments of the present invention and is not to be construed as limiting the invention, and any modifications, equivalents, improvements and the like that fall within the spirit and principle of the present invention are intended to be included therein.

Claims (7)

1. An html 5-based automatic layout method for a flow chart, which is characterized by comprising the following steps:
s1, dividing nodes in the flow chart;
s2, setting a plus button between adjacent nodes, and selecting a node needing to be newly added by clicking the plus button;
s3, generating a corresponding JS object numbered musical notation data structure by the program code through the clicked plus button position, and finishing adding of the newly added node;
s4, executing codes according to the generated JS object numbered musical notation data structure, and creating a hypertext markup language structure;
s5, setting the styles of all nodes by adopting a cascading style sheet;
the dividing of the nodes in the flowchart in S1 includes dividing the nodes in the flowchart into one or more of communications, client actions, server actions, if statements, verification events, switch statements, loop statements, load statements, destination addresses, and JS;
executing a code according to the generated JS object numbered musical notation data structure in the S4, and creating a hypertext markup language structure, wherein the hypertext markup language structure comprises a program code generating a document object model tree structure according to the JS object numbered musical notation data structure, and the document object model tree structure consists of hypertext markup language tags;
the step of setting the style of all the nodes by using the cascading style sheet in S5 includes adjusting the distance between all the nodes by using the cascading style sheet, adjusting the layout of all the nodes in the horizontal direction and the vertical direction, and adjusting the connection line between the nodes.
2. The html 5-based flow chart automatic layout method according to claim 1, wherein in the JS object numbered musical notation data structure, conditional nodes are adopted to represent branches of the if statement nodes.
3. The html 5-based flow chart automatic layout method according to claim 1 or 2, wherein a loop body of the loop statement node is represented by a loop node in the JS object numbered notation data structure.
4. The html 5-based flow chart automatic layout method according to claim 1, wherein the JS object profile data structure is described by adopting an adaptive code segment descriptor, and a node next to any node in the flow chart needs to be placed in a child node field.
5. The html 5-based automatic layout method for flow chart according to claim 1, wherein all node styles are flexible layouts using open source frameworks.
6. The html 5-based automatic layout method for flow chart according to claim 1, wherein the element conversion attribute of the cascading style sheet is used to enlarge and reduce the graphics in the flow chart.
7. The html 5-based automatic layout method for flow chart according to claim 6, wherein the rendering of the flow chart can be subject to undo and rollback operations.
CN202110816374.0A 2021-07-20 2021-07-20 Html 5-based flow chart automatic layout method Active CN113268241B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110816374.0A CN113268241B (en) 2021-07-20 2021-07-20 Html 5-based flow chart automatic layout method

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110816374.0A CN113268241B (en) 2021-07-20 2021-07-20 Html 5-based flow chart automatic layout method

Publications (2)

Publication Number Publication Date
CN113268241A CN113268241A (en) 2021-08-17
CN113268241B true CN113268241B (en) 2021-11-26

Family

ID=77236788

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110816374.0A Active CN113268241B (en) 2021-07-20 2021-07-20 Html 5-based flow chart automatic layout method

Country Status (1)

Country Link
CN (1) CN113268241B (en)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113805868A (en) * 2021-09-15 2021-12-17 上海得帆信息技术有限公司 Method and system for realizing API (application program interface) arrangement based on HTML (Hypertext markup language)

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103207730B (en) * 2013-04-03 2016-03-09 广东飞企互联科技股份有限公司 One can locate pull-alongs flow process drawing generating method and process flow diagram maker
CN103336690B (en) * 2013-06-28 2017-02-08 优视科技有限公司 HTML (Hypertext Markup Language) 5-based text-element drawing method and device
CN105808217A (en) * 2014-12-30 2016-07-27 航天信息软件技术有限公司 Flow chart drawing method and system based on XML
CN106484408A (en) * 2016-09-29 2017-03-08 电子科技大学 A kind of node relationships figure display methods based on HTML5 and system

Also Published As

Publication number Publication date
CN113268241A (en) 2021-08-17

Similar Documents

Publication Publication Date Title
CN105630902B (en) A method of rendering and incremental update webpage
CN103873277B (en) The network topology method for visualizing and system of a kind of layering
US8887132B1 (en) Application runtime environment and framework
CN105740315B (en) The method of one kind of multiple screen response type page layout adjustment
CN105278946B (en) A kind of RESTful API method for visualizing
CN102915375B (en) A kind of webpage loading method based on layout subregion
US20050183008A1 (en) Method and system for separation of content and layout definitions in a display description
CN105574207A (en) WAP webpage developing method
US20140059488A1 (en) System and method for viewing selected descendant nodes in a tree hierarchy displayed in tabular form
CN102306174A (en) Method and equipment for interacting with user based on web page elements
CN103793135A (en) User interface tree-structure display method and system
CN103593414A (en) Showing method and device of webpages in browser
CN110363828A (en) A kind of method for drawing flow chart and the equipment for drawing flow chart
CN113268241B (en) Html 5-based flow chart automatic layout method
US20240069876A1 (en) Front-end code generation method and apparatus
CN110704769A (en) Flow chart generation method, device and equipment and computer storage medium
CN110795093B (en) Interactive view generation method and device
CN110020376A (en) Data linkage method and system
CN114637506A (en) Grid layout method, device, equipment and storage medium based on artificial intelligence
CN109144562A (en) A kind of smart code publication alarm method based on zookeeper
CN102053987A (en) Uniform interface for displaying and modifying data array
CN104951311A (en) Page making method and device
CN104050218A (en) Method and system for providing information to be displayed in user interface
CN104050190B (en) A kind of method and system of relation chain data processing, client
CN113822963A (en) Method, system, equipment and storage medium for drawing and displaying topological graph

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant