DevExtreme jQuery/JS - Getting Started with Diagram
The Diagram widget provides a visual interface to help you design new and modify existing diagrams.
Add the Diagram Widget to a Page
Add diagram resources (scripts and styles) onto the page.
npm
The
devexpress-diagram
is a dependency of theDevExtreme
package. Therefore, install the DevExtreme npm package to include the Diagram in your project. Then, add thedx-diagram.min.css
anddx-diagram.min.js
files to your page.HTML<link rel="stylesheet" href="node_modules/devexpress-diagram/dx-diagram.min.css"> <script type="text/javascript" src="node_modules/devexpress-diagram/dx-diagram.min.js"></script>
CDN
Add the
dx-diagram.min.css
anddx-diagram.min.js
files to your page.HTML<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.1.16/css/dx-diagram.min.css"> <script src="https://cdn3.devexpress.com/jslib/19.1.16/js/dx-diagram.min.js"></script>
Local Scripts
You can find all the required files in the DevExtreme zip archive or DevExtreme folder (%ProgramFiles(x86)%\DevExpress 19.1\DevExtreme\Sources). Copy the dx-diagram.min.js and dx-diagram.min.css files into your application folder. Then, link the required files.
HTML<script type="text/javascript" src="js/dx-diagram.min.js"></script> <link rel="stylesheet" href="css/dx-diagram.min.css">
Use the the dx-diagram.css
and dx-diagram.js
files to add an unminified version of the resource files to your page.
The Diagram widget is a jQuery DevExtreme widget, and thus requires common DevExtreme resources (listed below) to be included into your page.
@* DevExtreme themes *@ <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.1.16/css/dx.common.css"> <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.1.16/css/dx.light.css"> @* jQuery *@ <script src="~/Scripts/jquery-3.5.1.min.js"></script> @* DevExtreme common scripts *@ <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/19.1.16/js/dx.all.js"></script>
Initialize the Diagram widget in a DOM element.
$(function() { $("#diagram").dxDiagram(); }); <!---->
<div id="diagram"></div>
Load and Save Diagram Content
To load and save a diagram to a string variable, use the setData and getData methods.
var diagram = $("#diagram").dxDiagram("instance"); var diagramContent = diagram.getData(); // load diagram content to a variable diagram.setData(newDiagramContent); // replace the existing diagram with a new diagram
Data Binding and Auto Layout
The Diagram can load external treelike and graph structures. The supported data structures are listed below.
A graph constructed from two plain lists of nodes and edges. The Diagram binds its nodes and edges collections to the appropriate lists.
index.jsdata.js$(function() { $("#diagram").dxDiagram({ nodes: { dataSource: orgItems }, edges: { dataSource: orgLinks }, layout: "tree" }); });
var orgItems = [ { "id":"106", "text":"Development", "type":2 }, { "id":"108", "text":"WPF\nTeam", "type":2 }, { "id":"109", "text":"Javascript\nTeam", "type":2 }, // ... ]; var orgLinks = [ { "id":"124", "from":"106", "to":"108", }, { "id":"125", "from":"106", "to":"109", }, // ... ];
A tree constructed from a list where each record specifies its IDs and includes a parent node ID reference. Use the dataSource option to bind the widget to the list. You should specify the keyExpr and parentKeyExpr options because of the data's plain structure. The Diagram uses information from the key fields to transform plain data into a tree.
index.jsdata.js$(function() { $("#diagram").dxDiagram({ nodes: { dataSource: new DevExpress.data.ArrayStore({ key: "ID", data: employees, }), keyExpr: "ID", textExpr: function(item, value) { if(value !== undefined) item.Title = value; else return item && item.Title.replace(" ", "\n"); }, parentKeyExpr: "Head_ID" }, layout: "tree" }); });
var employees = [{ "ID": 1, "Full_Name": "John Heart", "Prefix": "Mr.", "Title": "CEO", "City": "Los Angeles", "State": "California", "Email": "jheart@dx-email.com", "Skype": "jheart_DX_skype", "Mobile_Phone": "(213) 555-9392", "Birth_Date": "1964-03-16", "Hire_Date": "1995-01-15" }, { "ID": 2, "Head_ID": 1, "Full_Name": "Samantha Bright", "Prefix": "Dr.", "Title": "COO", "City": "Los Angeles", "State": "California", "Email": "samanthab@dx-email.com", "Skype": "samanthab_DX_skype", "Mobile_Phone": "(213) 555-2858", "Birth_Date": "1966-05-02", "Hire_Date": "2004-05-24" }, // ... ];
A tree constructed from a hierarchical object. Use the dataSource option to bind the widget to the object. You should set the itemsExpr option to the name of the field that provides data for nested items because the data has a hierarchical structure.
index.jsdata.js$(function() { $("#diagram").dxDiagram({ nodes: { dataSource: new DevExpress.data.ArrayStore({ key: "this", data: employees, }), textExpr: function(item, value) { if(value !== undefined) item.Title = value; else return item && item.Title.replace(" ", "\n"); }, itemsExpr: "items" }, layout: "tree" }); });
var employees = [{ "Full_Name": "John Heart", "Prefix": "Mr.", "Title": "CEO", "City": "Los Angeles", "State": "California", "Email": "jheart@dx-email.com", "Skype": "jheart_DX_skype", "Mobile_Phone": "(213) 555-9392", "Birth_Date": "1964-03-16", "Hire_Date": "1995-01-15", "items": [{ "Full_Name": "Samantha Bright", "Prefix": "Dr.", "Title": "COO", "City": "Los Angeles", "State": "California", "Email": "samanthab@dx-email.com", "Skype": "samanthab_DX_skype", "Mobile_Phone": "(213) 555-2858", "Birth_Date": "1966-05-02", "Hire_Date": "2004-05-24", }, { "Full_Name": "Arthur Miller", "Prefix": "Mr.", "Title": "CTO", "City": "Denver", "State": "Colorado", "Email": "arthurm@dx-email.com", "Skype": "arthurm_DX_skype", "Mobile_Phone": "(310) 555-8583", "Birth_Date": "1972-07-11", "Hire_Date": "2007-12-18", "items": [{ "Full_Name": "Brett Wade", "Prefix": "Mr.", "Title": "IT Manager", "City": "Reno", "State": "Nevada", "Email": "brettw@dx-email.com", "Skype": "brettw_DX_skype", "Mobile_Phone": "(626) 555-0358", "Birth_Date": "1968-12-01", "Hire_Date": "2009-03-06", // ...
Use the layout option to specify an auto-layout algorithm ("sugiyama" or "tree") that widget uses to build a diagram.
Data Toolbox
The Diagram widget allows you to import data from a data source into a data toolbox.
Use the createDataSource method to create data toolbox items based on an external data source. End users can drag data items from the toolbox and drop them onto a canvas to build a diagram.
If a data source provides information about nodes' relations, specify the layout option, to auto-generate a diagram.
$(function() { var diagram = $("#diagram").dxDiagram() .dxDiagram("instance"); diagram.createDataSource({ key: "0", title: "Employees", nodes: { dataSource: employees, keyExpr: "ID", textExpr: function(item) { return item && item.Full_Name.replace(" ", "\n"); }, parentKeyExpr: "Head_ID" }, layout: "tree" }); });
var employees = [{ "ID": 1, "Head_ID": 0, "Full_Name": "John Heart", "Prefix": "Mr.", "Title": "CEO", "City": "Los Angeles", "State": "California", "Email": "jheart@dx-email.com", "Skype": "jheart_DX_skype", "Mobile_Phone": "(213) 555-9392", "Birth_Date": "1964-03-16", "Hire_Date": "1995-01-15" }, { "ID": 2, "Head_ID": 1, "Full_Name": "Samantha Bright", "Prefix": "Dr.", "Title": "COO", "City": "Los Angeles", "State": "California", "Email": "samanthab@dx-email.com", "Skype": "samanthab_DX_skype", "Mobile_Phone": "(213) 555-2858", "Birth_Date": "1966-05-02", "Hire_Date": "2004-05-24" // ...
Custom Shapes
The Diagram widget provides a collection of built-in shapes. Use the customShapes option to extend this collection with custom shapes.
$(function() { var diagram = $("#diagram").dxDiagram({ customShapes: [{ id: 0, title: "Internet", svgUrl: "images/shapes/internet.svg", defaultWidth: 1.27, defaultHeight: 1.27, allowHasText: false }, { id: 1, title: "Laptop", svgUrl: "images/shapes/laptop.svg", defaultWidth: 1.27, defaultHeight: 1.27, allowHasText: false }, // ... ] }).dxDiagram("instance"); // ... });
If you have technical questions, please create a support ticket in the DevExpress Support Center.