[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Collapse]Diagram Control
    Getting Started
   [Expand]Diagram Control
   [Expand]End-User Interaction
   [Expand]Diagram Items
   [Collapse]Automatic Layout
     Automatic Layout Settings
     Re-Layout Subordinates
   [Expand]Data Binding
    Themes and Styles
    Printing and Exporting
    Saving and Loading Diagrams
   [Expand]Examples
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Automatic Layout

The DevExpress Diagram Control provides a set of layout algorithms that you can use to automatically arrange shapes. This feature allows you and your end-users to quickly and effectively generate drawings, which can be manually fine-tuned afterwards.

End-users can apply automatic layout in the DiagramDesignerControl by clicking the Re-Layout Page Ribbon item and selecting the desired algorithm and flow direction.

The following layout algorithms are available.

Expanded Tree graph

This algorithm draws hierarchical diagrams. It arranges shapes in a tree structure and aligns them evenly based on their hierarchical level.

To apply the algorithm in code, use the DiagramControl.ApplyTreeLayout method.

By default, this algorithm rearranges only shapes that are connected to at least one other shape. To rearrange all shapes on the canvas, use the DiagramControl.ApplyTreeLayout method overload with the splitMode parameter set to SplitToConnectedComponentsMode.AllComponents.

Expanded Layered (Sugiyama) graph

This algorithm draws layered networks that usually represent dependency relations. It minimizes the number of connector crossings and spreads shapes evenly.

To apply the algorithm in code, use the DiagramControl.ApplySugiyamaLayout method.

Expanded Circular Layout

This algorithm places shapes on a circle, evenly spaced.

To apply the algorithm in code, use the DiagramControl.ApplyCircularLayout method. The DiagramControl.CircularLayoutOrder property specifies whether to position shapes clockwise, counterclockwise or minimizing the number of crossings of connection lines.

Expanded Tip-Over Tree Layout

This algorithm arranges shapes in a tree structure so that the vertex children are aligned in either a single row or a single column.

To apply the algorithm in code, use the DiagramControl.ApplyTipOverTreeLayout method. To rearrange all shapes on the canvas, use the DiagramControl.ApplyTipOverTreeLayout method overload with the splitMode parameter set to SplitToConnectedComponentsMode.AllComponents.

Expanded Mind-Map Tree Layout

This algorithm creates non-linear hierarchical diagrams arranged around a central idea or subject.

To apply the algorithm in code, use the DiagramControl.ApplyMindMapTreeLayout method. To rearrange all shapes on the canvas, use the DiagramControl.ApplyMindMapTreeLayout method overload with the splitMode parameter set to SplitToConnectedComponentsMode.AllComponents.

Expanded Org Chart Layout

This algorithm visualizes roles and relationships within an entity such as a company department. Shapes in the upper levels of hierarchy in the org chart layout are arranged using the tree graph algorithm. The OrgChartLayoutTreeLevelCount (see DiagramControl.OrgChartLayoutTreeLevelCount) property specifies the number of layers in the tree section. The lower levels of hierarchy are arranged using the tip-over tree layout algorithm.

To apply the algorithm in code, use the DiagramControl.ApplyOrgChartLayout method. To rearrange all shapes on the canvas, use the DiagramControl.ApplyOrgChartLayout method overload with the splitMode parameter set to SplitToConnectedComponentsMode.AllComponents.

Expanded See Also

Is this topic helpful?​​​​​​​