React Diagram - Getting Started
The Diagram UI component provides a visual interface to help you design new and modify existing diagrams.
Add the Diagram Component 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/21.2.15/css/dx-diagram.min.css">
- <script src="https://cdn3.devexpress.com/jslib/21.2.15/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 21.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.
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.
- @* Diagram styles*@
- <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/21.2.15/css/dx-diagram.min.css">
- @* DevExtreme theme *@
- <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/21.2.15/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/21.2.15/js/dx-diagram.min.js"></script>
- @* DevExtreme common scripts *@
- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/21.2.15/js/dx.all.js"></script>
Initialize the Diagram UI component 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 import and export methods.
- 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
If you have technical questions, please create a support ticket in the DevExpress Support Center.