Vue Diagram - Getting Started
jQuery
Angular
Vue
React
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:
$(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:
<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:
<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:
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
$(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
<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
<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
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
$(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
<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
<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
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;
If you have technical questions, please create a support ticket in the DevExpress Support Center.