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.

Features

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:

$("#orgstruct").dxDiagram({
    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");
        if(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:

Demo

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:

Export

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

Demo

Plans

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

Feedback

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

Thank you.

8 comment(s)
Appy Developers

Very nice, thanks.

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

30 May, 2019
Jose Isga

Great Job!!!

Thanks.

30 May, 2019
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

Waiting for Angular version

30 May, 2019
Customer83251

DevExpress的报表文件(.repx)在有图片的打印预览时,频繁放大图片,会导致报错,请求返回的Json数据会被截断。想请教这个问题是控件的Bug还是我配置的问题。

31 May, 2019
Baldur Fürchau

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

2 June, 2019
Bruno Cossi

Is KnockoutJS supported?

3 June, 2019
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 (www.devexpress.com/.../Create).

@Bruno,

KnockoutJS will be supported in a fully functional Diagram version.

18 June, 2019

Please login or register to post comments.