Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »


18.3.50 • Public • Published


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


This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).

A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.


To install Diagram and its dependent packages, use the following command

npm install @syncfusion/ej2-diagrams


Supported Frameworks

Diagram component is also offered in following list of frameworks.

  1. Angular
  2. React
  3. VueJS
  4. ASP.NET Core
  6. JavaScript (ES5)

Showcase samples

Key Features

  • Nodes - Nodes are used to host graphical objects (path or 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.
  • Connectors - The relationship between two nodes is represented using a connector.
  • Labels- Labels are used to annotate nodes and connectors.
  • Interactive Features - Interactive features are used to improve the run time editing experience of a diagram.
  • Data Binding - Generates diagram with nodes and connectors based on the information provided from an external data source.
  • Commands - Supports a set of predefined commands that helps edit the diagram using keyboard. It is also possible to configure new commands and key combinations.
  • Automatic Layout - Automatic layouts are used to arrange nodes automatically based on a predefined layout logic. There is built-in support for organizational chart layout, hierarchical tree layout, symmetric layout, radial tree layout, and mind map layout.
  • Overview Panel - The overview panel is used to improve navigation experience when exploring large diagrams.
  • SymbolPalettes - The symbol palette is a gallery of reusable symbols and nodes that can be dragged and dropped on the surface of a diagram.
  • Rulers - The ruler provides horizontal and vertical guides for measuring diagram objects in diagram control.
  • Serialization - When saved in JSON format a diagram’s state persists, and then it can be loaded back using serialization.
  • Exporting and Printing - Diagrams can be exported as .png, .jpeg, .bmp, and .svg image files, and can also be printed as documents.
  • Gridlines - Gridlines are the pattern of lines drawn behind diagram elements. It provides a visual guidance while dragging or arranging the objects on a diagram surface.
  • Page Layout- The drawing surface can be configured to page-like appearance using page size, orientation, and margins.
  • Context Menu - Frequently used commands can easily be mapped to the context menu.


Product support is available for through following mediums.


Check the license detail here.


Check the changelog here

© Copyright 2019 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.


npm i @syncfusion/ej2-diagrams

DownloadsWeekly Downloads






Unpacked Size

30.2 MB

Total Files


Last publish


  • avatar
  • avatar
  • avatar