Backend API
<template>
<DxDiagram
id="diagram"
ref="diagram"
@custom-command="onCustomCommand"
>
<DxContextMenu
:enabled="true"
:commands="['bringToFront', 'sendToBack' , 'lock' , 'unlock' ]"
/>
<DxContextToolbox
:enabled="true"
:category="'flowchart'"
:shape-icons-per-row="5"
:width="200"
/>
<DxPropertiesPanel
:visibility="'visible'"
>
<DxTab>
<DxGroup
:title="'Page Properties'"
:commands="['pageSize', 'pageOrientation' , 'pageColor' ]"
/>
</DxTab>
</DxPropertiesPanel>
<DxHistoryToolbar
:visible="false"
/>
<DxViewToolbar
:visible="true"
/>
<DxMainToolbar
:visible="true"
>
<DxCommand
:name="'undo'"
/>
<DxCommand
:name="'redo'"
/>
<DxCommand
:name="'separator'"
/>
<DxCommand
:name="'fontName'"
/>
<DxCommand
:name="'fontSize'"
/>
<DxCommand
:name="'separator'"
/>
<DxCommand
:name="'bold'"
/>
<DxCommand
:name="'italic'"
/>
<DxCommand
:name="'underline'"
/>
<DxCommand
:name="'separator'"
/>
<DxCommand
:name="'fontColor'"
/>
<DxCommand
:name="'lineColor'"
/>
<DxCommand
:name="'fillColor'"
/>
<DxCommand
:name="'separator'"
/>
<DxCommand
:name="'clear'"
:icon="'clearsquare'"
:text="'Clear Diagram'"
/>
</DxMainToolbar>
<DxToolbox
:visibility="'visible'"
:show-search="false"
:shape-icons-per-row="4"
:width="220"
>
<DxGroup
:category="'general'"
:title="'General'"
/>
<DxGroup
:category="'flowchart'"
:title="'Flowchart'"
:expanded="true"
/>
</DxToolbox>
</DxDiagram>
</template>
<script setup lang="ts">
import { watch, ref } from 'vue';
import {
DxDiagram,
DxContextMenu,
DxContextToolbox,
DxPropertiesPanel,
DxGroup,
DxTab,
DxHistoryToolbar,
DxViewToolbar,
DxMainToolbar,
DxCommand,
DxToolbox,
type DxDiagramTypes,
} from 'devextreme-vue/diagram';
import { confirm } from 'devextreme/ui/dialog';
import 'whatwg-fetch';
const diagram = ref();
watch(diagram,
({ instance }) => {
fetch('../../../../data/diagram-flow.json')
.then((response) => response.json())
.then((json) => {
instance.import(JSON.stringify(json));
})
.catch(() => {
throw new Error('Data Loading Error');
});
});
function onCustomCommand(e: DxDiagramTypes.CustomCommandEvent) {
if (e.name === 'clear') {
const result = confirm('Are you sure you want to clear the diagram? This action cannot be undone.', 'Warning');
result.then(
(dialogResult) => {
if (dialogResult) {
e.component.import('');
}
},
);
}
}
</script>
<style>
#diagram {
height: 900px;
}
</style>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html lang="en">
<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=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx-diagram.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="./bundle.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"> </div>
</div>
<script src="bundles/vendor/vue.vendor.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
{
"page": {
"width": 8400,
"height": 11910,
"pageWidth": 8400,
"pageHeight": 11910,
"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"
}
}
]
}