Dojo Diagrammer Sample : Layout Browser

This sample gives an overview of the graph layout algorithms available in the Dojo Diagram library.

The main window left part is composed of controls that can be used to change or customize the diagram displayed in the right part.

You can navigate between graph layout algorithms by clicking on the corresponding header in the left panel to display a wizard. This wizard allows you to customize the layout parameters and immediately see the changes in the diagram view in the right part.
Tree Layout is mainly used for directed trees that have a unique root element.
A tree layout can have one of the four possible orientations:





The links of the graph can be routed as either straight or orthogonal lines:


Adjust the space between nodes by using the slider below:

Radial layout mode partitions the nodes into levels, and arranges the levels in circles or ellipses around the root.
The aspect ratio of the spanning tree can be adjusted:



Adjust the space between nodes by using the slider below:

The Tip-over mode tips over children automatically to better fit the layout to the given aspect ratio.
To arrange the subnodes, choose between the following tip over stategies:



The alignment for subnodes can be adjusted by using the radio buttons below:



Adjust the space between nodes by using the slider below:

Force-Directed Layout can be used with connected and disconnected graphs, and with planar and nonplanar graphs.

Application domains for this layout include telecom and networking, software management, CASE tools, database and knowledge engineering, World Wide Web.

The algorithm allows to specify a preferred length of the links. To change this value, use the slider below:

It is also possible to specify a preferred length for each link individually. The slider below can be used to adjust the preferred length of the thick white link:

Circular Layout can be used with graphs representing interconnected ring and/or star network topologies.
This example shows a Circular layout applied to a graph with a "star" topology.

The clusters (i.e., stars or rings) can be computed automatically from the graph topology, or specified programmatically:



This example shows a Circular layout applied to a graph with a "ring" topology.

It is possible to specify that certain nodes must be star centers:

 Set red nodes as star centers

Clusters can also be specified by creating Subgraphs, as in this example.

Link layout can be used with any type of graph where nodes are fixed and links need to be routed. Application domains are electrical and industrial engineering, business processing, CASE tools.

Link layout tries to reduce link crossing and node overlapping by changing the links shape. Two link layout algorithms are available: Short Link Layout with a limited number of bends or Long Link Layout with unlimited number of bends.

The following example uses a short link layout algorithm. Use the checkbox below to apply the link layout:

 Apply Short Link Layout

The Long Link layout algorithm uses a grid to place links. Link-to-node crossings of orthogonal links are avoided, even if this introduces many bends.

The following example uses a long link layout algorithm. The diagram displays a maze and a long link layout is used to route the links through the maze. Walls are real nodes, and the layout algorithm is configured to avoid them. Use the checkbox below to apply the link layout:

 Apply Long Link Layout

Grid Layout can be used with any graphs. Application domains for this layout is any domain where a collection of isolated nodes needs to be arranged laid out.

The grid layout supports three modes:




The sliders below can be used to control the spacing between nodes:

Hierarchical layout can be used with any kind of graph, preferably graphs with directed links. It arranges the graph such that links are short and flow uniformly in the same direction, and also reduces the number of link crossings.
The layout can be arranged so that it has one of four possible orientations:




Links can be routed either as direct or as orthogonal lines:


Hierarchical layout arranges nodes in vertical or horizontal levels. Use the checkboxes below to align red and blue nodes together:
 Align Red Nodes
 Align Blue Nodes

The position of a node in a level can be specified individually. To control the location of the yellow node inside its level, use the checkbox below:

 Control Yellow Node Position
Adjust the position of the yellow node inside its level from left to right by using the slider below:


Nodes located on the same level can be aligned using the radio buttons below:


Hierarchical layout can reshape links to make them look like forks. Use the checkbox below to join links as forks:

 Use Forks to Join Links
Adjust the size of the forks by using the slider below (only applicable if the checkbox above is checked):


The algorithm allows you to specify where a link can be connected to. Use the radio buttons below to change the connection point of the links connected to the final node: