Vue 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/20.2.12/css/dx-diagram.min.css">
<script src="https://cdn3.devexpress.com/jslib/20.2.12/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 20.2\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/20.2.12/css/dx-diagram.min.css">
    @* DevExtreme themes *@
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.12/css/dx.common.css">
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.12/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/20.2.12/js/dx-diagram.min.js"></script>
    @* DevExtreme common scripts *@
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.2.12/js/dx.all.js"></script>

You should also add the canvg library to your page to allow export to image formats in Internet Explorer.

  • npm

    Install canvg (npm i canvg --save) and add it to your web page.

    HTML
        <script type="text/javascript" src="node_modules/canvg/lib/umd.js"></script>

  • CDN

    Add the canvg script file to your page.

    HTML
        <script type="text/javascript" src="https://unpkg.com/canvg@3.0.4/lib/umd.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.