graph-visualization - 可视化 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

我刚刚尝试使用两个库。

首先，我使用Jsonml将 dom 转换为 JSON

var jsonData = JsonML.fromHTMLText(htmlData);

然后使用Json Editor或Json Viewer对其进行可视化

在 jsFiddle 中查看示例

1. 使用 Json 编辑器
2. 使用 Json 查看器

希望这可以帮助你。