Hierarchical Layout

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

Hierarchical layouts are an essential tool for supply chain visualization, enabling a clear and scalable overview of distribution steps, supplier dependencies, inventory hand-offs, transportation routes, and order fulfillment. Visualizing supply chains with yFiles uncovers bottlenecks, reduces risk, and supports regulatory compliance by easily tracing every material or product through the entire logistics network. Real-time mapping of supply chain processes helps you optimize workflows, improve transparency, and communicate complex relationships between vendors, facilities, and customers—supporting efficient supply chain management and audit readiness.

Hierarchical supply chain diagrams are invaluable for documenting, analyzing, and demonstrating compliance within global or regional supply chains. When you need to prove traceability or verify supplier integrity, a structured visualization makes regulatory or partner audits much easier and faster.

With yFiles React Supply Chain Components, you can quickly build your own interactive supply chain application—customize data sources, tailor visualizations, and integrate advanced network analysis features without having to build everything from scratch.

Illustrating the sequence of activities in a business process, often with a left-to-right flow and swimlanes to denote responsibilities. yFiles fully supports BPMN-DI, enabling developers to effortlessly create and integrate BPMN tools into various applications. The automatic layout capabilities ensure clear and visually appealing diagrams with minimal effort.

Benefits of yFiles for BPMN include advanced customization, interactive visualization, and robust features for optimal diagramming.

Hierarchical layouts are the gold standard for visualizing company ownership structures and legal entity relationships. With yFiles, you can automatically generate clear entity-relationship diagrams showing corporate hierarchies, beneficial ownership, shareholding percentages, and cross-border connections. Exploring complex company trees or group structures becomes fast, interactive, and accessible—even with hundreds of entities or multi-level ownership paths.

Effective ownership visualization streamlines risk analysis, enables quick due diligence, and supports legal compliance or Anti-Money Laundering (AML) investigations. Structured diagrams make it easy to trace direct and indirect ownership, identify ultimate beneficial owners (UBO), and analyze control structures for regulatory reporting.

The yFiles React Company Ownership Components let you build custom, interactive company ownership applications in no time—integrate any data source, customize for your compliance workflow, and empower users to explore group structures or visualize corporate networks on any platform.

Representing general processes, workflows, or algorithms with a top-to-bottom or left-to-right progression. yFiles offers a specialized hierarchical layout algorithm that is ideal for visualizing flow diagrams, clearly highlighting the direction and sequence of steps.

The automatic layout minimizes edge crossings and optimizes node placement for readability. yFiles provides extensive customization options for node styles, edge routing, and labeling to create clear and effective flow diagrams.

Hierarchical layouts are the best choice for visualizing organization charts (org charts), HR structures, and reporting hierarchies. With yFiles, you can automatically create clear visualizations that map out reporting relationships, department structures, responsibility lines, and management chains. Handling hundreds or even thousands of employees or multi-level departments remains fast and interactive thanks to automatic layout and smart edge routing.

Visualizing organizational structures makes it easy to see team compositions, identify management gaps, ensure compliance with corporate policies, and support workforce planning or reorganization. Interactive org charts accelerate onboarding and give leadership and HR teams actionable insights for organizational analysis and change management.

The yFiles React Org Chart Components let you quickly build, customize, and deploy interactive organization chart applications—connect any HRIS or directory, tailor visuals for your audience, and support dynamic editing or analytics out of the box.

Visualizing activity diagrams or other flow-oriented aspects of software design. yFiles is well-suited for UML diagram visualization, offering sophisticated layout algorithms that automatically arrange diagram elements for clarity.

The library supports various UML diagram types, including activity diagrams, and allows for customization of node and edge styles to adhere to UML specifications.

Benefits of using yFiles for UML include its ability to handle complex diagrams and its interactive features for dynamic exploration.

Combining hierarchical structures with sub-components rendered using different layout algorithms (e.g., circular, radial, and organic layouts) for enhanced visual clarity. yFiles allows for the integration of different layout algorithms within the same diagram, often through the use of group nodes.

This enables developers to highlight specific sub-structures within a larger hierarchical diagram using layouts that are best suited for those components, such as using a Circular Layout to emphasize cyclical relationships within a process step or an Organic Layout to show interconnectedness within a subsystem.

yFiles provides the tools to easily combine these different visual representations for more insightful diagrams.

The inherent ability of hierarchical layouts to emphasize directionality and levels of hierarchy makes complex information easily digestible, facilitating understanding and analysis.

The process of applying a hierarchical layout in yFiles generally involves these three stages:

1. Layer assignment: Nodes are assigned to layers such that the source of an edge is preferably placed in a layer above (or before) that of the target. This reduces the number of edges pointing against the main flow direction and keeps the structure clear and intuitive.
2. Sequencing: Within each layer, nodes are ordered to minimize edge crossings, improving the readability of the graph.
3. Drawing (Coordinate assignment and edge routing): The algorithm determines precise node positions and routes edges intelligently, taking into account port constraints and the placement of edge labels.

This initial stage organizes the nodes into distinct tiers or levels, aligning them with the primary direction of the flow you want to visualize. By default, the layout engine intelligently assigns nodes to layers based on their connections, but you can exert finer control. Custom layer constraints enable you to dictate the relative vertical or horizontal positioning of specific nodes, ensuring that certain elements always appear before or after others in the flow.

• Nodes are assigned to layers according to flow direction (top-to-bottom or left-to-right).
• Custom layer constraints allow placing specific nodes above/below others

Once nodes are assigned to layers, the sequencing step determines their order within each individual layer. This horizontal or vertical arrangement aims to minimize edge crossings, which can make diagrams difficult to read. While the algorithm strives for optimal sequencing automatically, you can introduce constraints to enforce a particular order of nodes on a given layer. This is useful for emphasizing a specific sequence of actions or logical grouping within a process stage.

• Nodes within a layer are ordered (left-to-right or top-to-bottom)
• Constraints can enforce custom sequences.

The way edges (connections between nodes) are routed has a significant impact on the clarity and overall aesthetics of a diagram. yFiles offers multiple routing styles—including orthogonal, polyline, and curved edges—to match your data and visual preferences. You can further refine your diagrams by setting minimum edge distances, adjusting edge thickness, and grouping related edges to reduce clutter and highlight logical connections. You also have precise control over the location where edges enter or leave nodes. Together, these options ensure that your diagrams remain well-structured, visually appealing, and easy to read—even for complex graphs.

• Flexible routing styles: orthogonal, polyline, or curved edges.
• Fine-grained control: adjust minimum distances, edge thickness, or group edges for bus-like routing.
• Precise control over connection points: specify sides (e.g., west, north) or exact locations where edges connect to nodes.

To ensure that labels on the edges don't obscure the diagram, yFiles factors them into the layout calculation from the outset. This "integrated" approach prevents labels from overlapping nodes or edge paths. You can also specify a preferred placement for labels, such as positioning them consistently on the left side of an edge, above it, or near the source or target node, along with defining the distance between the label and the edge itself for optimal readability.

• Labels are factored into layout early on — avoiding overlaps.
• Supports preferred placement, e.g., left side, above edge, or at source/target.

In essence, the hierarchical layout in yFiles achieves its structured and readable diagrams through a carefully orchestrated process involving layering, sequencing, edge routing, and integrated labeling.

These principles work in concert to minimize visual clutter, emphasize flow direction, and ensure that even complex relationships are presented in an understandable manner. Mastering these core concepts is key to unlocking the full potential of yFiles for creating superior hierarchical visualizations.

The incremental layout feature in yFiles (referred to as "from-sketch mode" in the API) integrates new or modified nodes and edges into your existing diagram by adapting the layout intelligently. While the positions of unchanged elements are not guaranteed to stay fixed, the algorithm aims to retain as much of the original drawing as possible, helping to preserve context and provide stable, clear visualizations as your graph evolves.

Incremental layout is ideal for applications where changes occur dynamically or in real time, such as editing workflows, expanding trees, or visualizing live data. With yFiles, you can enable this mode to provide seamless, responsive updates as your users interact with the graph.