How to Create a DOM Tree Diagram

The Document Object Model (DOM) object model of a web document is an interface by which programs can work with the content, structure, and styles of a web page. It is used to define a logical structure of a document and the way it can be accessed and managed. Using DOM is a way to represent a webpage in a structured hierarchical view so that it becomes easier for developers and users to glide through the document.

The DOM structure can be represented as a node tree. It has a single root, which branches into many child branches, each of which can branch itself and ends with “leaves”. The root is the HTML element and the branches — the content within these elements.

Using the ConceptDraw DOM Tree solution enables developing DOM-tree structured mind maps in ConceptDraw MINDMAP with the ability to automatically generate DOM diagrams in DIAGRAM.

1. Run ConceptDraw MINDMAP.
2. Sketch a DOM tree structure for your future web page in an arbitrary mind map view.
3. Use the “Tree Bottom” or “Tree Top” arrangement tool available in the Arrange panel. This step is optional. You can apply it to make the mind map structure similar to a tree.

4. Reveal the DOM Tree item in the Solutions panel.
5. Click the Topic Type section — the possibility to assign the DOM Node topic type becomes available.

6. Select the mind map topics and assign them the DOM Tree Node topic type using the Topic Type panel.

7. Select the Export option in the DOM Tree item in the Solutions panel. Choose the certain export type depending on the desired alignment of the diagram (vertical top-to-bottom, or horizontal left-to-right).
8. Click the Generate button.

Result: The DOM Tree will be generated and opened in ConceptDraw DIAGRAM.