Chapter 5. Automatic Graph Layout

Table of Contents

Layout Algorithms
Advanced Layout Features
Layout Architecture
Graph Structure Enhancements
Advanced Topics
Layout Infrastructure
Concepts
The Layout Stages Concept
Default Compound Layout Process
Using Buffered Layout
Providing Supplemental Layout Data
Advanced Layout Features
Hierarchically Organized Graphs
Port Constraints
Port Candidates
Edge/Port Grouping (Bus-style Edge Routing)
Layout Stages
Tutorial Demo Code
Class ComponentLayouter
Supplemental Layout Data
Layout Options
Advanced Layout Techniques
Class GraphLayoutLineWrapper
Layout Options
Major Layout Algorithms
Circular Layout
Hierarchical Layout
Organic Layout
Orthogonal Layout
Tree Layout
Incremental Layout
Use Cases
Circular Layout
Supplemental Layout Data
Layout Options
Partition Arrangement Options
Tree Arrangement Options
Tutorial Demo Code
Configuration Hints
Hierarchical Layout
Supplemental Layout Data
Layout Options
Drawing Style Options
Layer Assignment Options
Node Order Options
Advanced Layout Features
Package Structure
Tutorial Demo Code
Hierarchical Layout of Hierarchically Organized Graphs
Supplemental Layout Data
Layout Options
Tutorial Demo Code
Incremental Hierarchical Layout
Specifying Hints
Supplemental Layout Data
Layout Options
Drawing Style Options
Advanced Layout Features
Related Classes
Layout of Hierarchically Organized Graphs
Tutorial Demo Code
Organic Layout
Supplemental Layout Data
Layout Options
Advanced Layout Features
Tutorial Demo Code
Smart Organic Layout
Supplemental Layout Data
Layout Options
Advanced Layout Features
Configuration Hints
Interactive Organic Layout
General Usage
Supplemental Layout Data
Layout Options
Tutorial Demo Code
Orthogonal Layout
Supplemental Layout Data
Layout Options
Advanced Layout Features
Tutorial Demo Code
Configuration Hints
Orthogonal Layout of Hierarchically Organized Graphs
Supplemental Layout Data
Layout Options
Tutorial Demo Code
Directed Orthogonal Layout
Supplemental Layout Data
Layout Options
Advanced Layout Features
Tutorial Demo Code
Compact Orthogonal Layout
Layout Options
Tutorial Demo Code
Tree Layout
Enhancing the Layout Process
Directed
Supplemental Layout Data
Layout Options
Advanced Layout Features
Balloon
Layout Options
Advanced Layout Features
Horizontal/Vertical
Supplemental Layout Data
Layout Options
Compact
Supplemental Layout Data
Layout Options
Generic Tree Layout
Supplemental Layout Data
Layout Options
Advanced Layout Features
Tutorial Demo Code
Edge Routing Algorithms
Organic Routing
Orthogonal Routing
Organic Edge Routing
Routing Options
Tutorial Demo Code
Orthogonal Edge Routing
Supplemental Layout Data
Routing Options
Advanced Routing Features
Enhancing the Routing Process
Tutorial Demo Code
Channel Edge Routing
Supplemental Layout Data
Routing Options
Advanced Routing Features
Related Classes
Tutorial Demo Code
Automatic Label Placement
Labeling Scenarios
Concepts
Label Models
General Labeling
Integrated Labeling
Tutorial Demo Code

This chapter discusses the yFiles layout algorithms, and explains their options and customization possibilities. It shows how to create and invoke the algorithms, and how to achieve aesthetic and clear graph layouts. Also, the general layout architecture is introduced, and common concepts for the layout algorithms are described.

Layout Algorithms

The yFiles package y.layout together with its sub-packages provides a multitude of different layout algorithms and styles. The algorithms divide into three main categories:

  • Graph layout algorithms are responsible for assigning coordinates to all graph elements. More precisely, the nodes of a graph are placed according to some optimization criteria, and edge paths are also generated.
  • Edge routing algorithms process only edges, i.e., they compute edge paths. The nodes of a graph are left unchanged, neither their position nor their size is altered in any way.
  • Label placement algorithms leave both a graph's nodes and its edge paths unaltered, but compute suitable positions for labels. Their criteria for the arrangement are such that the labels do not overlap with each other or any of the graph elements.

Optimization criteria for graph layout algorithms are numerous. They vary from minimizing the length of edge paths to minimizing the number of bends, from placing highly connected components tightly together to placing nodes in a hierarchical top-to-bottom manner. Besides the rather unemotional nature of such optimization, a graph layout algorithm at the same time also aims at making its outcome an aesthetically pleasing experience for a user.

Advanced Layout Features

The yFiles graph layout algorithms support a number of sophisticated features when calculating a graph's layout. Most notably, hierarchically organized graphs and arranging their grouped nodes is supported. Bus-like edge paths can be generated for edges connecting to a common node, and both starting point and end point of an edge path can be constrained to a specific side of a node or even explicit coordinates. Additionally, some algorithms provide labeling as an integrated part of layout generation.