Semantics based layout algorithms

The following algorithms arrange the diagram in a way that shows the semantics of individual items or the overall graph structure, such as hierarchical relations between objects, loops and decisions in flowcharts, assignments of nodes to layers or swimlanes.

Tree Layout

If application's data is structured hierarchically, it is appropriate to apply tree layout on it. To do this, create a TreeLayout object and call its Arrange method. Members of TreeLayout control many aspects of the layout process. The type of layout can be directional or radial. You can choose how much space to leave between tree levels and between nodes on the same level. For directional layouts, the style of links in the arranged tree can be set to straight, orthogonal or curved. Global tree direction and alignment can be customized too. In VB.NET and C#, tree layout might be applied like this:

C#

using MindFusion.Diagramming.Wpf;
using MindFusion.Diagramming.Wpf.Layout;

...

private void button1_Click(object sender, EventArgs e)
{
    TreeLayout tl = new TreeLayout();
    tl.Type = TreeLayoutType.Cascading;
    tl.Direction = TreeLayoutDirection.LeftToRight;
    tl.LinkStyle = TreeLayoutLinkType.Cascading2;
    tl.LevelDistance = 10;
    tl.Arrange(diagram);
}

Visual Basic

Imports MindFusion.Diagramming.Wpf
Imports MindFusion.Diagramming.Wpf.Layout

...

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

    Dim tl As New TreeLayout()
    tl.Type = TreeLayoutType.Cascading
    tl.Direction = TreeLayoutDirection.LeftToRight
    tl.LinkStyle = TreeLayoutLinkType.Cascading2
    tl.LevelDistance = 10
    tl.Arrange(diagram)

End Sub

Fractal Tree Layout

FractalLayout is a tree layout algorithm that places child nodes symmetrically around their parent node. Nodes at the lowest level are arranged directly in a circle around their parent. At the upper level, the already arranged nodes form branches that are arranged in a circle around the new parent node. The algorithm is recursively repeated till the highest level is reached. If nodes in the tree have uniform number of children, the end result has fractal-like appearance (subsets of the graph look like scaled-down copies of the whole graph).

You can choose which node should be displayed at the center of the topmost circle by setting the Root property. If it is not specified, the algorithm automatically selects a root that leads to more balanced distribution of nodes.

Layered Graph Layout

The LayeredLayout algorithm arranges diagram nodes in layers according to several criteria, most important of which are: connected nodes must be placed close together; links must flow in one direction if possible; links must cross as few layers as possible; links must not cross other links. To apply the layout to a diagram, create a LayeredLayout instance, set its members and invoke the Arrange method. In C# and VB.NET, layered layout can be applied like this:

C#

using MindFusion.Diagramming.Wpf;
using MindFusion.Diagramming.Wpf.Layout;

...

private void btnArrange_Click(object sender, System.EventArgs e)
{
    LayeredLayout ll = new LayeredLayout();
    ll.Orientation = MindFusion.Diagramming.Layout.Orientation.Horizontal;
    ll.SplitLayers = true;
    ll.LayerDistance = 35;
    ll.Arrange(diagram);
}

Visual Basic

Imports MindFusion.Diagramming.Wpf
Imports MindFusion.Diagramming.Wpf.Layout

...

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

    Dim ll = New LayeredLayout()
    ll.Orientation = MindFusion.Diagramming.Layout.Orientation.Horizontal
    ll.SplitLayers = True
    ll.LayerDistance = 35
    ll.Arrange(Diagram)

End Sub

Tree map layout

Tree maps represent hierarchies by nesting child nodes within their parents, where the areas of leaf nodes are proportional to their Weight values. Unlike other layout algorithms, TreeMapLayout expects hierarchies to be defined via grouping or containment (see AttachTo method and ContainerNode class), and will ignore any links in the diagram. The diagram area covered by the topmost nodes in a hierarchy is specified via the LayoutArea property. By default, the layout tries to keep the ratio of node sides as close as possible to one. However this could make it hard to distinguish separate levels of the hierarchy. To alleviate that, set Squarify to false, and child nodes will be arranged either as a row or a column inside their parent node, alternating directions for each level. The drawback is that when Weight ratios differ greatly or nodes contain many children, some nodes could end up with very narrow rectangles.

Decision flowchart layout

DecisionLayout arranges simple flowcharts consisting of decision boxes with up to three outgoing links per node and activity boxes with a single outgoing link per node. The nodes are arranged in columns and rows, whose distance depends on the HorizontalPadding and VerticalPadding property values. When links share the same row or column, they are placed at a distance specified via LinkPadding. The layout arranges nodes recursively starting from StartNode. If StartNode is not specified, the algorithm selects the root of the deepest branch of the graph's spanning tree as start node.

Flowchart Graph Layout

FlowchartLayout recognizes program code -like patterns in the graph, such as loops, sequences and if/switch branchings, and arranges them recursively. FlowchartLayout could be used to arrange other types of graphs as well, though with some restrictions. For example it treats all back links as loops in the code, and expects that they are nested - loop links starting closer to the stop node should end closer to the start node. Another similar restriction is that there shouldn't be any cross-links that connect different branches of a decision sub-graph.

Workflow Graph Layout

The FlowLayout algorithm can be used to lay out flowcharts, workflow and process diagrams. It works by applying a customizable set of rules for local positioning of connected nodes relatively to each other. On a larger scale, the algorithm keeps groups of nodes separate and prevents links between the groups from crossing nodes. The FlowLayout and ProcessLayout examples included in the WpfDiagram package demonstrate two sample sets of layout rules.

Swimlane Layout

SwimlaneLayout can be used to arrange process diagrams in which nodes representing activities are placed in swimlanes representing resources. The index of the resource allocated to an activity should be assigned to the corresponding node's LayoutTraits[SwimlaneLayoutTraits.Lane].

By default, the algorithm works with the diagram's LaneGrid, but its SwimlaneGrid property can be set to any class that implements ISwimlaneGrid. This allows applying the layout to a custom-drawn grid rendered through a custom control template, or one composed of locked background nodes.

Hierarchical Graph Layout

HierarchicalLayout places nodes on user-defined levels, such that if the source graph is level-planar, all links are guaranteed to have a single segment and not intersect. The layout method requires that for each node LayoutTraits contains a HierarchicalLayoutTraits.Level entry specifying the level, and no two connected nodes must be on the same level.