HTML Node Map Generator?

Question

Alright, what I'm looking for is something that could generate a graphical tree-style map of a web pages nodes.

So essentially it could theoretically transform something like this:

<aside id="leftCol">
    <section class="container"> 
        <header class="child1">
            <hgroup>
                <h1 class="title">Demo Project</h1>
                <h3 class="subTitle">WEBSITE 2011</h3>
            </hgroup>
        </header>

        <div class="child2" id="thisDiv">
            <div class="subChild1">
                <div class="anotherChild1"></div>
                <div class="anotherChild2"></div>
                <div class="anotherChild3"></div>
            </div>

            <div class="subChild2">
                <p>Some Text</p>
            </div>   
        </div>

        <footer class="child3">                  
            <a href="#">Link to project here</a>
        </footer>
    </section>
</aside>

(This would of course be inside the HTML and BODY tags but for the sake of an example I'm going to use a snippet from my portfolio page with some generated text)

Into something like this:

Example http://www.deviantart.com/download/287437946/node_map_by_wild_fire126-d4r4sje.png

There's absolutely no design thought put into this so don't criticize it, purely for the example purpose. I made this image in photoshop quickly just to illustrate exactly what I'm talking about. All of this could be easily generated with CSS for the most part. It does not by any means have to be this graphical but for the sake of me being bored, it is.

I'm looking for a plugin or a piece of software that can do this for me. I would prefer that it would generate this map in HTML or as an image. I guess any map type would be okay as long as it would be easy to follow.

As a last resort if I can't find quite what I'm looking for I might end up just writing it myself, if that happens, I would be happy to be looking for some people to help with the coding of the plugin.

EDIT: Forgot to mention this would most likely be a separate page. There would most likely be an input for the address and then it would fetch the DOM for that address and build the map accordingly. — Wild_Fire126, Feb 27 '12 at 08:37
May I ask... why? There are plenty of dev tools such as Firebug that help you explore and visualize the DOM tree better than this would do. Any page of a reasonable size would generate a huge and complicated graph that is not very easy to understand. Also, have you see the 3D 'tilt' feature in Firefox? http://blog.mozilla.com/tilt/ — DG., Feb 27 '12 at 12:23

Gottox · Answer 1 · 2012-02-27T10:57:42.977

Graphviz is a nice tool for doing such a thing.

You could use a piece of Javascript to generate a Graphviz file and generate a png with the tool.

The javascript should recursively visit all Elements and Generate unique IDs for every Element and write them out in the fairly easy to understand Graphviz format.

Here's a Bookmarklet to convert a page to the Graphviz format.

javascript:void((function() {var f = function(pid, e) { var id = "id" + Math.round(Math.random()*1000000), c = e.childNodes, r = id+'[label="'+(e.tagName ? e.tagName : e.nodeValue.replace(/[\n\r]+/g," "))+'"];\n'; for(var i = 0; i < c.length; i++) { r+=f(id, c[i]); }; if(pid) {r += pid + "->" + id + ";\n";}; return r;}; document.body.innerText = "digraph {\n" + f(false, document.getElementsByTagName("html")[0]) + "}"})())

Here's a quick workthrough to the format: http://www.orient-lodge.com/node/3408

Then generate a png file: (example works under Unix)

dot -Tpng < graph.dot > g.png

There's a Javascript Renderer for Graphviz, too. Canviz I haven't tried it yet, but looks promising.

having a webservice generating the graph sounds like a better idea than doing it with Javascript and genrating HTML/CSS (to me anyway), especially if the graph can be provided using a savable (known, standard) text content; where the front-end generates the text content and the back-end the actual graph as PNG format. — Yanick Rochon, Feb 27 '12 at 07:46
I normally would as well, but I am looking for something that I would be able to easily style to any need. So it's fully custom and I could make it go with anything that I would need it to go with, if the need arose. — Wild_Fire126, Feb 27 '12 at 08:24

elclanrs · Accepted Answer · 2012-02-27T09:01:48.023

You could retrieve all children of a certain element and return their tag, class, id and depth. Then you can get creative with css to create a visual tree. Something like this should work. Example at http://jsfiddle.net/elclanrs/UHbMa/.

jQuery plugin:

$.fn.buildTree = function() {
    var tree = {};
    this.find('*').andSelf().each(function(i, v) {
        var parents = $(this).parents().length - 1;
        for (var i = 0; i < parents; i++) {
            tree[v.tagName.toLowerCase()] = {
                id: v.id,
                className: v.className,
                depth: i
            }
        }
    });
    return tree;
};

And then you call it like:

var tree= $('aside').buildTree(),
    html = '';
for (tag in tree) {
    html += '<p><strong>Tag:</strong> ' + tag + 
            ' | <strong>Class:</strong> ' + tree[tag].className + 
            ' | <strong>Depth:</strong> ' + tree[tag].depth;
}
$('#tree').append(html);

This would be nice for a purely reading and I think it could be easily expanded. But as I said, I was looking for something a bit more graphical, to make it easy to ready and follow. — Wild_Fire126, Feb 27 '12 at 08:26

HTML Node Map Generator?

2 Answers2