Automatic Graph Layout

What is Layout?

The term layout refers to algorithms for arranging graph elements based on a set of rules. Using these algorithms can make your graph easier to read by adding structure; for example, by moving and resizing nodes, or adding or removing bends, when appropriate. Different algorithms are suited for different use cases.

There are several built-in automatic layout algorithms available. You can use them out-of-the-box, or edit their properties to customize their behavior. You can also create your own layout algorithms.

These are the most important automatic layout algorithms included in the library:

Hierarchic

Figure 3.15. Hierarchic Layout

Hierarchic Layout

Organic

Figure 3.16. Organic Layout

Organic Layout

Orthogonal

Figure 3.17. Orthogonal Layout

Orthogonal Layout

Circular

Figure 3.18. Circular Layout

Circular Layout

Tree

Figure 3.19. Tree Layout

Tree Layout

Applying a Layout

To apply automatic layouts, you need an instance of an ILayouter. This layouter is used by the convenience methods in LayoutExtensions.

LayoutExtensions provides methods for calling a layout on the graph, the graph control and directly on the layouter. Some methods smoothly animate between the old state and the new one. Others directly apply the new layout without animation.

Calling a Layout on the Graph

Using the overloads of the ApplyLayout method, a layout can be called directly on the graph.

Using the variants of the ApplyLayout method, a layout can be called directly on the graph.

When calling ApplyLayout(IGraph graph, ILayouter layouter, TimeSpan morphDuration, GraphControl control, EventHandler doneHandler), you can optionally pass in a duration for the animation between the old and the new layout. If a duration is specified, the call is non-blocking. This means that the call returns immediately while the layout is still running. If you want to perform tasks on the graph after the layout has been calculated, such as fitting the viewport, you can pass in a callback to be executed after the layout is complete.

If ApplyLayout(IGraph graph, ILayouter layouter) is called without a duration, the call is blocking. In this case, no animation is performed and the call doesn't return until the layout is complete.

Example 3.27. Applying a Layout on the Graph

IGraph graph = GetMyGraph();

// blocking call
graph.ApplyLayout(new IncrementalHierarchicLayouter());

// non-blocking call
// doneHandler is executed when layout calculation is complete
graph.ApplyLayout(new IncrementalHierarchicLayouter(), TimeSpan.FromSeconds(2), 
                  graphControl, doneHandler);

// instead of IncrementalHierarchicLayouter, any implementation of ILayouter 
// can be used

Calling a Layout on the Graph Control

Using MorphLayout, a layout can be applied on the graph control. This call is non-blocking. This means that the call returns immediately while the layout is still running.

Please note that even if the duration is set to zero, the call can return before the layout is complete. If you want to perform tasks that depend on the layout being complete, always do this in the doneHandler.

Example 3.28. Applying a Layout on the Graph Control

// non-blocking call
// doneHandler is executed when layout calculation is complete
graphControl.MorphLayout(new IncrementalHierarchicLayouter(), 
                         TimeSpan.FromSeconds(2), doneHandler);

// instead of IncrementalHierarchicLayouter, any implementation of ILayouter 
// can be used

Calling a Layout on the Layouter

Using DoLayout, a layout can be called directly on the layouter. The graph on which the layout is performed is passed in as a parameter. This call is blocking and no transition animation is performed.

Example 3.29. Applying a Layout on the Layouter

// blocking call
new IncrementalHierarchicLayouter().DoLayout(graphControl.Graph);

// instead of IncrementalHierarchicLayouter, any implementation of ILayouter 
// can be used