Layout Algorithms
This content is outdated and is no longer being maintained. It is provided as a courtesy for individuals who are still using these technologies. This page may contain URLs that were valid when originally published, but now link to sites or pages that no longer exist.
This topic describes how to use layout algorithms to arrange the elements of a graphic.
Layout algorithms use a combination of constraints, rules, and parameters to arrange the elements of a graphic. Parameters are options, such as direction, specified in an algorithm. Constraints are values an algorithm uses when laying out its contents. Rules are search criteria for the algorithm if it cannot succeed by using its current constraints. All algorithms have predefined fallback behavior if the specified rules fail.
Linear Flow
The linear flow algorithm lays out shapes along a horizontal or vertical linear path. The following example demonstrates a simple dynamic, linear flow graphic.
Linear algorithms have parameters that define their direction and alignment. In the example above, the fromT value indicates that the algorithm should start from the top and move down. This example works only with level-one data items.
Note the forEach statement. The graphic is dynamic because it repeats the nodes inside the statement for each data item entered in the graphic. For more information, see the “forEach Loops” section of Constraints. For a comprehensive list of parameters and constraints, see Linear Algorithm.
Snake
The snake algorithm lays out child layout nodes along a linear path in two dimensions, allowing the linear flow to continue across multiple rows or columns. This algorithm works in a way similar to the linear flow algorithm, except the snake algorithm provides parameters that enable it to change direction. The following example demonstrates the snake algorithm.
The tL value of the grDir parameter indicates that the snake algorithm will grow from the top left. The row value specifies that nodes are arranged in rows (instead of columns). The contDir parameter indicates that each row will go in the same direction, as opposed to a revDir value. The revDir value switches the direction of each subsequent row. The off parameter specifies whether each row and column is centered (ctr) or offset (off) from the previous row or column. If the value is off, the algorithm uses the alignOff constraint.
Much like the linear flow algorithm, you can use forEach elements to define child layout nodes of a snake layout. For a comprehensive list of parameters and constraints, see Snake Algorithm.
Composite
You use the composite algorithm to specify the size and position of child layout nodes. This is useful for creating graphics with a predetermined layout in combination with other algorithms to construct more complex shapes.
The following example demonstrates the use of a composite layout. The code could be located in a root node with a linear flow algorithm.
The tag that indicates that the layout node uses the composite algorithm (<alg type="composite">) contains an ar parameter tag. The value of this parameter indicates the width-to-height ratio of the layout.
Notice that the constraint list for the composite algorithm layout node references each of its sub-shapes by name. The for="ch" value indicates that the constraint should be applied to a child node. These constraints position the sub-shapes that they refer to by name within the composite algorithm node.
Each dimension (x or y) of each shape has four possible constraints: left, center, right, and width. To position a shape in a composite algorithm, you must specify exactly two constraints on each dimension (for example, left and width).
For a comprehensive list of parameters and constraints, see Composite Algorithm.
Text (tx)
The text layout algorithm sizes text to fit within the shape that the layout node specifies. The preceding composite example has an example of the text algorithm.
For more information, see the “Shape Text” section of Best Practices for SmartArt Developers. For a comprehensive list of parameters and constraints, see Text Algorithm.
Conn
The connector algorithm places connecting lines, arrows, and shapes. In the following example of a connector algorithm tag, notice the srcNode and dstNode parameters. The values of these parameter tags indicate the names of nodes that are defined elsewhere. Note that it is not necessary to specify srcNode and dstNode, because connector algorithm nodes typically connect the two nodes on either side of them in the layout.
The parameters this example indicate that the connection should take place beginning at the vNodes node and ending at the lastNode node. For a comprehensive list of parameters and constraints, see Connector Algorithm.
Pyramid
The pyramid algorithm lays out child layout nodes along a vertical path and works with the trapezoid shape to create a pyramid. The following example demonstrates the pyramid algorithm.
In this example, the linear direction (linDir) parameter specifies that the tip of the pyramid starts from the bottom. The text direction (txDir) parameter indicates that the text for the first parameter starts from the top. If the pyramid has a composite child node, the pyraLvlNode parameter specifies the name of the node that is a child of the composite that makes up the pyramid itself. If the node specifies a trapezoid shape, it modifies the adjustment handles to construct a pyramid.
For a comprehensive list of parameters and constraints, see Pyramid Algorithm.
Cycle
The cycle algorithm lays out child layout nodes around a circle or portion of a circle by using equal angle spacing. The following example spaces child layout nodes in a clockwise circle.
For a comprehensive list of parameters and constraints, see Cycle Algorithm.
HierRoot and HierChild
The hierarchy root algorithm works with the hierChild algorithm to create hierarchical tree layouts. The hierRoot algorithm aligns and positions the hierRoot layout node in relation to the hierChild layout nodes.
The simplified example below demonstrates these algorithms.
The hierarchy child algorithm aligns and positions its child layout nodes in a linear path under the hierRoot layout node. For a comprehensive list of parameters and constraints, see Hierarchy Child Algorithm and Hierarchy Root Algorithm.
Sp
The space (sp) algorithm is used to specify a space between other layout nodes. Layout nodes that use this algorithm rely on the parent node’s algorithm for layout instructions (for example, <alg type="sp" />).