Search code examples
graph-visualizationdomtree-structure

Tools to visualize an HTML document tree (DOM tree)


I want to visualize the document structure of a HTML website.

What I would like to have is something like this:

enter image description here

Are there any known tools that do this and where the results can be saved as a bitmap file?


Solution

  • I use LaTeX to create the DOM representation.

    Here is a minimal working example:

    \documentclass{scrreprt}
    \usepackage{tikz-qtree}
    \begin{document}
    
      \Tree[.table 
             [.thead 
               [.tr 
                 [.th [.\textit{Vorname} ] ]
                 [.th [.\textit{Nachname} ] ]
               ]
             ]              
             [.tbody 
               [.tr 
                 [.td [.\textit{Donald} ] ]
                 [.td [.\textit{Duck} ] ]
               ]
             ]
           ]
    
    \end{document}
    

    Which gives:

    enter image description here