All docs
V19.2
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.

Diagram

  • 2 min to read

You can use the Diagram extension's (DiagramExtension) diagram editor to create professional diagrams online. You can import a diagram data file or bind the extension to a data source.

Online Demos

Implementation Details

Use the Diagram helper method to add the Diagram extension (DiagramExtension) to a view. The Diagram method's parameter provides access to the Diagram's settings (DiagramSettings).

The MVCxClientDiagram class object represents the Diagram's client counterpart.

Declaration

The following code illustrates how to add the Diagram to a view:

@Html.DevExpress().Diagram(settings => {
    settings.Name = "Diagram";
}).GetHtml()

Features

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

The Diagram can load external tree-like and graph structures. You can bind shape properties to a database, including shape and connector styles, position, and size.

Predefined and Custom Shapes (More details | See demo)

The Diagram provides more than 35 built-in shapes that can be extended with custom shapes. For each custom shape object, you can specify the type, background image, default size, text, connection points, and so on.

Containers (See demo)

The horizontal and vertical containers allow you to combine other shapes within a container. The extension supports stacked containers that can be expanded and collapsed.

Simple View (More details | See demo)

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

Read Only Mode (More details | See demo)

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

UI Customization (More details)

You can manage the toolbox's and side panel's visibility. The toolbox can be populated with default and custom groups.

Export to Image Format (More details)

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