<dx-diagram #diagram id="diagram"> </dx-diagram>
import { NgModule, Component, ViewChild, enableProdMode,} from '@angular/core';import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { HttpClient, HttpClientModule } from '@angular/common/http';import { DxDiagramModule, DxDiagramComponent } from 'devextreme-angular';if (!/localhost/.test(document.location.host)) { enableProdMode();}declare var __moduleName: string;@Component({ selector: 'demo-app', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], moduleId: __moduleName, preserveWhitespaces: true,})export class AppComponent { @ViewChild(DxDiagramComponent, { static: false }) diagram: DxDiagramComponent; constructor(http: HttpClient) { http.get('../../../../data/diagram-flow.json').subscribe({ next: (data) => { this.diagram.instance.import(JSON.stringify(data)); }, error: (err) => { throw 'Data Loading Error'; }, }); }}@NgModule({ imports: [ BrowserModule, BrowserTransferStateModule, HttpClientModule, DxDiagramModule, ], declarations: [AppComponent], bootstrap: [AppComponent],})export class AppModule { }platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #diagram { height: 900px;}
// In real applications, you should not transpile code in the browser.// You can see how to create your own application with Angular and DevExtreme here:// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/window.exports = window.exports || {};window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', '@angular/core': 'npm:@angular/core@12.2.17', '@angular/platform-browser': 'npm:@angular/platform-browser@12.2.17', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.17', '@angular/forms': 'npm:@angular/forms@12.2.17', '@angular/common': 'npm:@angular/common@12.2.17', '@angular/compiler': 'npm:@angular/compiler@12.2.17', 'tslib': 'npm:tslib@2.6.2/tslib.js', 'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js', 'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@23.2.5/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@23.2.5/bundles/dx.all.js', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.5', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.51', 'devextreme-angular': 'npm:devextreme-angular@23.2.5', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.4/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, 'rxjs': { defaultExtension: 'js', }, 'rxjs/operators': { defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.12/inferno/package.json', 'npm:@angular/*/package.json', 'npm:@angular/common@12.2.17/*/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devextreme-angular@23.2.5/*/package.json', 'npm:devextreme-angular@23.2.5/ui/*/package.json', 'npm:devextreme-angular@23.2.5/package.json', 'npm:devexpress-diagram@2.2.5/package.json', 'npm:devexpress-gantt@4.1.51/package.json', ],};System.config(window.config);
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx-diagram.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.12.0/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body></html>
{"page": {"width": 8391,"height": 11907,"pageWidth": 8391,"pageHeight": 11906,"pageLandscape": false,"gridSize": 180,"snapToGrid": true},"connectors": [{"key": "116","points": [{"x": 2160,"y": 1800}, {"x": 2160,"y": 2340}],"zIndex": 0,"beginItemKey": "107","beginConnectionPointIndex": 2,"endItemKey": "108","endConnectionPointIndex": 0}, {"key": "117","points": [{"x": 2160,"y": 3420}, {"x": 2160,"y": 3960}],"zIndex": 0,"beginItemKey": "108","beginConnectionPointIndex": 2,"endItemKey": "118","endConnectionPointIndex": 0}, {"key": "122","points": [{"x": 3420,"y": 4680}, {"x": 5760,"y": 4680}],"zIndex": 0,"texts": {"0.45": "No"},"beginItemKey": "118","beginConnectionPointIndex": 1,"endItemKey": "121","endConnectionPointIndex": 3}, {"key": "123","points": [{"x": 6840,"y": 4140}, {"x": 3420,"y": 2880}],"zIndex": 0,"beginItemKey": "121","beginConnectionPointIndex": 0,"endItemKey": "108","endConnectionPointIndex": 1}, {"key": "126","points": [{"x": 3780,"y": 9180}, {"x": 2880,"y": 10440}],"zIndex": 0,"texts": {"0.78": "A popular scenario?"},"beginItemKey": "120","beginConnectionPointIndex": 3,"endItemKey": "125","endConnectionPointIndex": 0}, {"key": "130","points": [{"x": 5220,"y": 9180}, {"x": 6120,"y": 10440}],"zIndex": 0,"texts": {"0.77": "Missing info in\nthe documentation?"},"beginItemKey": "120","beginConnectionPointIndex": 1,"endItemKey": "127","endConnectionPointIndex": 0}, {"key": "132","points": [{"x": 2160,"y": 5400}, {"x": 2160,"y": 6120}],"zIndex": 0,"texts": {"0.47": "Yes"},"beginItemKey": "118","beginConnectionPointIndex": 2,"endItemKey": "131","endConnectionPointIndex": 0}, {"key": "124","points": [{"x": 2160,"y": 7200}, {"x": 4500,"y": 8820}],"zIndex": 0,"beginItemKey": "131","beginConnectionPointIndex": 2,"endItemKey": "120","endConnectionPointIndex": 0}, {"key": "134","points": [{"x": 3420,"y": 6660}, {"x": 5760,"y": 6660}],"zIndex": 0,"texts": {"0.5": "Need developer\nassistance?"},"beginItemKey": "131","beginConnectionPointIndex": 1,"endItemKey": "133","endConnectionPointIndex": 3}, {"key": "135","points": [{"x": 6840,"y": 7200}, {"x": 4500,"y": 8820}],"zIndex": 0,"beginItemKey": "133","beginConnectionPointIndex": 2,"endItemKey": "120","endConnectionPointIndex": 0}], "shapes": [ { "key": "107", "type": "terminator", "text": "A new ticket", "x": 1440, "y": 1080, "width": 1440, "height": 720, "zIndex": 0 }, { "key": "108", "type": "process", "text": "Analyze\nthe issue", "x": 900, "y": 2340, "width": 2520, "height": 1080, "zIndex": 0 }, { "key": "118", "type": "decision", "text": "Do we have all\ninformation to\nwork with?", "x": 900, "y": 3960, "width": 2520, "height": 1440, "zIndex": 0 }, { "key": "120", "type": "terminator", "text": "Answered", "x": 3780, "y": 8640, "width": 1440, "height": 720, "zIndex": 0 }, { "key": "121", "type": "process", "text": "Request additional\ninformation or clarify\nthe scenario", "x": 5760, "y": 4140, "width": 2160, "height": 1080, "zIndex": 0 }, { "key": "125", "type": "process", "text": "Prepare an example in\nCode Central", "x": 1620, "y": 10440, "width": 2520, "height": 1080, "zIndex": 0 }, { "key": "127", "type": "process", "text": "Update the\ndocumentation", "x": 4860, "y": 10440, "width": 2520, "height": 1080, "zIndex": 0 }, { "key": "131", "type": "process", "text": "Process the\nticket", "x": 900, "y": 6120, "width": 2520, "height": 1080, "zIndex": 0 }, { "key": "133", "type": "process", "text": "Work with the\nR&D team", "x": 5760, "y": 6120, "width": 2160, "height": 1080, "zIndex": 0 }, { "key": "136", "type": "text", "locked": true, "text": "Ticket Processing Flow", "x": 360, "y": 360, "width": 7740, "height": 360, "zIndex": 0, "styleText": { "font-size": "14pt", "font-weight": "bold" } } ]}
