HTML 노드 맵 생성기?

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 태그 안에하지만 난에서 조각을 사용하는거야 예를 위해가 될 것입니다 내 this 같은 무언가로 일부 생성 된 텍스트와 포트폴리오 페이지)

:

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

순수하게 예제 목적을 위해 비판하지 말고 절대적으로 디자인에 대한 생각이 없습니다. 내가 말한 것을 정확히 설명하기 위해 포토샵에서이 이미지를 신속하게 만들었습니다. 이 모든 것은 CSS로 대부분 쉽게 생성 될 수 있습니다. 어떤 수단으로도이 그래픽이 될 필요는 없지만 지루해지기 위해서입니다.

---

나를 위해이 작업을 수행 할 수있는 플러그인 또는 소프트웨어를 찾고 있습니다. HTML 또는 이미지로이 맵을 생성하는 것을 선호합니다. 따라하기 쉬운 한지도 유형은 괜찮을 것 같습니다.

최후의 수단으로 내가 찾고있는 것을 찾지 못하면 결국 나 자신을 쓰게 될지도 모른다. 그런 일이 생기면 나는 코딩을 돕는 사람들을 찾고있는 것을 기쁘게 생각한다. 플러그인.

Answer 1

특정 요소의 모든 하위 항목을 검색하고 태그, 클래스, ID 및 깊이를 반환 할 수 있습니다. 그런 다음 시각적 트리를 만들기 위해 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를 생성 할 수 있습니다.

자바 스크립트는 재귀 적으로 모든 요소를 ​​방문하고 모든 요소에 대해 고유 한 ID를 생성하고 이해하기 쉬운 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]) + "}"})()) 

다음은 형식에 대한 빠른 workthrough입니다 : http://www.orient-lodge.com/node/3408

그런 다음 PNG 파일을 생성합니다 (예를 들어 유닉스에서 작동)

dot -Tpng <graph.dot> g.png 

graphviz를위한 자바 스크립트 렌더러가있어, 너무. Canviz 아직 시도하지는 않았지만 유망 해 보입니다.