JavaScript/jQuery Diagram - Getting Started
jQuery
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Angular
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Vue
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
React
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.
Add the Diagram Component to a Page
jQuery
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>Angular
Add DevExtreme to your Angular application, then install devexpress-diagram (npm i devexpress-diagram), and add Diagram resources (scripts and styles) to the page:
app.component.html
app.module.ts
angular.json
<dx-diagram></dx-diagram>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxDiagramModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxDiagramModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }
// ...
"styles": [
// ...
"node_modules/devexpress-diagram/dist/dx-diagram.min.css",
],Vue
Add DevExtreme to your Vue application and add Diagram resources (scripts and styles) to the page:
App.vue
<template>
<DxDiagram>
</DxDiagram>
</template>
<script setup>
import 'devextreme/dist/css/dx.light.css';
import 'devexpress-diagram/dist/dx-diagram.min.css';
import { DxDiagram } from 'devextreme-vue/diagram';
</script>React
Add DevExtreme to your React application and use the following code snippet to create a Diagram component:
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import 'devexpress-diagram/dist/dx-diagram.min.css';
import { Diagram } from 'devextreme-react/diagram';
function App() {
return (
<Diagram>
</Diagram>
);
}
export default App;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.
jQuery
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",
}
];Angular
app.component.html
app.component.ts
app.service.ts
<dx-diagram>
<dxo-nodes
[dataSource]="dataSource"
keyExpr="ID"
parentKeyExpr="Parent_ID"
textExpr="Task_Name"
>
</dxo-nodes>
</dx-diagram>
import { Component } from '@angular/core';
import ArrayStore from "devextreme/data/array_store";
import { Service, Task } from "./app.service";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [Service]
})
export class AppComponent {
projectTasks: Task[];
dataSource: ArrayStore;
constructor(service: AppService) {
this.projectTasks = service.getTasks();
this.dataSource = new ArrayStore({
key: 'ID',
data: service.getTasks(),
});
}
}
import { Injectable } from '@angular/core';
export class Task {
"ID": number;
"Parent_ID"?: number;
"Task_Name": string;
"Description": string;
}
const projectTasks: Task[] = [
{
"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",
}
];
@Injectable({
providedIn: 'root'
})
export class AppService {
getTasks() {
return projectTasks;
}
}Vue
App.vue
data.js
<template>
<DxDiagram>
<DxNodes
:data-source="dataSource"
:key-expr="'ID'"
:text-expr="'Task_Name'"
:parent-key-expr="'Parent_ID'"
/>
</DxDiagram>
</template>
<script setup>
import {
DxDiagram, DxNodes
} from 'devextreme-vue/diagram';
import ArrayStore from 'devextreme/data/array_store';
import service from './data.js';
const dataSource = new ArrayStore({
key: 'ID',
data: service.getTasks(),
});
</script>
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",
}
];
export default {
getTasks() {
return projectTasks;
}
}React
App.js
data.js
import React from "react";
import Diagram, { Nodes } from "devextreme-react/diagram";
import ArrayStore from "devextreme/data/array_store";
import service from "./data.js";
const dataSource = new ArrayStore({
key: 'ID',
data: service.getTasks(),
});
const App = () => {
return (
<Diagram>
<Nodes
dataSource={dataSource}
keyExpr="ID"
textExpr="Task_Name"
parentKeyExpr="Parent_ID"
/>
</Diagram>
);
};
export default App;
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",
}
];
export default {
getTasks() {
return projectTasks;
}
}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.
jQuery
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'],
}]
},
});
});Angular
app.component.html
<dx-diagram
[simpleView]="true"
pageColor="#f0f0f0"
>
<dxo-default-item-properties
textStyle="font-family: 'Courier New', monospace;">
</dxo-default-item-properties>
<dxo-properties-panel>
<dxi-tab>
<dxi-group
title="Object Properties"
[commands]="['lineStyle', 'lineColor', 'fillColor']"
></dxi-group>
</dxi-tab>
</dxo-properties-panel>
<dxo-toolbox [showSearch]="false">
<dxi-group category="general" [shapes]="['text', 'rectangle']"></dxi-group>
</dxo-toolbox>
</dx-diagram>Vue
App.vue
<template>
<DxDiagram
:simple-view="true"
page-color="#f0f0f0"
>
<DxDefaultItemProperties :text-style="'font-family: "Courier New", monospace;'"/>
<DxPropertiesPanel>
<DxTab>
<DxGroup
:title="'Object Properties'"
:commands="['lineStyle', 'lineColor', 'fillColor']"
/>
</DxTab>
</DxPropertiesPanel>
<DxToolbox :show-search="false">
<DxGroup
:category="'general'"
:shapes="['text', 'rectangle']"
/>
</DxToolbox>
</DxDiagram>
</template>
<script setup>
import {
DxDiagram, DxDefaultItemProperties, DxPropertiesPanel, DxTab, DxGroup
} from 'devextreme-vue/diagram';
// ...
</script>React
App.js
import React from "react";
import Diagram, { DefaultItemProperties, Toolbox, PropertiesPanel, Tab, Group } from 'devextreme-react/diagram';
// ...
const objectCommands = ['lineStyle', 'lineColor', 'fillColor'];
const toolboxShapes = ['text', 'rectangle'];
const App = () => {
return (
<Diagram
simpleView={true}
pageColor="#f0f0f0"
>
<DefaultItemProperties
textStyle="font-family: 'Courier New', monospace;"
/>
<PropertiesPanel>
<Tab>
<Group
title="Object Properties"
commands={objectCommands}
/>
</Tab>
</PropertiesPanel>
<Toolbox showSearch={false} >
<Group
category="general"
shapes={toolboxShapes}
/>
</Toolbox>
</Diagram>
);
};
export default App;Feedback