All docs
V22.1
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.
A newer version of this page is available. Switch to the current version.

jQuery Diagram - Getting Started

The Diagram UI component provides a visual interface to help you design new and modify existing diagrams.

View Demo

Add the Diagram Component to a Page

Add diagram resources (scripts and styles) onto the page.

  • npm

    The devexpress-diagram is a dependency of the DevExtreme package. Therefore, install the DevExtreme npm package to include the Diagram in your project. Then, add the dx-diagram.min.css and dx-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 and dx-diagram.min.js files to your page.

    HTML
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/22.1.13/css/dx-diagram.min.css">
    <script src="https://cdn3.devexpress.com/jslib/22.1.13/js/dx-diagram.min.js"></script>
  • Local Scripts

    You can find all the required files in the DevExtreme zip archive or DevExtreme folder (%ProgramFiles%\DevExpress 22.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.

NOTE

The Diagram UI component is a jQuery DevExtreme UI component. Common DevExtreme resources (listed below) should be included in your page after the Diagram resources.

HTML
    @* Diagram styles*@
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/22.1.13/css/dx-diagram.min.css">
    @* DevExtreme theme *@
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/22.1.13/css/dx.light.css">

    @* jQuery *@
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    @* Diagram scripts *@
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/22.1.13/js/dx-diagram.min.js"></script>
    @* DevExtreme common scripts *@
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/22.1.13/js/dx.all.js"></script>

Initialize the Diagram UI component in a DOM element.

JavaScript
HTML
    $(function() {
        $("#diagram").dxDiagram();
    });
    <div id="diagram"></div>

Diagram control

Load and Save Diagram Content

To load and save a diagram to a string variable, use the import and export methods.

JavaScript
var diagram = $("#diagram").dxDiagram("instance");
var diagramContent = diagram.export(); // load diagram content to a variable
diagram.import(newDiagramContent); // replace the existing diagram with a new diagram
NOTE
The Diagram UI component stores an opened diagram's data in its own text format. Thereby we recommend you to not modify data returned by the export method. A manually modified document can be loaded incorrectly.