The Most Complete Layout Selection—for Any Diagramming Use Case The Automatic Layouts Feature of yFiles
yFiles features efficient and highly customizable algorithms for automatic layouts. The different layout styles are responsible for determining the locations of all diagram elements based on different optimization criteria. A variety of layout styles are included: Hierarchic, organic (force-directed), tree, orthogonal, circular, radial and series-parallel. All layout algorithms can be applied to a diagram in an animated fashion. Almost all aspects of each layout algorithm can be customized to fit a specific domain and use case.
Create interactive diagrams with yFiles, the network visualization library
The yFiles diagramming library supports every step, whether exploring its capabilities for the first time or developing a complete prototype. With hundreds of source-code demos available, getting started or diving into specific use cases is straightforward. Expert guidance from core developers ensures that challenges can be addressed efficiently.
Start visualizing complex networks and dynamic relationships today with yFiles!
Thank you!
Your message has been sent.
We'll get back to you as soon as possible.
Hierarchical Layout
The hierarchical layout style arranges nodes in layers so that most edges point in the main layout direction. This layout effectively highlights dependencies and relationships between nodes within a diagram. Consequently, it is well-suited for workflow visualization, process visualization, call-graph visualization, entity-relationship diagrams, biochemical pathways, network management, and swimlane diagrams.
Organic Layout
The organic layout style uses a force-directed approach to distribute nodes in a natural way. This layout uncovers clusters and symmetries in the diagram. It works well for large networks in bioinformatics, enterprise networking, social network graphs, mesh visualization or system management.
Tree Layout
yFiles supports different layout styles for diagrams that have a tree structure. This can be either an organic-looking style that organizes the tree in a star structure around the root node. Or a highly flexible layout style that arranges a tree in layers.
The layouts are able to reveal possible hierarchic relations within the diagram. They're used to visualize relational data, dataflow analysis, software engineering, bioinformatics and business administration.
Orthogonal Layout
The algorithm produces a compact layout with orthogonal edges and no inherent direction. This enables a clear representation of complex networks. Orthogonal drawings are used in software engineering, database schema representation, system management, knowledge representation, VLSI circuits and floor planning applications.
Radial Layout
The radial layout style arranges nodes in concentric circles. Each child node is placed on a larger circle than its parent node. This layout style is well suited for diagrams with many parent-child relationships. If the graph grows, the circles grow larger as well. It can be applied to visualize social networks, data clustering and in bioinformatics.
Radial Tree Layout
The radial tree layout algorithm, formerly known as the balloon layout, is designed to arrange directed and undirected tree graphs. Subtrees rooted at a node are placed in a radial fashion around their root node. All direct children of one node can be placed on a common circle around their parent node (depending on the alignment policy).
yFiles Playground: Automatic Graph Layouts
Automatic graph layouts make organizing your diagrams effortless. Try out different layout algorithms like hierarchic, orthogonal, or radial to see how they automatically arrange nodes and edges for optimal clarity and aesthetics.
graph.nodeDefaults.size = [70, 70];
graph.nodeDefaults.style = new ShapeNodeStyle({
shape: ShapeNodeShape.ELLIPSE,
cssClass: "node",
});
graph.nodeDefaults.labels.style = new LabelStyle({
shape: LabelShape.PILL,
backgroundFill: "white",
backgroundStroke: "1px solid #6A8293",
font: "15px poppins",
textFill: "#6A8293",
});
graph.edgeDefaults.labels.style = new LabelStyle({
shape: LabelShape.PILL,
backgroundFill: "#6A8293",
backgroundStroke: "1px solid white",
font: "15px poppins",
textFill: "white",
});
graphComponent.fitGraphBounds()
Edge Routing Algorithms
Edge routing algorithms compute suitable paths for edges without moving the nodes at all. In general, the goal is to find the best routes for edges so they do not cross any nodes, if possible. yFiles supports different routing styles such as orthogonal or polyline, orthogonal bus-like and organic.
Orthogonal and Polyline Edge Routing
The algorithm calculates new paths for some or all edges in an existing layout. These paths consist of horizontal and vertical segments with as few crossings and bends as possible. The routing is suitable for electric circuit design, floor planning and navigation maps.
Common Layout Features
Each of the layout algorithms mentioned above is highly configurable individually, but they also share several common features. They can calculate layouts for diagrams containing group nodes or swimlanes and allow for edges to be restricted to enter or exit on specific sides of a node. Incremental layout preserves the user's mental map of the diagram by minimizing changes when elements are added or removed, ensuring the diagram remains as consistent as possible.
Animated Layout Changes
Calculate a new layout and apply the results with animation. Easily transition between different layouts by animating the changes in the diagram.
Layout Time Restriction
Restrict the time for layout calculation. Layout algorithms can be stopped after a certain amount of time. They may either complete with a valid but potentially lower-quality layout or abort without producing a result.
Restricted Port Locations
Restrict the direction or even the exact location in which each edge is allowed to connect to a node. Such restrictions can also be easily combined to specify a set of valid port locations that can be chosen by the layout algorithm.
Edge Groups
Edges that connect to the same source or target node can be bundled into an edge group. Edge groups share the first or last few segments, this reduces visual clutter and makes it easier to follow the paths of edges.
Bundled Edges
In some diagrams there can be many edges, especially in closely-packed structures. Edge bundling results in organic-looking edge paths where edges with similar routes are pulled closer together. This approach is commonly used in bioinformatics, social network analysis, telecommunications and fraud detection.
Label Placement
Most layout algorithms can accommodate labels on nodes and edges, reserving space to place them near their corresponding elements without causing overlaps. If that approach is not possible, a generic labeling algorithm can be used. Similar to edge routing, which only changes edge paths without modifying anything else, labels are then placed according to the provided settings in a separate step without changing node locations or edge paths.
Grouped Graphs
When the diagram contains group nodes, then those should not overlap and their contents should be placed closely together so that they still appear visually grouped. Most layout algorithms support placing group nodes according to those criteria. It is even possible to use different layout styles for the contents of each group.
Tables and Swimlanes
Sometimes processes are best visualized in tables or swimlanes. The hierarchical layout, especially, supports the assignment of nodes to a grid-like structure. Node orders are constrained and complicated edge paths through the rows and columns are avoided.
Automatic graph layouts are just one part Check out what else can be done with yFiles
Visualization
yFiles provides rich visualizations for nodes, edges, labels, and ports along with options for styling selection and highlighting. If the desired visualization is not covered by the default ones, you can easily create completely custom visualizations.
User interaction
yFiles also offers versatile interaction possibilities. Set up a complete diagram editor for creating and editing graphs, with just a single line of code. Of course, everything about the interaction can be extensively customized to your requirements, and if the built-in gestures don't suffice, it's easy to add custom interactions.
Graph analysis
yFiles allows you not only to create, edit, display, and arrange graphs. There are also a number of analysis algorithms to determine common structural traits (such as connectivity, cycles, whether a graph is a tree and much more), pathfinding and reachability, clustering and centrality measures, graph traversals and many others.
Recap
Automatic layouts
yFiles provides a comprehensive suite of automatic layout algorithms essential for optimal network and graph visualization. This collection includes various specialized styles—such as hierarchical, organic, tree, orthogonal, circular, radial, and series-parallel layouts—each designed to optimize diagram organization based on specific data structures. Beyond the main styles, the page highlights specialized edge routing algorithms and common layout features, like incremental/partial layout, animation, group support, and edge bundling. Users can immediately test these capabilities in the live playground. Ultimately, automatic layouts are presented as one core component alongside additional yFiles features such as visualization, interaction, and analysis.
Related content
Choose your next steps
Get connected
Connect with our Customer Success Team regarding your ideas or projects.
Download yFiles
Try yFiles free of charge.
