There are quite a few graph tools that visualize the structure of an entire website. htmlgraph is one that visualizes the structure of the HTML DOM-tree of a single page. What makes it interesting is that it color-codes the different HTML elements:
blue: for links (the A tag)
red: for tables (TABLE, TR and TD tags)
green: for the DIV tag
violet: for images (the IMG tag)
yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
black: the HTML tag, the root node
gray: all other tags
Here are the DOM-tree graphs of a few popular German blogs, and of mine:
Click to enlarge
hebig.org
The part below the single green dot is my sidebar, above it is the main pane: concise, things inside divs structured by lots of p-tags, lots of links in each blog posting.
Click to enlarge
vowe.net
Similar structure with sidebar and main pane, the latter looking pretty clean. The top right cluster could be the "Other recent entries" part at the bottom of the main pane.
Click to enlarge
spreeblick.de
The big center cluster should be the li-structured sidebar.
Click to enlarge
wirres.net
Der Name ist Programm - does exactly as it says on the tin ;-) Red dots are table markup.
Comments are closed at the moment. I will post a blog entry as soon as they are available again.
Very cool. Posted the visualisation of my blog here: http://www.roell.net/weblog/newsfeed/2006/05/27.shtml#009868
Sidebar to the left (with a dense ball of links to archives at the bottom), weblog-entries to the right.
— Martin Röll, 2006-05-27 15:21