Products
Solutions
Samples
Contact Us
Buy
Helpdesk
✕
Sign In
Sign In
My ConceptDraw
Profile
Cart 
Activate
My Activated Licenses
Upgrade Information
Download Product
Open Support Ticket
Sign Out
This site uses cookies. By continuing to browse the ConceptDraw site you are agreeing to our Use of Site Cookies.
Helpdesk  >  ConceptDraw DIAGRAM  >    Business-specific Drawings

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. dom-tree
  5. Reveal the DOM Tree item in the Solutions panel.
  6. Click the Topic Type section — the possibility to assign the DOM Node topic type becomes available.
  7. dom-tree
  8. Select the mind map topics and assign them the DOM Tree Node topic type using the Topic Type panel.
  9. dom-tree
  10. 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).
  11. Click the Generate button.
  12. dom-tree

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

How to Create a Web Page DOM Tree

How it works:

  • Set of ready-to-use templates supplied with ConceptDraw DIAGRAM
  • Collection of professional samples supports each template
  • Professional drawing tools

Useful Solutions and Products:

Diagrams area
  • Easily draw charts and diagrams
  • Visualize business information
  • Block Diagrams
  • Bubble Diagrams
  • Circle-Spoke Diagrams
  • Circular Arrows Diagrams
  • Concept Maps
  • Flowcharts
  • Venn Diagrams

Software Development Area
  • Android User Interface‏
  • iPhone User Interface
  • macOS User Interface
  • Windows 10 User Interface
  • Website Wireframe
  • Rapid UML
  • SYSML
  • IDEF0 Diagrams
  • Entity-Relationship Diagram (ERD)
  • Data Flow Diagrams (DFD)
  • Object-Role Modeling (ORM) Diagrams

ConceptDraw DIAGRAM
  • Diagraming and Charts
  • Vector Illustrations
  • Maps
  • Floor plans
  • Engineering drawings
  • Business dashboards
  • Infographics
  • Presentation
  • Over 10 000 vector stencils
  • Export to vector graphics files
  • Export to Adobe Acrobat® PDF
  • Export to MS PowerPoint®
  • Export to MS Visio® VSDX, VDX

Products

  • ConceptDraw OFFICE v11
  • ConceptDraw DIAGRAM v18
  • ConceptDraw MINDMAP v16
  • ConceptDraw PROJECT v15
  • ConceptDraw STORE
  • ConceptDraw BOOKS

Solutions

  • Free
  • Premium

Samples

Support

  • Technical Support
  • Upgrade Request
  • Visio File Conversion
  • System Requirements
  • Helpdesk
  • Students & Educators
  • Enterprise
  • Customer Service

Solutions

  • Free
  • Premium

Samples

Video Room

  • Products
  • Solutions

Ready To Buy

  • Buy Online
  • Reseller Partners
  • Manage Your Account
  • Download Your Software
  • CS Odessa

    • About Us
    • Contact Us
    • CS Odessa Identity
    • News
  • CS Odessa
    Plan. Do. Communicate.

    About Us | Contact Us | Feedback | EULA | Privacy | TOU | TOS
    © 1993 — 2025 CS Odessa Corp.