[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [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
    Getting Started
   [Collapse]Diagram Control
     Diagram Designer
     Shapes Panel
     Properties Panel
     Bottom Panel
     Page Setup Dialog Window
     Print Preview
     Creating Runtime Diagram Designer
     Pan and Zoom Panel
   [Expand]End-User Interaction
   [Expand]Diagram Items
   [Expand]Automatic Layout
   [Expand]Data Binding Functionality
    Themes and Styles
    Printing and Exporting
    Saving and Loading Diagrams
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [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]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Diagram Designer

The Diagram Designer is the DiagramControl complete with the UI that helps end-users to create new diagrams, modify existing diagrams, save diagrams to and load from XML, and export to multiple image formats (BMP, JPEG, PNG and GIF).

The build-in Diagram Designer is available at design time out of the box. To invoke it, click the DiagramControl's smart tag and select Run Designer.

To learn how to build the Diagram Designer, see the Creating Runtime Diagram Designer tutorial.

Expanded Elements

Learn about individual Diagram Designer elements.


The working area where end-users build diagrams using shapes and connectors.

Shapes Panel

Displays available shapes that can be dragged to the Canvas.

Properties Panel

Displays properties of an object that is selected in the canvas and allows end-users to edit them.


Contains UI elements that allow end-users to load and save diagrams, add diagram items to the canvas, format text within items, rearrange and recolor shapes, change the canvas size and orientation and perform copy/paste operations.

Bottom Panel

Displays the zoom trackbar and size and angle of the selected shape.

Page Setup Dialog Window

Provides access to the line jump options and allows end-users to change the page size, orientation and margins.

Print Preview

Allows end-users to see exactly how a diagram will look when it is printed.

Pan and Zoom Panel

Used to navigate large and complex diagrams.

Expanded See Also

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