All docs
V20.2
21.2
21.1
20.2
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

Diagram

  • 2 minutes to read

The Diagram control allows you to design diagrams, flowcharts, and org charts online, or display data diagrams without manual drawing. You can also save and load diagrams in the JSON format, or export to image formats.

The ASPxDiagram class implements the Diagram control on the server side and the ASPxClientDiagram represents it on the client side.

Diagram

Features

Data Binding (More details | See demo: Node and Edge Data Sources | See demo: Tree from Linear Data Structure)

The Diagram can create diagrams from hierarchical (tree-like) and graph data structures, and automatically arrange this data on the page. You can bind all shape properties to a database, including shape and connector styles, position, and size.

Export to PNG, JPEG, SVG (More details)

You can export a diagram to SVG, PNG, and JPEG file formats.

Predefined and Custom Shapes (More details | See demo)

The Diagram provides more than 40 built-in shapes. You can extend this collection with custom shapes. For each custom shape object, you can specify the type, background image, default size, text, connection points, and other settings.

Collapsible Shape Containers (More details | See demo)

The horizontal and vertical containers allow you to arrange shapes into collapsible groups.

OrgChart Shapes (More details)

The control provides shapes with images that are specially designed for use in OrgCharts.

Templates (More details)

The Diagram supports the template technology that allows you to completely customize a custom shape’s appearance and layout.

Simple View (More details | See demo)

In simple view mode, the control does not divide the work area into pages and the Diagram’s content occupies all the available area inside the control.

Restrict Edit Operations (More details | See demo)

The Diagram allows you to prohibit edit operations at design time or at run time based on custom logic.

Read Only Mode (More details | See demo)

Read only mode does not allow the Diagram to be edited.

Diagram Tools (More details)

The control allows you to customize its UI elements.