Automatic Layouts

yFiles for HTML features efficient and highly customizable algorithms to automatically arrange a graph, the so-called automatic layouts. The different layout styles determine the locations of all diagram elements based on different optimization criteria. A variety of styles are included, such as hierarchical, organic (force-directed), tree, orthogonal, circular, radial, and series-parallel. Many aspects of each layout algorithm can be customized to fit a specific domain or a specific use case.

This chapter provides an overview of the layout styles of yFiles for HTML and gives pointers on where to find more details about advanced configuration options.

The layout algorithms in yFiles fall into three main categories:

Layout algorithms are responsible for assigning locations to all graph elements. Specifically, the nodes of a graph are placed according to optimization criteria, and edge paths are also generated. Note that it’s not required to apply a separate edge routing algorithm. Some algorithms also arrange labels to avoid overlaps with each other or with graph elements.
Edge routing algorithms process only edges and compute edge paths. The nodes of a graph remain unchanged; their position and size are not altered in any way. Hence, they are a good choice for use-cases where the node positions are already determined or as a post-processing step for another layout algorithm.
Label placement algorithms leave a graph’s nodes and edge paths unaltered, but compute suitable positions for labels. The arrangement criteria ensure that the labels do not overlap with each other or any of the graph elements.

The layout algorithms can be applied directly to instances of IGraph. The following example illustrates how to apply a HierarchicalLayout on a graph.

Applying an automatic layout in an animated fashion

const graphComponent = getMyGraphComponent()
await graphComponent.applyLayoutAnimated(
  new HierarchicalLayout(),
  TimeSpan.fromMilliseconds(250)
)

For more details on how to apply layout algorithms, refer to Applying an Automatic Layout.

In addition, layout and edge routing algorithms provide support for many specific visual and algorithmic features (e.g., edge grouping, incremental layout). The most important ones are described in chapter Automatic Layout Features.

Layout Styles

yFiles offers a variety of layout styles tailored for different application domains. An overview is provided below, with detailed information available in the subsequent sections.

Hierarchical Layout

The HierarchicalLayout class arranges graphs in a hierarchical fashion. The nodes are distributed into layers so that most of the edges point in the main layout direction. The order of the nodes within the layers ensures that the number of edge crossings is minimized. Different edge routing styles are available. Edges can be orthogonal, polyline, or octilinear.

Hierarchical diagrams are commonly used to visualize hierarchical data, since they facilitate the identification of dependencies and relationships among the nodes of the graph. Workflow visualization, call graph visualization, entity-relationship diagrams, biochemical pathways, and network management are typical application domains for this type of layout.

For more details, see Hierarchical Layout.

Organic Layout

The OrganicLayout is known for its natural distribution of nodes, which reveals clusters and symmetric properties within the graph. The layout is very compact, with nodes positioned close to their adjacent nodes. Edges maintain uniform lengths and are routed using straight-line segments without bends.

In addition to OrganicLayout for creating layouts from scratch, interactively arranging a graph is also possible using the InteractiveOrganicLayout.

Organic diagrams are commonly used to visualize relationships in large networks, such as in bioinformatics, enterprise networking, social network visualizations, mesh visualizations, or system management.

For more details, refer to Organic Layout.

Tree Layout

The TreeLayout arranges graphs with a tree structure. yFiles provides several tree layout styles:

The TreeLayout offers multiple arrangements for trees and subtrees. It is easy to customize edge order, port assignment, and node arrangement for each subtree. With its various ISubtreePlacer implementations, it is highly customizable and offers many different styles.
The RadialTreeLayout places subtrees radially around their root node. All direct children of a node can be placed on a common circle around their parent node (depending on the alignment policy). Therefore, subtrees resemble balloons or stars, especially if they have similar sizes. The edges of the tree are drawn as straight lines.

Tree layout algorithms are commonly used to visualize relational data and create diagrams that reveal possible hierarchical properties of the graph. They find applications in dataflow analysis, software engineering, bioinformatics, and business administration.

For more details, refer to Tree Layout.

Orthogonal Layout

The OrthogonalLayout arranges the nodes of a given graph so that each edge is drawn as an alternating sequence of horizontal and vertical segments. It produces compact drawings with no overlapping nodes, few crossings, and few bends. It is well suited for small and medium-sized sparse graphs.

Orthogonal drawings are used in software engineering, database schema representation, system management, knowledge representation, VLSI circuits, and floor planning applications.

For more details, see Orthogonal Layout.

Circular Layout

The CircularLayout is suitable for emphasizing group and tree structures. Circular layout algorithms are used in many areas, such as social networking, network management, WWW visualization, e-commerce, and telecommunications.

For more details, see Circular Layout.

Radial Layout

The RadialLayout distributes nodes into circles (layers) around a common center, using predefined layering strategies.

This layout is useful for visualizing social networks, data clustering, and bioinformatics data.

For more details, see Radial Layout.

Series-parallel Layout

Series-parallel graphs are directed graphs that have a single source (a node without any incoming edges) and a single sink (a node without any outgoing edges). They are constructed recursively through series and parallel compositions. The SeriesParallelLayout emphasizes the primary layout direction, which runs from the source to the sink. It also highlights the paths through the graph by routing edges with a minimum number of bends.

Series-parallel diagrams work well for visualizing circuits, call trees, or flowcharts.

For more information, see Series-parallel Layout.

Radial Group Layout

The RadialGroupLayout is a layout algorithm for hierarchically grouped graphs that arranges the direct members of each group around its border. This creates a recursive tree structure that resembles a cactus.

For more details, refer to Radial Group Layout.

Compact Disk Layout

The CompactDiskLayout arranges the graph’s nodes on a disk, optimizing the compactness of the placement.

For more details, refer to Compact Disk Layout.

Edge Routing Algorithms

All edge routing algorithms provided by yFiles implement the ILayoutStage interface. A stage makes it easy to use an edge routing algorithm as a postprocessing step to any of the major layout algorithms (for example, first apply the organic layout to place the nodes and then an edge routing algorithm to obtain orthogonal instead of straight-line edge routes).

yFiles supports different edge routing stages:

EdgeRouter: The main router creates orthogonal, octilinear, curved, and bus-style routes. It provides flexible customization options to suit a wide range of graph layouts.
OrganicEdgeRouter: A router that generates smooth, natural-looking edge paths. It avoids node overlaps and minimizes edge crossings, creating a visually appealing flow for networks.
ParallelEdgeRouter: Specially designed for handling multi-edges between the same pair of nodes. This router ensures that edges are evenly spaced and visually distinct.
SelfLoopRouter: Routes edges that loop back to their originating node, ensuring clear, non-overlapping loops with customizable size and curvature for better readability in dense diagrams.
BundledEdgeRouter: Groups edges into shared bundles to reduce visual clutter and emphasize the overall flow of the graph, creating smooth, aesthetically pleasing edge paths.
StraightLineEdgeRouter: Creates direct, straight-line connections between nodes, offering the simplest edge routing style for clear and uncluttered layouts.

In the following, the EdgeRouter and the OrganicEdgeRouter are discussed in greater detail.

Edge Router

The EdgeRouter can be used to route edges as orthogonal, octilinear, or curved segments. It prevents edges from crossing nodes, while maintaining the positions of the nodes in the diagram.

Some potential applications include electric circuit design, floor planning, and navigation maps.

It can also generate bus-style representations by bundling edges of complete (sub)graphs.

Edge Router with bus-style routes — Sample bus-style edge routing

For more details, refer to Edge Routing.

Organic Router

The OrganicEdgeRouter routes edges in smooth curves around the nodes.

For more details, see Organic Edge Routing.

Label Placement

Generic Labeling

The GenericLabeling algorithm works independently of any layout algorithm and can be applied to any kind of diagram. It calculates positions for labels in a given graph without changing the positions of nodes or edges. Therefore, it’s a good starting point if you want to quickly improve your graph’s labeling. The algorithm’s main goal is to clarify the association of labels with their nodes or edges while avoiding overlaps with other graph elements.

For more details, see Generic Labeling.

Integrated Labeling

Some layout algorithms already provide automatic edge label placement as an integrated part of the layout calculation. This approach can completely prevent label overlaps.

Printing Applying an Automatic Layout