DevExtreme - Web Diagram Control CTP (v19.1)

Back in March 2019, we released an early access preview of our Web Diagram control, and now, with the release of v19.1, we've upgraded it to the CTP (Community Technical Preview) level. It is getting close to a full release, and in this post I will list the latest features and discuss our future plans for the control.

Our Web Diagram Control provides a canvas where you or your end-users can display, create, and edit various diagrams:

DevExpress ASP.NET Diagram Control

The core part of the DevExpress Web Diagram control is implemented in TypeScript. Consequently, all of the user experience and interactions run completely in the browser, the back-and-forth with the server is minimized. Apart from efficiency, this also gives us the benefit that we can fairly easily introduce the control for all DevExpress web platforms: DevExtreme, ASP.NET WebForms, ASP.NET MVC, and ASP.NET Core.

This CTP version provides support for two of those platforms: a DevExtreme jQuery widget and an ASP.NET Core extension built using it.


Our new Web Diagram control CTP provides the following features:

  • 35+ Predefined Shapes
  • Custom Shapes
  • Shape Sizing
  • Shape Drag-and-Drop
  • Auto Layout
  • Snap to Grid
  • External Data Binding
  • Configurable Page Settings
  • Customizable Shape and Connector Style Settings
  • Export to SVG, PNG, and JPEG

Let's take a deeper look at some of these new features.

Load and Save

We've added an API to the Web Diagram control to load and save data:

    onDataChanged: function(e) {
        if(e.component.isReady()) {
            var data = e.component.getData();
            // save layout data in storage
    // ...
    onContentReady: function(e) {
        // load layout data and apply it to the generated shapes
        var foo = window.localStorage.getItem("foo");
            e.component.setData(foo, true);

New and Custom Shapes

We've added two new shape groups: Common and Flow. These groups provide more than 35 shapes and we plan to add more shapes in future releases.

You can also import SVG images to create your own custom shapes and change their colors. Check out our 'Custom Shapes' demo which has a toolbar with three combo boxes for choosing color. These allow you to set the foreground, background, and text color for a shape or connector:


Each shape connector can display an arrow on each end. You can also customize these connectors using the toolbar:

Data Binding

With our Web Diagram control you can data bind to either:

After data binding, the Diagram control will automatically align new shapes. An end-user can re-align all the shapes or only selected shapes by clicking the Auto Layout toolbar item.

You can also create data toolbox items based on an external data source. End users can then drag data items from the toolbox and drop them onto a canvas to build a diagram.

Page Properties

The Diagram provides several options to customize page settings for size, orientation, zoom level, and more:


With this CTP, the Web Diagram control can now export a diagram to one of three image formats: SVG, PNG, and JPEG:



Please review our plans for the Web Diagram control and tell us what you think of the features we have planned:

  1. Create Diagram controls for other DevExpress web platforms including: ASP.NET WebForms and MVC. Web Diagram will also support other DevExtreme client-side Frameworks: Angular, React, Vue, etc.
  2. Add Diagram API to help you:
    • handle end-user actions events (shapes/connectors clicks, editing, etc.), manage UI elements visibility and edit the diagram
    • customize diagram settings, toolbars, contextual menus, panels, etc.
    • interact with the diagram using external bars and widgets
  3. Support images in shapes
  4. Provide a read-only mode
  5. Add more built-in shapes and shape packs


Please take a moment to answer the question in this short survey:

Thank you.

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
Appy Developers
Appy Developers

Very nice, thanks.

Please make it responsive, as most web users are using their mobile phones.

30 May 2019
Jose Isga
Jose Isga

Great Job!!!


30 May 2019
Nic Carreira
Nic Carreira

This is perfect for a proposal solution I have built where my users need to draw a basic property layout with some text annotations, however I need to be able to save the jpeg image back to the server and insert/display it inside a Xtrareport. Being able to get the raw image bytes would allow me to do this(unless you have another suggestion). Hopefully that is an API feature you could add.

30 May 2019
Vladislav Kiselev
Vladislav Kiselev

Waiting for Angular version

30 May 2019


31 May 2019
Baldur Fürchau
Baldur Fürchau

Also add other controls to a shape like charts to present a "driver tree".

2 June 2019
Bruno Cossi
Bruno Cossi

Is KnockoutJS supported?

3 June 2019
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)

Hi All,

Thank you for your interest in our new web Diagram. If you face a technical issue, please submit a ticket in our Support Center (


KnockoutJS will be supported in a fully functional Diagram version.

18 June 2019
Steve Cartwright
Steve Cartwright

Great work !

1) It would be good if you could add "Ports" to each shape (customisable by size and which side of the shape they appear) which the arrows/connectors can snap into. 

2) Add a Navigator where you can see an overview of the diagram (for large diagrams)

3) Add a Properties Panel (customisable) that can appear on the right (or wherever) when each shape has been clicked. 

4) Being able to change the location where annotations appear on or around the shape (ie. Top, Inside, Left, Right, Bottom)

5) Different Arrow shapes and designs (eg. curved connectors rather than simply straight line)

6) Support the MindMap style

12 July 2019
enio AG
enio AG
Do you have meanwhile an idea when the Angular wrapper will be available?
16 July 2019
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)

Thank you for taking the time to share your requirements. I forwarded them to the team for analysis.

Angular, Vue, and other wrappers are in our plan for sure.

17 July 2019

Please login or register to post comments.