Start here

# Orthogonal Layout

This demo shows basic configuration options for the Orthogonal Layout.

See the sources on how the layout is configured.

- The grid spacing is decreased, which leads to an overall more compact graph.
- The sources also show how to use the LayoutData to set options for specific edges and nodes in the graph, for example, reserving space around a node (node with 'Halo' text in the sample).
- Directed edges are defined with a flow in a top-to-bottom orientation (blue edges).
- For tree substructures, a compact arrangement style with left-to-right orientation is specified. In this example, nodes with text 'Tree' form a subtree. Other supported substructures, not shown in this example, are chains and cycles.

### Code Snippet

You can copy the code snippet to configure the layout from GitHub.

### Documentation

See the Orthogonal Layout section in the Developer's Guide for an in-depth discussion of the relevant concepts.