Vis Network


Hierarchical Layout Methods

This example shows the effect of the different hierarchical layouting methods, node shaking and how hierarchical layouts work with clustering. Also note that it's impossible to properly position a "hierarchy" with a cycle (If node 1 is above node 2 and node 2 is above node 1 which one is actually on top?)

Hub Size

The hub size layouting method is based on the amount of edges connected to a node. The node with the most connections (the largest hub) is drawn at the top of the tree.


The direction layouting method is based on the direction of the edges. The from nodes are placed above the to nodes in the hierarchy. Nodes that can be placed on multiple levels are by default shaken towards towards the leaves. All the leaves are then in a single line at the very bottom of the hierarchy. Optionally they can be shaken towards the roots which results in the roots being in a single line at the very top of the hierarchy.

Interactive Configuration

Layout method:

Shake towards (Applies to directed only.):