Crear un diagrama de árbol a partir de listas en HTML con jOrgChart

jOrgChart es un plugin para jQuery que convierte las listas <ul> en diagramas de árbol y acepta que sus <li> contengan todo tipo de contenido HTML. Es muy útil para mostrar información ordenada por jerarquías e incluso soporta reordenamiento de los elementos por medio de drag’n'drop, como pueden ver en el demo.

Para implementarlo en un proyecto web primero debemos descargar el paquete de archivos y descomprimirlo en nuestro directorio. Luego linkeamos los archivos necesarios:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jOrgChart.js"></script>
<link rel="stylesheet" href="css/jquery.jOrgChart.css"/>

Si queremos la funcionalidad de drag’n'drop entonces incluiremos jQuery UI

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

Y finalmente construirmos la estructura HTML del siguiente modo:

<ul id="org" style="display:none">
 <li>
 Food
 <ul>
 <li>Beer</li>
 <li>Vegetables
 <ul>
 <li>Pumpkin</li>
 <li><a href="http://tquila.com" target="_blank">Aubergine</a></li>
 </ul>
 </li>
 <li>Bread</li>
 <li>Chocolate
 <ul>
 <li>Topdeck</li>
 <li>Reese's Cups</li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>

Descargar | Demo