[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Collapse]Diagrams
    Getting Started
   [Expand]Diagram Control
   [Expand]End-User Interaction
   [Expand]Diagram Items
   [Collapse]Automatic Layout
     Re-Layout Subordinates
   [Expand]Data Binding Functionality
    Themes and Styles
    Printing and Exporting
    Saving and Loading Diagrams
   [Expand]Examples
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[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 DiagramControl by clicking the Re-Layout Page Ribbon item and selecting the desired algorithm and flow direction.

The following drawing algorithms are available.

Expanded Tree graph

This algorithm is used to draw 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.

The DiagramOptionsTreeLayout class contains the layout settings.

Expanded Layered (Sugiyama) graph

This algorithm is used to draw 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.

The DiagramOptionsSugiyamaLayout class contains the layout settings.

Expanded Circular Layout

This algorithm places shapes on a circle, evenly spaced.

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

The DiagramOptionsCircularLayout class contains the layout settings.

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.ApplyTreeLayout method overload with the splitMode parameter set to SplitToConnectedComponentsMode.AllComponents.

The DiagramOptionsTipOverTreeLayout class contains the layout settings.

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.

The DiagramOptionsMindMapTreeLayout class contains the layout settings.

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?​​​​​​​