We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Overview

The ASP.NET Web Forms Diagram is a feature-rich control for visualizing, creating, and editing interactive diagrams. It supports creating flowcharts, organizational charts, mind maps, and BPMN charts either through code or a visual interface.


Flowchart

The ASP.NET Web Forms Diagram provides all the standard flowchart shapes as ready-made objects to build flowcharts, making it is easy to add them to a diagram surface in a single call.

Flowchart diagram created with built-in flowchart shapes available in ASP.NET Web Forms Diagram Control


Organizational chart

Built-in automatic layout algorithm specifically made for organizational charts to arrange the parent and child node positions automatically.

Organizational chart visualization using data binding and automatic layout features in ASP.NET Web Forms Diagram Control


Swim lane

A swim lane is a visual element used in process flow diagrams or flowchart. A swim lane may be arranged either horizontally or vertically. It has built-in lanes and phases where nodes can be added to it. It has rich interactive features and automatic alignment options, which makes editing easy.

Swim lane diagram created with built-in swim lane shapes available in ASP.NET Web Forms Diagram Control


Nodes

Visualize any graphical object using nodes, which can be arranged and manipulated at the same time on a diagram page. They allow the following:

  • Use many predefined standard shapes
  • Create and add custom shapes easily.
  • Fully customize the appearance of a node.
  • Design a node UI template and reuse it across multiple nodes.

Connectors

A connector represents a relationship between two nodes. Some of the key features like connector types, bridging, and more are listed below.

Different types of connectors available in ASP.NET Web Forms Diagram Control

Types

The ASP.NET Web Forms Diagram Control provides straight, orthogonal, polyline, and curved connector types. You can choose any of these based on the type of diagram or relationship between the connected nodes.

Connector line jump behavior in ASP.NET Web Forms Diagram Control

Bridging or line jumps

Use bridging (line jumps) to illustrate a connector’s route, making it easy to read where connectors overlap each other in a dense diagram.

Predefined arrowheads in ASP.NET Web Forms Diagram Control illustrate flow direction in the diagram

Arrowheads

Use different types of predefined arrowheads to illustrate flow direction in flowchart diagrams. You can also build your own custom arrowheads.

Connector appearance customization in ASP.NET Web Forms Diagram Control

Appearance

Like nodes, the connector look and feel can also be customized any way you want. The ASP.NET Web Forms Diagram Control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, rounded corners, and even decorators.


Ports (connection points)

Attach connectors to specific places on a node through different types of ports or connecting points.

Connect to specific places on a node using ports in the ASP.NET Web Forms Diagram Control


Labels

Additional information can be shown by adding text or labels on nodes and connectors.

Additional information can be shown on nodes and connectors using labels in ASP.NET Web Forms Diagram Control

Edit

You can add and edit text at runtime and mark it read-only if it should not be edited.

Add multiple labels on nodes and connectors using Label feature in ASP.NET Web Forms Diagram Control

Multiple labels

Add any number of labels and align them individually.

Align labels inside or outside a node in ASP.NET Web Forms Diagram Control

Alignment

Labels include sophisticated alignment options: Place inside or outside a node, or at the source or target end of a connector. Automatically align when a node or connector moves.


Interactive features

Use interactive features to improve the editing experience of a diagram at runtime. Furthermore, you can easily edit a diagram with mouse, touchscreen, or keyboard interfaces.

Select and drag the nodes or connectors using handlers in ASP.NET Web Forms Diagram Control

Select and drag

Select one or more nodes, connectors, or annotations and edit them using thumbs or handlers.

Select and resize nodes using handlers in ASP.NET Web Forms Diagram Control

Resize

You can resize a node in eight different directions and lock a node’s aspect ratios to keep its shape. You can also resize multiple objects at the same time.

Select and rotate nodes using handlers in ASP.NET Web Forms Diagram Control

Rotate

Rotate selected nodes from 0 to 360 degrees.

Undo and redo the recent changes using history manager feature in ASP.NET Web Forms Diagram Control

Undo and redo

Don’t worry when you edit by mistake—undo and redo commands help to easily correct recent changes.

Cut, copy, and paste selected objects within a diagram using the clipboard feature in ASP.NET Web Forms Diagram Control

Clipboard

Cut, copy, paste, or duplicate selected objects within and across diagrams.

Move objects to the top or bottom of the diagram using the z-order feature in ASP.NET Web Forms Diagram Control

Z-order

When multiple objects overlap, the z-order controls which object is at the top and which is at the bottom.

Align nodes and connectors with the nearest gridlines or objects in ASP.NET Web Forms Diagram Control

Snap

Precisely align nodes, connectors, and annotations easily while dragging just by snapping to the nearest gridlines or objects.

Combine multiple nodes into a group node in ASP.NET Web Forms Diagram Control

Grouping

You can combine multiple nodes into a group and then interact with them as a single object. Nested groups are also possible with our ASP.NET Web Forms Diagram Control.

Quick commands can be shown as buttons near a selector in ASP.NET Web Forms Diagram Control

Quick commands

Frequently used commands like delete, connect, and duplicate can be shown as buttons near a selector. This makes it easy for users to quickly perform those operations instead of searching for the correct buttons in a toolbox.


Alignment

Our ASP.NET Web Forms Diagram Control has predefined alignment commands that enable you to align the selected objects nodes and connectors with respect to the selection boundary.

Arrange selected objects in equal intervals using spacing commands in ASP.NET Web Forms Diagram Control

Spacing commands

Spacing commands enable you to place selected objects on the diagram at equal intervals from each other.

Resize selected objects to have equal sizes in ASP.NET Web Forms Diagram Control

Sizing commands

Use sizing commands to equally size selected nodes with respect to the first selected object.

Align selected objects horizontally or vertically by using align commands in ASP.NET Web Forms Diagram Control

Align commands

All the nodes or connectors in the selection list can be aligned at the left, right, or center horizontally, or aligned at the top, bottom, or middle vertically with respect to the selection boundary.


Automatic layout

Use automatic layouts to arrange nodes automatically based on a predefined layout algorithm. Features built-in hierarchical tree, radial tree, and symmetric layouts.


Ruler

Rulers allow you to measure the distance of nodes or connectors from the origin of the page. This is especially useful in creating scale models.

Measure the distance of nodes from the page origin by using the ruler feature in ASP.NET Web Forms Diagram Control


Symbol palette

Includes a gallery of stencils, reusable symbols, and nodes that can be dragged onto the surface of a diagram.

Host reusable nodes inside the symbol palette using the symbol palette feature in ASP.NET Web Forms Diagram Control


Overview panel

The overview panel allows you to improve the navigation experience when exploring large diagrams. It displays a small preview of the full diagram page that allows users to zoom and pan within it.

Improve the navigation experience with larger diagrams by using the overview panel in ASP.NET Web Forms Diagram Control


Drawing tools

Draw all kinds of built-in nodes and connect them with connectors interactively by just clicking and dragging on the drawing area.

Draw nodes and connectors interactively using ASP.NET Web Forms Diagram Control


Zoom and pan tools

View a large diagram closely or assume a wider view by zooming in and out. Also, navigate from one region of a diagram to another by panning across the diagram.

View a large diagram closely or farther away by zooming in and out in ASP.NET Web Forms Diagram Control


Data binding

Populate diagrams with nodes and connectors created and positioned based on data from data sources. In addition, data in any format can be easily converted, mapped, and consumed in the diagram by setting a few properties, without having to write any code. The Diagram control also supports loading data from a list or IEnumerable collection.

Populate the diagram from external data sources in ASP.NET Web Forms Diagram Control


Exporting

You can export the diagram to different image files such as PNG, JPEG, BMP, and SVG.

Export the diagram to different image formats using ASP.NET Web Forms Diagram Control


Printing

Print diagrams from the browser. You can also customize the page size, orientation, and page margin, and fit a diagram to a single page.

Print diagrams from the browser using ASP.NET Web Forms Diagram Control


Serialization

You can save your diagram state in JSON format and load it back later for further editing using the serializer.

Save and load a diagram by serializing it to JSON format using ASP.NET Web Forms Diagram Control


Localization

All static text within the diagram can be localized to any desired language.

All static text within the diagram can be localized to any desired language using ASP.NET Web Forms Diagram Control


Miscellaneous

In addition to all the features listed thus far, there many more that enhance the diagramming experience.

Align objects using gridlines in ASP.NET Web Forms Diagram Control

Gridlines

Gridlines provide guidance when trying to align objects.

Define page-like appearance on the drawing surface using ASP.NET Web Forms Diagram Control

Page layout

Give a page-like appearance to the drawing surface using page size, orientation, and margins.

Additional information about a node can be viewed by using tooltips in ASP.NET Web Forms Diagram Control

Tooltip

Use tooltips to provide additional information about a node.

Use context menu feature to map frequently used commands

Context menu

Easily map frequently used commands to the context menu.


70+ ASP.NET UI CONTROLS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon