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.
Unfortunately, activation email could not send to your email. Please try again.

Diagram

The diagram control is used for creating diagrams like flow charts, organizational charts, mind maps, floor plans, and swim lane diagrams either through code or through a visual interface that is similar to Visio.

Diagram


Nodes

Nodes are used to host graphical objects (paths or controls) that can be arranged and manipulated on a diagram page.

  • Custom shapes can also be created and added easily.
  • Appearance of a node can be fully customized.
  • Node’s UI can also be templated and re-used across multiple nodes.

Nodes


Connectors

Relationship between two nodes is represented using a connector. Multiple instances of nodes and connectors form a diagram. Some of the key features are listed below.

Connectors


Types

Types

Different types of segments are available to connect between objects.

Bridging

Bridging

Bridging is a visual indication of overlapping between two connectors.

Routing

Routing

Orthogonal connectors take a smart path that avoids overlapping with nodes to which it is connected.

Decorator

Decorator

Arrows or decorators, at the edges of connectors are used to represent relationships between nodes.

Rounded Corners

Rounded Corners

Corner radius can be specified for edges in connectors.

Ports

Ports

Ports are specific points in a node to which a connector can be connected.


Label

Labels are used to annotate nodes and connectors. Diagram also makes it easy to edit and align labels relative to the object to which they are mapped.

Label


Data Binding

Seamlessly data bind to various client-side and remote data sources such as JSON, RESTful services, OData services, WCF services, and many more.

Data Binding


Automatic Layout

Automatic layout is used to arrange nodes automatically based on a predefined layout logic. Diagram supports organization chart layout, hierarchical tree layout, and radial tree layout.


Performance

It is possible to work with very large amounts of nodes since the diagram uses UI-virtualization techniques to selectively load only the objects that lie within the viewport area. Smooth scrolling performance is achieved using a built-in spatial search algorithm that builds an index based on a node’s position.

Performance


Serialization

Rulers are used to measure the distance of nodes and connectors from the origin of the page. The size and position of objects can also be specified in different units like pixels, inches, and centimeters.

Serialization


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.