yFiles for HTML Demos Tutorial: Basic Features 10 Layout yFiles Demos

Automatic Graph Layout

How to arrange the graph automatically

This step shows how to use the layout algorithms in yFiles for HTML to automatically place the graph elements.

Automatic layout is one of the main features of the yFiles products. The layout library provides a large set of ready-to-use, highly customizable algorithms for most scenarios. The purpose of this sample is to demonstrate how to run an arbitrary layout algorithm. For an overview of the available layout styles, please see the Layout Styles Demo.

Calculating a layout

Click the button below to calculate and apply an automatic layout. In this example, the layout is not animated, but applied instantly.

const layout = new HierarchicalLayout()
graph.applyLayout(layout)

// Fit the graph bounds since they changed for the new layout
graphComponent.fitGraphBounds()

Running a layout animation

An automatic layout can also be applied with an animation. In this sample, we use morphLayout to perform the layout, animate it, manage undo and adjust the content rectangle in one call. morphLayout runs asynchronously and returns immediately yielding a Promise that we can await or use to catch errors.

// Ensure that the LayoutExecutor class is not removed by build optimizers
// It is needed for the 'morphLayout' method in this demo.
LayoutExecutor.ensure() // doing this somewhere in your code should suffice

await graphComponent.morphLayout({
  layout: new OrganicLayout(),
  morphDuration: '1s'
})

Note	morphLayout is a convenience method that comes with a lot of parameters that can be used to adjust various aspects of the layout animation. For more customized scenarios, use class LayoutExecutor.

11 Layout Data