Use OrthogonalLayout to generate initial placement for SpringLayout

In a series of posts we’ll explore ways to combine graph layout algorithms for various purposes, such as improving layout speed or achieving specific layout constraints.

In this example we’ll show how to apply OrthogonalLayout as preprocessing step for SpringLayout used to minimize edge crossings. A problem with force-directed layout algorithms such as SpringLayout is that they can reach equilibrium of the simulated forces while there are link crossings present. However if the simulation starts from an initial layout that has minimal number of crossing, it will tend to reach balance without introducing new crossings. So we can use any of the layout algorithms used for arranging planar graphs (OrthogonalLayout, TriangularLayout, CascadingLayout) to create the initial configuration for SpringLayout.

OrthogonalLayout is designed to create planar drawings of graphs (having no crossing links at all if possible) where edge segments are either horizontal or vertical. For some types of diagrams, such as flowcharts, you might use OrthogonalLayout as is. However in many cases you might prefer SpringLayout, e.g. in order to achieve aesthetic criteria like uniform edge lengths, or to conform to accepted drawing conventions such as the one used to present state machines. So when you know your graphs are planar or close to planar, you can run OrthogonalLayout as pre-processing step, and then run the physical-force simulation using SpringLayout to achieve straight-line uniform length drawings:

void ApplySpringLayout(bool preArrange)
{
    if (preArrange)
    {
        var tl = new OrthogonalLayout();
        tl.Arrange(diagram);
    }

    var sl = new SpringLayout();
    sl.Randomize = false;
    sl.MinimizeCrossings = true;
    sl.IterationCount = 50;
    sl.Arrange(diagram);

    diagramView.ZoomToFit();
}

Here are several examples of the method results when called respectively with false (on the left side) and with true (on the right side of image). Note that for such small graphs SpringLayout will probably remove the crossings if left to run for more iterations, but in the general case and with larger graphs that’s not guaranteed.

The code above uses MindFusion’s .NET API and can be used with Windows Forms, WPF, Silverlight and ASP.NET diagramming components. The Java API for Android and desktop Swing application will look similar, with setter method calls instead of property assignments.

Enjoy!