Orthogonal Layout

Discover concepts, use cases, and practical customization of the orthogonal layout

By arranging nodes and edges exclusively along vertical and horizontal lines, the orthogonal layout keeps class relationships, inheritance chains, and interface implementations immediately clear—no matter the complexity of your code base.

In yFiles, orthogonal layout minimizes edge crossings and bends, aligning classes and their connections perfectly to a logical, grid-based framework. The result: class hierarchies and associations are presented in a clean, accessible format that accelerates code understanding and onboarding.

Orthogonal layout excels at visualizing flowcharts, activity diagrams, and process workflows—types of diagrams where clear, direct flows and easy path-following are essential.

The layout makes process steps, control flows, and alternative branches easy to trace from start to finish. With yFiles, you can interactively build, update, and rearrange flow and activity diagrams. The orthogonal layout adapts instantly, keeping everything structured, readable, and aesthetically consistent—whether diagramming business processes, software logic, or organizational workflows.

Langner, Inc. uses yFiles’ orthogonal layout to visualize complex industrial control networks in a clear, CAD-style manner. This approach helps represent digital assets and their connections with right-angle edges, making diagrams familiar and easy to understand for users. The ability to minimize edge crossings and bends improves clarity and usability, which is crucial for cybersecurity risk assessment in critical infrastructure like power plants and factories. By integrating yFiles, Langner’s OTbase software offers fast, interactive network visualization with export options such as Visio, enhancing both security oversight and user adoption.

First of all, one of the key principles is that nodes are positioned on a grid. This sets orthogonal layout apart from other types, such as hierarchical layout, where node placement is more flexible. The grid-based positioning in orthogonal layouts enforces strict horizontal and vertical alignment, which helps maintain a clean and structured visual organization throughout the diagram.

Orthogonal layout operates on the basic assumption that both nodes and edge segments are placed on a grid. This introduces certain constraints, but also helps achieve a clean and structured layout. The layout algorithm aims not only to reduce the number of bends and crossings, but also to minimize the overall grid area used, resulting in a more compact drawing.

Another key assumption is the use of the Kandinsky model. In early scientific applications of orthogonal layouts, it was assumed that each node could have at most one edge per side, meaning a maximum of four incident edges. This was too limiting for many real-world use cases, where nodes often have higher degrees. The Kandinsky model addressed this by allowing multiple edges per side.

In this model, one edge can exit a side without bending (the center edge), while the others bend slightly away from it, those on the left side bend left, and those on the right bend right. This approach allows for higher-degree nodes while maintaining the orthogonal structure and explains some of the bending behavior you might observe in such diagrams.

The process begins with an arbitrary input graph. In the first step, the algorithm fixes the topology. This means it places nodes on the plane and determines the order in which edges leave each node, creating a rough layout. From this, it can identify edge crossings. The goal here is to minimize crossings, which is done through an optimized algorithm. Any remaining crossings are replaced with dummy nodes so that the resulting graph can be processed without any actual edge overlaps. If the input graph can be drawn without crossings, the algorithm will produce such a layout.

Next is the shape step, where the structure of each edge is defined. The algorithm determines which segments are horizontal or vertical and where the bends occur, but not yet how long each segment should be. At this point, it also aims to minimize the number of bends, keeping the visual structure as simple as possible.