Инструменты для визуализации дерева документов HTML (дерево DOM)

Question

Я хочу визуализировать структуру документа на веб-сайте HTML.

То, что я хотел бы иметь что-то вроде этого:

Существуют ли какие-либо известные инструменты, которые делают это и где результаты могут быть сохранены в виде файла растрового изображения?

Answer 1

Я использую LaTeX для создания представления DOM.

Вот минимальный рабочий пример:

\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} 

Что дает:

Answer 2

Я только что попробовал использовать две библиотеки.

Сначала я преобразовал РОМ в формате JSON с помощью Jsonml

var jsonData = JsonML.fromHTMLText(htmlData); 

Затем используется Json Editor или Json Viewer для визуализируя ее

Просмотр образцов в jsFiddle

1. Using Json Editor
2. Using Json Viewer

Надеюсь, это может вам помочь.