Chapter 5. Automatic Graph Layout

Table of Contents

Layout Algorithms
Advanced Layout Concepts
Layout Architecture
Graph Structure Enhancements
Positional and Dimensional Information
Advanced Topics
Copying a LayoutGraph
Layout Infrastructure
Concepts
The Layout Stages Concept
Default Compound Layout Process
Using Buffered Layout
Class BufferedLayouter
Providing Supplemental Layout Data
Advanced Layout Concepts
Hierarchically Organized Graphs
Setup for Layout
Tutorial Demo Code
Port Constraints
Setup for Layout
Tutorial Demo Code
Port Candidates
Matching Port Candidates
Setup for Layout
Modeling Enhanced Port Constraints Using Port Candidates
Setup for Routing
Edge/Port Grouping (Bus-Style Edge Routing)
Setup for Layout
Incremental Layout
Use Cases
Layout Stages
Tutorial Demo Code
Class ComponentLayouter
Supplemental Layout Data
Layout Options
Component Arrangement Style (see API)
Component Spacing (see API)
Label Awareness (see API)
Grid Spacing (see API)
Preferred Layout Size (see API)
Arranging Components (see API)
Support for Hierarchically Organized Graphs (see API)
Advanced Layout Techniques
Class GraphLayoutLineWrapper
Layout Options
Column Mode (see API)
Spacing (see API)
Edge Spacing (see API)
Mirroring (see API)
Pre-set vs. Automatic Line Width (Column Height) (see API)
Fixed Line Width (Column Height) (see API)
Aspect Ratio (see API)
Major Layout Algorithms
Circular Layout
Hierarchical Layout
Organic Layout
Orthogonal Layout
Tree Layout
Domain-Specific Layout Algorithms
Family Tree Layout
Supplemental Layout Data
Layout Options
Tutorial Demo Code
Circular Layout
Supplemental Layout Data
Layout Options
Layout Style
Partition Arrangement Options
Tree Arrangement Options
Label Handling
Node Label Awareness
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
Advanced Layout Concepts
Integrated Labeling
Node Label Awareness
Port Constraints
Port Candidates
Edge/Port Grouping (Bus-style Edge Routing)
Layout of Grouped Graphs
Related Classes
Class SimplexNodePlacer
Applicable Layout Stages
Swimlane Layout
Setup for Layout
The Partition Grid
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
Label Handling
Node Label Awareness
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
Maximal Runtime (see API)
Preferred Node Distance (see API)
Preferred Edge Length
Quality (see API)
Output Restrictions
Tutorial Demo Code
Orthogonal Layout
Supplemental Layout Data
Layout Options
Layout Style (see API)
Grid (see API)
Length Reduction (see API)
Optimize Perceived Bends (see API)
Use Existing Drawing as Sketch (see API)
Crossing Postprocessing (see API)
Use Randomization (see API)
Orthogonal Layout of Grouped Graphs
Label Handling
Integrated Labeling
Node Label Awareness
Tutorial Demo Code
Configuration Hints
Quality Versus Time
Orthogonal Layout of Hierarchically Grouped Graphs
Supplemental Layout Data
Layout Options
Label Handling
Integrated Labeling
Node Label Awareness
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
Tutorial Demo Code
Compact Orthogonal Layout
Layout Options
Grid Spacing (see API)
Aspect Ratio (see API)
Tutorial Demo Code
Tree Layout
Advanced Layout Concepts
Sorting Child Nodes
Enhancing the Layout Process
Directed
Supplemental Layout Data
Layout Options
Minimal Layer Distance (see API)
Minimal Node Distance (see API)
Orientation (see API)
Port Style (see API)
Orthogonal Edge Routing (see API)
Bus Alignment
Vertical Alignment
Advanced Layout Concepts
Integrated Labeling
Incremental Layout
Balloon
Layout Options
Root Node Policy (see API)
Preferred Root Wedge (see API)
Preferred Child Wedge (see API)
Minimal Edge Length (see API)
Compactness Factor (see API)
Allow Overlaps (see API)
Advanced Layout Concepts
Incremental Layout
Horizontal/Vertical
Supplemental Layout Data
Layout Options
Horizontal Space (see API)
Vertical Space (see API)
Compact
Supplemental Layout Data
Layout Options
Horizontal Space (see API)
Vertical Space (see API)
Bend Distance (see API)
Preferred Aspect Ratio (see API)
Generic Tree Layout
Supplemental Layout Data
Layout Options
Node Placer Implementations
Advanced Layout Concepts
Integrated Labeling
Port Constraints
Incremental Layout
Grouping Support
Tutorial Demo Code
Edge Routing Algorithms
Organic Routing
Orthogonal Routing
Organic Edge Routing
Routing Options
Route Selected Edges Only (see API)
Minimal Distance (see API)
Use Existing Bends (see API)
Route Only Necessary (see API)
Allow Edge Overlaps (see API)
Enhancing the Routing Process
Tutorial Demo Code
Orthogonal Edge Routing
Supplemental Layout Data
Routing Options
Scope (see API)
Minimum Edge Distance (see API)
Use Custom Minimum Distance to Nodes (see API)
Custom Minimum Distance to Nodes (see API)
Route on Grid (see API)
Grid Spacing (see API)
Space Driven Versus Center Driven Search (see API)
Local Crossing Minimization (see API)
Crossing Cost (see API)
Reroute Crossing Edges (see API)
Advanced Routing Features
Port Constraints
Port Candidates
Incremental Routing
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
Tutorial Demo Code
Automatic Label Placement
Labeling Scenarios
Concepts
Label Models
Generic 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 Concepts

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.