HTML Node Map Generator?

Question

Хорошо, то, что я ищу, это то, что может генерировать графическую древовидную карту узлов веб-страниц.

Так что по сути это может теоретически преобразовать что-то вроде этого:

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

(Конечно, это будет внутри тегов HTML и BODY, но для примера я собираюсь использовать фрагмент со страницы моего портфолио с некоторым сгенерированным текстом)

На что-то вроде этого:

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

В этом нет абсолютно никакой мысли о дизайне, так что не критикуйте это, просто для примера. Я быстро сделал это изображение в фотошопе, чтобы проиллюстрировать, о чем я говорю. Все это может быть легко сгенерировано с помощью CSS по большей части. Это ни в коем случае не должно быть таким графическим, но ради меня скучно, это так.

---

Я ищу плагин или программное обеспечение, которое может сделать это для меня. Я бы предпочел, чтобы он генерировал эту карту в HTML или в виде изображения. Я думаю, что любой тип карты будет в порядке, если за ним будет легко следить.

В крайнем случае, если я не смогу найти именно то, что ищу, я мог бы написать сам, если это произойдет, я был бы рад, если бы кто-то помог с кодированием плагина.

Answer 1

Вы можете получить все дочерние элементы определенного элемента и вернуть их тег, класс, идентификатор и глубину. Затем вы можете проявить творческий подход с помощью CSS для создания визуального дерева. Нечто подобное должно работать. Пример на http://jsfiddle.net/elclanrs/UHbMa/.

Плагин jQuery:

$.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;
};

И тогда вы называете это как:

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);

Answer 2

Graphviz - хороший инструмент для таких вещей.

Вы можете использовать часть Javascript для генерации файла Graphviz и создания png с помощью инструмента.

Javascript должен рекурсивно посещать все элементы и генерировать уникальные идентификаторы для каждого элемента и записывать их в довольно простом для понимания формате Graphviz.

Вот букмарклет для преобразования страницы в формат Graphviz.

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]) + "}"})())

Вот краткий обзор формата: http://www.orient-lodge.com/node/3408

Затем сгенерируйте файл png: (пример работает под Unix)

dot -Tpng < graph.dot > g.png

Для Graphviz тоже есть Javascript Renderer. Canviz Я еще не пробовал, но выглядит многообещающе.