All docs
V24.2
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

JavaScript/jQuery Diagram - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

Diagram is a UI component for creating and editing diagrams.

This tutorial shows how to add a Diagram component to your application and configure the component.

Each section in this tutorial describes one configuration step. You can also find full source code in the GitHub repository.

View on GitHub

Add the Diagram Component to a Page

Add DevExtreme to your jQuery application and add Diagram resources (scripts and styles) to the page:

index.js
index.html
  • $(function() {
  • $("#diagram").dxDiagram({ });
  • });
  • <html>
  • <head>
  • <!-- ... -->
  • <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  • <script src="https://cdn3.devexpress.com/jslib/24.2.3/js/dx-diagram.min.js"></script>
  • <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx-diagram.min.css">
  • <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css">
  • <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.2.3/js/dx.all.js"></script>
  • <script type="text/javascript" src="index.js"></script>
  • <script type="text/javascript" src="data.js"></script>
  • </head>
  • <body>
  • <div id="diagram"></div>
  • </body>
  • </html>

Bind Diagram to Data

Use the nodes.dataSource property to bind Diagram to a list of nodes. This tutorial uses a linear array of nodes as the data source for the initial Diagram. In this case, the required properties to specify are nodes.keyExpr and nodes.parentKeyExpr. The tutorial also includes nodes.textExpr.

For details about different ways to bind Diagram data, refer to the following help topic: Data Binding.

index.js
data.js
  • $(function() {
  • $("#diagram").dxDiagram({
  • nodes: {
  • dataSource: new DevExpress.data.ArrayStore({
  • key: 'ID',
  • data: projectTasks,
  • }),
  • keyExpr: "ID",
  • parentKeyExpr: "Parent_ID",
  • textExpr: "Task_Name",
  • },
  • });
  • });
  • const projectTasks = [
  • {
  • "ID": 1,
  • "Task_Name": "Project Planning",
  • "Description": "Define project scope and goals",
  • },
  • {
  • "ID": 2,
  • "Parent_ID": 1,
  • "Task_Name": "Requirement Analysis",
  • "Description": "Gather and document requirements",
  • },
  • {
  • "ID": 3,
  • "Parent_ID": 1,
  • "Task_Name": "Resource Allocation",
  • "Description": "Assign team and resources",
  • },
  • {
  • "ID": 4,
  • "Parent_ID": 2,
  • "Task_Name": "Design Specifications",
  • "Description": "Outline system design",
  • },
  • {
  • "ID": 5,
  • "Parent_ID": 3,
  • "Task_Name": "Task Scheduling",
  • "Description": "Develop project timeline",
  • },
  • {
  • "ID": 6,
  • "Parent_ID": 2,
  • "Task_Name": "Risk Assessment",
  • "Description": "Identify potential risks",
  • },
  • {
  • "ID": 7,
  • "Parent_ID": 1,
  • "Task_Name": "Kick-off Meeting",
  • "Description": "Launch project with stakeholders",
  • }
  • ];

Configure Tools and Customize

To customize the Diagram component and its elements, use the following properties:

  • simpleView
    Activates a mode where the content uses all available space.

  • pageColor
    Specifies the Diagram page's color.

  • defaultItemProperties
    Defines initial properties for new items. In this tutorial, the different font is applied to the items.

Diagram UI customization tools include:

  • propertiesPanel
    Configures the properties panel settings. This tutorial adds a custom group that allows users to change the item appearance.

  • toolbox
    The toolbox contains groups of shapes. In this tutorial, we use this configuration object to disable search and limit the shapes in the general category.

index.js
  • $(function() {
  • $("#diagram").dxDiagram({
  • simpleView: true,
  • pageColor: "#f0f0f0",
  • defaultItemProperties: {
  • textStyle: "font-family: 'Courier New', monospace;"
  • },
  • propertiesPanel: {
  • tabs: [
  • {
  • groups: [{ title: 'Object Properties', commands: ['lineStyle', 'lineColor', 'fillColor'] }],
  • },
  • ],
  • },
  • toolbox: {
  • showSearch: false,
  • groups: [{
  • category: 'general',
  • shapes: ['text', 'rectangle'],
  • }]
  • },
  • });
  • });