La création d'organigramme de la structure à l'aide de CSS et de JQuery

J'ai été vérifier sur pile forum
Les arbres de Twitter Bootstrap, C'était vraiment intéressant de voir ce que vous pouvez réaliser grâce à CSS. Depuis l'exemple mentionné dans le lien de l'écoulement vertical, Est-il possible de réaliser la même que les flux horizontal.
Par exemple

Pour la référence, j'ai ajouté la JS Fiddle lien:
http://jsfiddle.net/Fh47n/

<div class="tree">
<ul>
    <li>    <a href="#">Parent</a>

        <ul>
            <li>    <a href="#">Child</a>

                <ul>
                    <li>    <a href="#">Grand Child</a>

                    </li>
                </ul>
            </li>
            <li>    <a href="#">Child</a>

                <ul>
                    <li><a href="#">Grand Child</a>
                    </li>
                    <li>    <a href="#">Grand Child</a>

                        <ul>
                            <li>    <a href="#">Great Grand Child</a>

                            </li>
                            <li>    <a href="#">Great Grand Child</a>

                            </li>
                            <li>    <a href="#">Great Grand Child</a>

                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Grand Child</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<style type="text/css">
.tree li {
margin: 0px 0;
list-style-type: none;
position: relative;
padding: 20px 5px 0px 5px;
}
.tree li::before {
content:'';
position: absolute;
top: 0;
width: 1px;
height: 100%;
right: auto;
left: -20px;
border-left: 1px solid #ccc;
bottom: 50px;
}
.tree li::after {
content:'';
position: absolute;
top: 30px;
width: 25px;
height: 20px;
right: auto;
left: -20px;
border-top: 1px solid #ccc;
}
.tree li a {
display: inline-block;
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
/*Remove connectors before root*/
.tree > ul > li::before, .tree > ul > li::after {
border: 0;
}
/*Remove connectors after last child*/
.tree li:last-child::before {
height: 30px;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
background: #c8e4f8;
color: #000;
border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before {
border-color: #94a0b4;
}
</style>

Je sais à propos de google graphique https://developers.google.com/chart/interactive/docs/gallery/orgchart?csw=1 mais je ne veux pas l'utiliser comme mon exigence est très spécifique qui peut ne pas être faisable.

Importe quel gourou qui peut vous aider?