graph-visualization - HTML ドキュメント ツリー (DOM ツリー) を視覚化するツール

Question

HTML Web サイトのドキュメント構造を視覚化したいと考えています。

私がしたいのは次のようなものです：

これを行う既知のツールと、結果をビットマップ ファイルとして保存できる場所はありますか?

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

2つのライブラリを使用してみました。

最初に、 Jsonmlを使用して dom を JSON に変換しました

var jsonData = JsonML.fromHTMLText(htmlData);

次に、Json EditorまたはJson Viewerを使用して視覚化しました

jsFiddle でサンプルを表示する

1. Json エディターの使用
2. Json ビューアの使用

これがお役に立てば幸いです。