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.


The diagram component visually represents information graphically. It is also used to create diagrams like flow charts, organizational charts, mind maps, and BPMN, either through code or a visual interface.


Visualize any graphical objects using nodes, which can be arranged and manipulated on a diagram page.

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


The relationship between two nodes is represented using a connector. Some of the key features are listed below.


There are straight, orthogonal, and curved connector types. You can choose any of these based on the type of diagram or relationship between the connected notes.


Bridging clearly indicates a connector’s route and makes it easier to read where connectors overlap each other in a dense diagram.


Use decorators and arrows to indicate flow direction in flow charts or state diagrams. You can also build your own custom decorator based on type of diagram.


A connector’s look and feel can be customized any way you want. The control provides a rich set of properties through which you can customize connector color, thickness, dashed and dotted appearance, rounded corners, and decorators.


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


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


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

Multiple annotations

Add any number of annotations and align them individually.


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

Interactive features

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

Select and drag

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


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


Rotate selected nodes 360 degrees.


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

Undo and redo

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


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


When multiple objects overlap, z-order controls which object needs to be on top or at the bottom.


You can combine multiple nodes into a group and interact with them as a single object. Groups can also contain another group.

Quick commands

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


Alignment commands enable you to align selected objects such as nodes and connectors with respect to the selection boundary.

Spacing commands

Arrange selected objects in equal intervals.

Sizing commands

Resize selected objects to have equal sizes.

Align commands

Align selected objects horizontally or vertically.

Automatic Layout

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

Drawing tool

Draw nodes and link them interactively by just clicking and dragging on the canvas surface.

Zoom, pan, fit to page

When a diagram is large, it can be viewed closer or wider by zooming in and out. Also, you can navigate from one region to another by panning through the diagram.

Symbol palette

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

Overview panel

The overview panel 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 zoom and pan within it.


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


There are several other features that enhance the diagramming experience.


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


Diagrams can be printed as documents.


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

Data binding

Data binding is used to populate diagrams with nodes and connectors created and positioned based on data from external data sources. 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 also supports loading data from JSON format.


Gridlines provide guidance when trying to align objects.

Page layout

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


Additional information about a node can be viewed using tooltips.

Context menu

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


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

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.