Automatic Graph Drawing
The many ways of arranging and connecting diagram elements
Data often has an underlying graph or network structure where so-called nodes represent the entities, and edges represent the relationships/links among those entities. Suitable drawings of such graphs help to gain insight into the data and reveal information about this structure in a fast and easy way. They are often superior to a presentation by tables, text, or adjacency matrices.
Of course, manually creating such drawings is very time consuming and outright impractical for massive data sets. Automatic graph drawing algorithms help to generate such diagrams at low costs. There are many different types of such algorithms with different capabilities and drawing styles. Some of them are generic and highly adaptable and thus apply to an extensive set of different data and use cases. Other algorithms are more specific and designed to adhere to domain-specific rules and constraints for applications such as BPMN, UML, or organization chart diagrams.
yFiles provides both several sophisticated, fully configurable, and extensible, generic layout algorithms as well as domain-specific algorithms. The Layout Styles Example showcases all drawing algorithms offered by the yFiles library.
Layered Drawing Algorithm
Layered graph drawing algorithms - also known as hierarchical layout or Sugiyama algorithm - distribute the nodes over layers so that most of the edges point in the main layout direction. This arrangement facilitates the identification of dependencies and hierarchic relationships between the elements in the graph.
Possible applications are workflow visualization, call graph visualization, entity-relationship diagrams, UML class and activity diagrams, biochemical pathways, genealogical data, and network management.
The yFiles library contains a sophisticated implementation of this approach called Hierarchic Layout. It provides advanced features like incremental layout, nested graphs, label placement, different edge routing styles (e.g., bus-like routes). It also supports many constraints like swimlanes or tabular grid structures, specific element orders, and port assignments.
All options of the Hierarchic Layout can be explored using the Hierarchic Layout Example.
Force-Directed Drawing Algorithm
The force-directed layout style - also known as organic layout, spring-embedder, or energy-based placement style - is characterized by a natural distribution of nodes that exhibits clusters and symmetric properties of the graph. It places nodes space-saving and close to their adjacent nodes and routes edges with straight-line segments without bends.
Possible applications are visualizing relations in large networks, for example, in bioinformatics, enterprise networking, social network analysis, mesh visualization, or systems management.
The Organic Layout of the yFiles library implements the force-directed approach and supports different node sizes and preferred edge lengths, nested graph elements, swimlanes, and label placement. It can also emphasize substructures like chains, stars, and cycles.
All options of the Organic Layout can be explored using the Organic Layout Example.
Tree Drawing Algorithm
Trees are a particular type of graph characterized by containing a global root node with an arbitrary number of children that are again local roots of their respective subtrees. Specifically, a tree never contains cycles. Tree drawing algorithms reveal a hierarchic order within the graph by highlighting these parent-child relations. Hence, children are often placed below or radially around their parents.
Tree drawings are commonly used for visualizing relational data and for producing high-quality diagrams that can reveal possible hierarchic properties of the graph. More precisely, they find applications in data-flow analysis, software engineering, bioinformatics, and business administration.
The Tree Layout included in yFiles is a highly customizable algorithm that provides many different arrangement styles for a wide range of such applications, e.g., organizational charts. It supports different routing styles for edges, label placement, and nested graph structures.
The Balloon Layout of yFiles arranges the children around their parents. It also comes with label placement and several options that influence the overall arrangement style.
All options of the Tree Layout and the Balloon Layout can be explored using the Tree Layout Example and the Balloon Layout Example
Orthogonal Drawing Algorithm
Orthogonal layout algorithms - also known as topology-shape-metrics approaches - highlight planarity and minimize the number of bends. They place the nodes on a grid and routes the edges as a sequence of alternating horizontal and vertical segments. They are well suited for small and medium-sized sparse graphs.
Application domains of orthogonal drawings include software engineering, database schema representation, system management, knowledge representation, VLSI circuits, UML class diagrams, and floor planning applications.
yFiles contains an Orthogonal Layout algorithm that provides label placement, support for nested graph elements, and highlighting substructures.
All options of the Orthogonal Layout can be explored using the Orthogonal Layout Example.
Circular Drawing Algorithm
The circular layout style emphasizes clusters and interdependencies within a graph’s structure.
Circular drawings find applications in many areas such as social networking, network management and visualization, eCommerce, and telecommunications.
The Circular Layout algorithm that comes with yFiles supports label placement, different clustering strategies, and edge bundling.
All options of the Circular Layout can be explored using the Circular Layout Example.
Series-Parallel Drawing Algorithm
Series-parallel drawings apply to graphs with a specific kind of structure consisting of a recursive composition of series and parallel operations.
These kinds of drawings highlight the main layout direction and produce compact results showing bus-like edge routing with few bends. They are especially suitable for visualizing circuits and call trees.
The Series-Parallel Layout implementation provided by yFiles supports predefined ordering of nodes, label placement, different alignments within parallel compositions, and several edge routing styles.
All options of the Series-Parallel Layout can be explored using the Series-Parallel Layout Example.
Radial Drawing Algorithm
Radial drawings are a special kind of a layered layout that draws layers as concentric circles. This arrangement style works best for tree-like graphs or other graphs that depict hierarchical relationships.
Possible applications for radial drawings are visualizations of hierarchies, for example, in organizational charts or bioinformatics.
yFiles contains a Radial Layout algorithm that comes with different strategies for choosing the center nodes and layer assignment.
All options of the Radial Layout can be explored using the Radial Layout Example.
Edge Routing Algorithms
If the locations of the nodes are already determined, it is often necessary to find suitable routes for the edges in a graph. Edge routing algorithms provide different styles of edge routes that avoid node-edge overlaps.
yFiles provides routing support for orthogonal, octilinear, and organic styles as well as bus-like routing.
The Bus Router Example and the Polyline Router Example display all options to configure these routing algorithms.
Generic Labeling Algorithms
Labeling algorithms compute positions for labels in a given graph drawing without modifying the positions of nodes or edges. Their main objective is to clarify the affiliations of the labels to their nodes or edges while avoiding overlaps with other graph elements.
While most of the yFiles algorithms already support integrated labeling, Generic Labeling adds this functionality to all other layout algorithms and is also useful for adding new labels incrementally.
Some example applications that showcase generic label placement: Edge Label Placement, Node Label Placement
Special-purpose Drawing Algorithms
In addition to the previously mentioned generic, highly adaptive layout algorithms, yFiles comes with several predefined, domain-specific configurations like BPMN Layout and Family Tree Layout.
These algorithms make it possible to generate such diagrams very quickly out-of-the-box, without requiring additional effort to adapt the generic algorithms to the specific rules and constraints of these applications.