Automatic flow chart layout method based on html5

Abstract

The invention discloses an automatic flow chart layout method based on html5. The method comprises the following steps: S1, dividing nodes in a flow chart; S2, setting a number adding button between adjacent nodes, and selecting nodes needing to be newly added by clicking the number adding button; S3, enabling the program code to generate a corresponding JS object numbered musical notation data structure through the position of the clicked number adding button, and completing the adding of newly-added nodes; S4, executing codes according to the generated JS object numbered musical notation data structure, and creating a hypertext markup language structure; S5, adopting a cascading style sheet to set styles of all nodes. The method has the beneficial effects that when the flow chart is drawn, the implementation mode is simple, the flow chart can be drawn only by relying on html labels and styles, and the specific coordinate position of each node does not need to be accurately calculated like canvas or svg, so the drawing efficiency is effectively improved.

Description

technical field [0001] The invention relates to the technical field of the Internet, in particular to an html5-based flow chart automatic layout method. Background technique [0002] In the development environment, test environment, and production environment, flow charts, architecture diagrams, and topology diagrams are the basic basis for system design, operation and maintenance, and play an important role in various fields of enterprises, especially in the technical field, such as displaying processes, architecture, etc.; Therefore, when necessary, these maps are generally drawn. Among them, HTML5 (Hyper Text Markup Language5, Hypertext Markup Language) is a language description method for constructing Web content, and a method for constructing and presenting Internet content. Language mode; considered to be one of the core technologies of the Internet; widely used in the development of Internet applications. Flowchart symbols are specially used for drawing. No matter wh...

AI Technical Summary

Problems solved by technology

[0003] Existing technical solutions generally draw the flow chart by manual layout, arrange the node positions of the flow chart by manual dragging, and connect the nodes by manual connection. The limitations are very large, and the layout arrangement is relatively chaotic. When the layout is complex, it is necessary to continuously adjust the layout manually to prevent nodes from covering each other and connecting lines from crossing each other. In addition, there may be nested scenes between nodes. When defining a for loop node At this time, the for loop node may nest a for loop node, and there will be situations that cannot be expressed by manual layout. Therefore, it is necessary to design an automatic layout method for flow charts based on html5

Images