Auto arranging of nodes

The Diagram control offers an auto-arrange setting for nodes in the diagram area, often referred to as a layout. We have six kinds of layouts.

Custom template shapes

Diagram enables you to create and manipulate multiple graphical objects on a single page by arranging and connecting nodes. You can add various types of nodes to your diagram.

Symbol palette

The symbol palette provides a range of palettes that display a selection of nodes and connectors. These can be dragged and dropped directly into the Diagram, allowing users to create their desired design quickly and easily.

Overview control

With the overview control, you can get an overview of the entire content of a diagram. This enables you to view the full picture of a large diagram and easily navigate, pan, or zoom to a specific area of the page.


The Diagram control only loads the diagram objects that are visible in the view port of the scroll viewer. This optimizes performance when loading and dragging items to a diagram with many nodes and connectors.

Syncfusion JavaScript Diagram

The JavaScript Diagram is a library offering a wide range of features for visualizing, creating, and editing interactive diagrams. It can be used to generate flowcharts, organizational charts, mind maps, and BPMN charts.