Chapter 10. Automatic Graph Layout

Table of Contents

Layout Algorithms
Advanced Layout Concepts
Using yFiles Layout Functionality
Layout Infrastructure
IGraph-related Adapter Mechanisms
Concepts
The Layout Stages Concept
Default Compound Layout Process
Providing Supplemental Layout Data
Abort Mechanism for Layout Calculations
Advanced Layout Concepts
Grouped Graphs
Setup for Layout
Port Constraints
Setup for Layout
Tutorial Demo Code
Port Candidates
Matching Port Candidates
Setup for Layout
Tutorial Demo Code
Modeling Enhanced Port Constraints Using Port Candidates
Setup for Routing
Edge/Port Grouping (Bus-Style Edge Routing)
Setup for Layout
Tutorial Demo Code
Partition Grid
Setup for Layout
Node Halos
Incremental Layout
Use Cases
Related Concepts
Layout Stages
Tutorial Demo Code
Class ComponentLayouter
Supplemental Layout Data
Layout Options
Advanced Layout Techniques
Tutorial Demo Code
Class GraphLayoutLineWrapper
Layout Options
Major Layout Algorithms
Circular Layout
Hierarchical Layout
Organic Layout
Orthogonal Layout
Tree Layout
Radial Layout
Domain-Specific Layout Algorithms
Family Tree Layout
Supplemental Layout Data
Layout Options
Circular Layout
Supplemental Layout Data
Layout Options
Layout Style
Returning Circle Indices
Partition Arrangement Options
Tree Arrangement Options
Label Handling
Node Label Awareness
Node Halos
Tutorial Demo Code
Configuration Hints
Compact Layout
Hierarchical Layout Style
About the Style
Terminology
Application Areas
Relevant Classes
Class IncrementalHierarchicLayouter
Layout Options
Drawing Style Options
Non-incremental Layout Mode
Layer Assignment Options
Node Order Options
Incremental Layout Mode
Use Cases
Specifying Hints
Constrained Layer Assignment
Constrained Node Sequencing
Emphasizing Critical Paths
Advanced Layout Concepts
Integrated Labeling
Node Label Awareness
Port Constraints
Port Candidates
Edge/Port Grouping (Bus-style Edge Routing)
Node Halos
Layout of Grouped Graphs
Related Classes
Class SimplexNodePlacer
Applicable Layout Stages
Swimlane Layout
Tutorial Demo Code
Supplemental Layout Data
Related Layout Algorithms
Organic Layout Style
About the Style
Application Areas
Relevant Classes
Class SmartOrganicLayouter
Drawing Style Options
Algorithm Execution Options
Incremental Layout
Layout of Grouped Graphs
Group Node Handling
Partitioned Layout
Label Handling
Node Label Awareness
Node Halos
Configuration Hints
Quality Versus Time
Compactness
Overlap Removal
Tutorial Demo Code
Supplemental Layout Data
Related Layout Algorithms
Interactive Organic Layout
General Usage
Setup
State
Polling for Results
Interaction
Supplemental Layout Data
Layout Options
Output Restrictions
Orthogonal Layout
Supplemental Layout Data
Layout Options
Orthogonal Layout of Grouped Graphs
Label Handling
Integrated Labeling
Node Label Awareness
Related Classes
Applicable Layout Stages
Tutorial Demo Code
Configuration Hints
Quality Versus Time
Orthogonal Layout of Grouped Graphs
Supplemental Layout Data
Layout Options
Label Handling
Integrated Labeling
Node Label Awareness
Related Classes
Applicable Layout Stages
Tutorial Demo Code
Directed Orthogonal Layout
Supplemental Layout Data
Layout Options
Advanced Layout Concepts
Directed Edges
Edge/Port Grouping (Bus-style Edge Routing)
Integrated Labeling
Node Label Awareness
Node Halos
Related Classes
Applicable Layout Stages
Tutorial Demo Code
Compact Orthogonal Layout
Layout Options
Applicable Layout Stages
Tutorial Demo Code
Tree Layout
Advanced Layout Concepts
Sorting Child Nodes
Enhancing the Layout Process
Tutorial Demo Code
Directed
Supplemental Layout Data
Layout Options
Advanced Layout Concepts
Node Halos
Integrated Labeling
Incremental Layout
Balloon
Supplemental Layout Data
Layout Options
Advanced Layout Concepts
Node Halos
Integrated Labeling
Incremental Layout
Horizontal/Vertical
Supplemental Layout Data
Layout Options
Compact
Supplemental Layout Data
Layout Options
Generic Tree Layout
Supplemental Layout Data
Layout Options
Node Placer Implementations
Advanced Layout Concepts
Integrated Labeling
Port Constraints
Node Halos
Incremental Layout
Grouping Support
Tutorial Demo Code
Radial Layout Style
About the Style
Terminology
Class RadialLayouter
Layout Options
Drawing Style Options
Advanced Layout Concepts
Node Halos
Supplemental Layout Data
Partial Layout
About the Concept
Class PartialLayouter
Subgraph Components
Edge Routing
Drawing Style Options
Algorithm Execution Options
Support for Grouped Graphs
Configuration Hints
Consider Node Alignment
Subgraph Component Placement
Tutorial Demo Code
Supplemental Layout Data
Multi-page Layout
About the Concept
Terminology
Relevant Classes
Class MultiPageLayouter
Setup for Layout
Layout Options
Algorithm Execution Options
Related Classes and Interfaces
Class MultiPageLayout
Interface IElementFactory
Tutorial Demo Code
Supplemental Layout Data
Edge Routing Algorithms
Organic Routing
Orthogonal Routing
Organic Edge Routing
Routing Options
Enhancing the Routing Process
Supplemental Layout Data
Tutorial Demo Code
Polyline Edge Routing
About this Algorithm
Relevant Classes
Class EdgeRouter
Routing Options
Advanced Routing Concepts
Label Awareness
Port Constraints
Port Candidates
Edge/Port Grouping (Bus-style Edge Routing)
Node Halos
Routing in Grouped Graphs
Routing in Partition Grids
Incremental Routing
Related Classes
Monotonic Edge Paths
Supplemental Layout Data
Orthogonal Edge Routing
Supplemental Layout Data
Routing Options
Monotonic Edge Paths
Advanced Routing Features
Port Constraints
Port Candidates
Incremental Routing
Label Handling
Node Label Awareness
Enhancing the Routing Process
Tutorial Demo Code
Channel Edge Routing
Supplemental Layout Data
Routing Options
Affected Edges
Advanced Routing Features
Port Constraints
Port Candidates
Incremental Routing
Related Classes
Applicable Layout Stages
Tutorial Demo Code
Orthogonal Bus-style Edge Routing
About this Algorithm
Terminology
Relevant Classes
Class BusRouter
Setup for Routing
Routing Options
Incremental Routing
Related Classes
Class BusDescriptor
Class BusRepresentations
Applicable Layout Stages
Advanced Routing Features
Port Constraints
Port Candidates
Configuration Hints
Esthetic Buses
Tutorial Demo Code
Supplemental Layout Data
Automatic Label Placement
Labeling Scenarios
Label Models
Preferred Placement of Edge Labels
Generic Labeling
Using an Alternate Label Model
Supplemental Layout Data
Integrated Labeling
Internal representation of label layout
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 yWorks.yFiles.Layout namespace together with its sub-namespaces 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 Concepts

The yFiles graph layout algorithms support a number of sophisticated features when calculating a graph's layout. Most notably, grouped 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.