yFiles Layout Algorithms for React Flow

The useLayout hook serves as the primary interface for integrating yFiles layout algorithms into your React Flow components. As previously mentioned, to run a layout algorithm the runLayout-method has to be called with the name of the desired layout algorithm.

Optionally, you can configure the layout algorithm according to your requirements using the available properties of each algorithm. For instance, the layout can be enhanced by providing additional properties such as routing styles, node/edge distances, layout orientation or defining mappings for specific elements like port candidates.

For more information on how to configure a layout algorithm, please refer to the documentation.

Certain algorithms, such as hierarchic or orthogonal layout, offer predefined port locations or support polyline edges. Additionally, many of these algorithms facilitate automatic label placement of nodes and edges.

To seamlessly integrate the algorithm results, consider employing for nodes the MultiHandleNode style. This custom style accommodates multiple handles on a node and a label. If you already have a custom style, you can enhance it by wrapping it with the withMultiHandles higher-order component (HOC).

Similarly, for robust support of polyline edge routes, consider incorporating the PolylineEdge style for edges.

For more information on applying custom styles, please refer to the documentation.

The yFiles Layout Algorithms for React Flow features support for labeling algorithms, allowing users to place labels on both nodes and edges. Labels can be positioned either by opting for a layout algorithm that inherently allocates space for node/edge labels and positions them accordingly (e.g., HierarchicLayout, OrganicLayout), or by directly applying the GenericLabeling algorithm.

Node labels can be positioned inside or outside the nodes, and they can also be rotated depending on the configuration of the layout algorithm. Similarly, edges can have several labels, and additional information about where to place them can also be given to the layout/labeling algorithm.

For additional details on labeling, please consult the documentation.

The hierarchic layout algorithm automatically arranges nodes in a hierarchical structure, ensuring clear visualization and readability. For example, in an organizational chart, hierarchical layout algorithms arrange nodes based on their hierarchical relationships (e.g., manager-subordinate). It offers extensive configuration options such as layout orientation, edge grouping, port candidates, and more.

The orthogonal layout algorithm arranges nodes and edges in a grid-like fashion, minimizing edge crossings and maximizing readability. This is particularly useful for circuit diagrams, network diagrams, and other technical illustrations. It empowers users with extensive customization options, enabling the selection of various layout styles, substructure detection, and automatic placement of node and edge labels.

The organic layout algorithm simulates natural forces to arrange nodes in a visually pleasing and organic manner. This results in aesthetically pleasing visualizations that mimic the layout of biological or organic systems, such as neuron networks or chemical structures. The organic layout algorithm offers extensive customization options such as preferred edge lengths, substructure detection and node/edge label placement.

The radial layout algorithm organizes graphs radially, distributing nodes into concentric circles around a central point using predefined layering strategies, with applications spanning social network visualization, data clustering, and bioinformatics. Several customization options are available including layer spacing, center node policy, and automatic placement of node/edge labels and the option for ray-like positioning for node labels.

The circular layout algorithm is tailored to organize nodes in a circular manner, facilitating a distinct visual portrayal of graph relationships. It offers comprehensive customization capabilities, covering diverse layout styles such as separate graph partitions, various edge routing styles, node and edge label placement, including ray-like placement for node labels.

The tree layout algorithm organizes graphs into tree structures, commonly used in visualizing relational data with applications in various fields. It provides extensive customization options, including custom edge ordering, port assignment, and automatic node/edge label placement.

The balloon layout algorithm arranges directed and undirected tree graphs by placing subtrees radially around their root nodes, resembling balloons or stars, especially when subtrees are similar in size. It offers extensive customization options, including children ordering, compactness and node/edge label placement including ray-like placement for node labels.

The edge router algorithm applies polyline routes to graph edges, typically in an orthogonal manner with horizontal and vertical segments. It offers customization applicable to the entire graph or selected edges, without affecting node placement. Additionally, it automatically positions edge labels.

The generic labeling algorithm optimally positions nodes and edge labels in a graph to avoid overlap with other elements. It doesn’t alter node positions or edge routes, and supports rotated labels. Node labels can be placed inside or outside nodes, with rotation options, while preferred edge label placement can also be specified. The labeling algorithm can be applied to the entire graph or a specified subset of nodes and edges.