Angular 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.1.11/css/dx-diagram.min.css"> <script src="https://cdn3.devexpress.com/jslib/21.1.11/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.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 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.1.11/css/dx-diagram.min.css"> @* DevExtreme theme *@ <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/21.1.11/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.1.11/js/dx-diagram.min.js"></script> @* DevExtreme common scripts *@ <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/21.1.11/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.
$(function() { $("#diagram").dxDiagram(); });
<div id="diagram"></div>
Add the Diagram Component to an Angular CLI Application
This tutorial adds the Diagram component to an Angular CLI Application. Refer to the Angular CLI documentation for information on how to create such an application.
Install the devextreme
and devextreme-angular
npm packages:
`npm install devextreme@21.1.4 devextreme-angular@21.1.4 --save --save-exact`
Open the angular.json
file and reference the Diagram and a predefined theme stylesheet (dx.light.css
in the code below):
"styles": [ ... "node_modules/devexpress-diagram/dist/dx-diagram.min.css", "node_modules/devextreme/dist/css/dx.light.css" ]
Go to the NgModule
and import the Diagram module.
// Imports the Diagram component import { DxDiagramModule } from 'devextreme-angular'; @NgModule({ // ... imports: [ // ... DxDiagramModule ] })
Now you can use the Diagram component in your application:
<dx-diagram></dx-diagram>
Run the application with the following command:
`ng serve`
Open http://localhost:4200/ to browse the application.
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.