Automatic graph layout
yFiles features

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!

Test yFiles free of charge
Do you have questions about yFiles' automatic layouts?

Get in touch to discuss your specific challenges with our diagramming experts. We're here to provide the guidance you need.

Do you have questions about yFiles' automatic layouts?

We´d love to help you. Reach out and we'll get in touch with you.

We are sorry, something went wrong. Please try again.
If the problem persists, please report the error to [email protected].
Thank you!

Your message has been sent.

Hierarchic Layout

The hierarchic 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.

View demo

Organic Layout

he 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.

View demo

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.

View demo

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.

View demo

Circular Layout

Nodes are arranged in circle and star structures to emphasize group and tree structures in a diagram. Circular layouts are used in many areas, such as social networking, network management, WWW visualization, e-commerce and telecommunications.

View demo

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.

View demo

Series-parallel Layout

This layout style arranges certain diagrams into serial and parallel substructures. The compact layout highlights the main direction within directed diagrams. It works well for visualizing electrical circuits, call trees or flowcharts.

View demo

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.

graphComponent.fitGraphBounds()// Create a random directed graph. const nodeCount = 50 for (let i = 0; i < nodeCount; i++) { graph.createNode() } const nodes = graph.nodes.toArray() // Create a tree to have a good skeleton for (let i = 1; i < nodes.length; i++) { graph.createEdge(nodes[Math.floor(Math.random() * (i - 1))], nodes[i]) } // Add additional edges for (let i = 0; i < (0.5 * nodes.length) / Math.log10(nodes.length); i++) { const n1 = Math.floor(Math.random() * nodes.length) const n2 = Math.floor(Math.random() * nodes.length) if (n1 < n2) { graph.createEdge(nodes[n1], nodes[n2]) } else if (n2 < n1) { graph.createEdge(nodes[n2], nodes[n1]) } } // Create and configure the hierarchic layout algorithm const layout = new HierarchicalLayout({ // Specify the main direction of the layout result layoutOrientation: 'left-to-right', // Specify a preferred maximum duration to prevent very long runtimes for LARGE graphs stopDuration: '5s', // Specify minimum distance between nodes and edges nodeToEdgeDistance: 20, nodeDistance: 50, // Specify a routing style and minimum segment lengths for edges defaultEdgeDescriptor: { routingStyleDescriptor: { defaultRoutingStyle: 'orthogonal' }, minimumFirstSegmentLength: 20, minimumLastSegmentLength: 20, }, }) await graphComponent.applyLayoutAnimated(layout)

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.

View demo

Bus Routing

The algorithm bundles edges in very dense diagrams into buses. The paths are calculated so they share as many parts as possible. The result clears up the diagram and makes it easier to follow the edges.

View demo

Organic Edge Routing

This force-directed algorithm routes edges curved around fixed nodes. It can be applied as a post-processing for layout algorithms that produce straight-line edges where edges cross nodes.

View demo

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.

Incremental Layout

Keep the mental map of a diagram when inserting new nodes and edges. Certain layout algorithms provide an incremental mode which keeps most of the existing layout the same and inserts other nodes appropriately into this pre-existing layout.

View demo

Partial Layout

Partial Layout offers a flexible method to maintain specific parts of a diagram in place while recalculating the layout for selected items and integrating them into the overall diagram. It also allows for applying different layout styles to these fixed parts.

View demo

Easy Adjustment of Layout Algorithms

Configure the layout algorithms to meet your specific requirements. Each algorithm offers extensive configuration options to accommodate even the most complex layout needs.

View demo

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.

View demo

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.

View demo

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 Hierarchic 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.

Start building your first
interactive diagramming application!

Download yFiles for free!

Choose your next steps

Get connected

Connect with our Customer Success Team regarding your ideas or projects.

Connect with the real graph drawing experts.

Dive deep

Get more detailed information about specific yFiles topics.

Download yFiles

Try yFiles free of charge.

Download the yFiles trial version.