Your account has not been activated. Click here to get a new activation Email.
Unfortunately, activation email could not send to your email. Please try again.

Nodes

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

  • Many predefined standard shapes are included.
  • Custom shapes can also be created and added easily.
  • A node’s appearance can be fully customized.
  • A node’s UI can also be templated and re-used across multiple nodes.

View Demo >

Nodes


Connectors

The 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.

View Demo >

Connectors


Types

Types

Different types of segments are available as connectors 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 they are connected.

Decorator

Decorator

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

Rounded Corners

Rounded Corners

The 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.


Labels

Labels are used to annotate nodes and connectors. The diagram component also makes it easy to edit and align labels relative to the object to which it is mapped.

Label


Ruler

The ruler provides a horizontal and vertical guide for measuring in the diagram control. The ruler can be used to measure diagram objects, indicate positions, and align diagram elements. This is especially useful in creating scale models.

Ruler


Interactive Features

Interactive features are used to improve the runtime editing experience of a diagram. You can easily edit a diagram with mouse, touch screen, or keyboard interfaces.

View Demo >

Rotate

Select, Drag, Resize, Rotate

Objects can be selected and then dragged, resized, or rotated.

Snap

Snap

Objects can be aligned easily with gridlines or neighboring objects.

Keyboard Interactions

Keyboard Interactions

All common actions can also be performed through keyboard input.

Connect

Connect

The connect tool can be used to create a connection between two nodes, ports, or points.

Edit Connector

Edit Connector

A connector’s route can be manually edited by dragging thumbs that are visible after selection.

Zoom Pan

Zoom and Pan

Large diagrams can be explored using the zoom and pan tools.

Group

Group

Multiple nodes or connectors can be grouped together to form a single object.

Drawing Tool

Drawing Tool

The drawing tool enables users to draw custom nodes and shapes by clicking and dragging on the diagram surface.


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.

View Demo >

Data Binding


Commands

The diagram control has a predefined set of commands. Some of the standard commands are mapped to keyboard shortcuts. It is also possible to configure new commands and key combinations.

Commands


Automatic Layout

Automatic layouts are used to arrange nodes automatically based on a pre-defined layout logic. There is built-in support for an organizational chart layout, a hierarchical tree layout, a symmetric layout, and a radial tree layout.

View Demo >


Overview

The overview control is used to improve the navigation experience when exploring large diagrams. It displays a small preview of the full diagram page that allows users to perform operations such as zooming and panning within it.

View Demo >

Overview


Symbol Palette

The symbol palette is a gallery of reusable symbols and nodes that can be dragged and dropped on to the surface of the diagram.

Symbol Palette


Swim Lane

A swim lane is a visual element used in process flow diagrams or flowcharts. 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.

View Demo >

Swimlane


Serialization

A diagram’s state can be persisted to JSOM format and then loaded back using serialization.

Serialization


Exporting and Printing

Diagrams can be easily exported as .png, .jpeg, .bmp, and .svg image files, and can also be printed as documents.

Exporting and Printing


Miscellaneous

There are several other features available to enhance the diagramming experience.

Tooltip

Tooltip

Additional information about a node can be viewed using tooltips.

Gridlines

Gridlines

Gridlines provide guidance for aligning objects.

Page Layout

Page Layout

The drawing surface can be given a page-like appearance using page size, orientation, and margins.

User Handles

User Handles

Frequently used commands can be easily mapped to the user handles.

Context Menu

Context Menu

Frequently used commands can be easily mapped to the context menu.


Localization

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

View Demo >

Localization


AngularJS and More

There is built-in integration with all the popular third-party frameworks like AngularJS, KnockoutJS, jQuery, TypeScript, and Bootstrap.

Angular JS


Diagram Builder

Diagram builder is a diagramming application created using the diagram control. It is used to create, edit, save, export, and print diagrams. It has a symbol palette, property editor, overview window, toolbox, and menu to provide a great editing experience.

View Demo > Diagram Builder


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.