$(function() {
$("#diagram").dxDiagram({
nodes: {
dataSource: new DevExpress.data.ArrayStore({
key: "id",
data: flowNodes
}),
textExpr: "text",
typeExpr: "type",
autoLayout: {
type: "layered"
}
},
edges: {
dataSource: new DevExpress.data.ArrayStore({
key: "id",
data: flowEdges
}),
textExpr: "text",
fromExpr: "fromId",
toExpr: "toId",
},
toolbox: {
groups: [ "general" ]
}
});
});
<!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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.6/js/dx-diagram.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css" />
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx-diagram.min.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.6/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="data.js"></script>
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="diagram">
</div>
</div>
</body>
</html>
#diagram {
height: 725px;
}
var flowNodes = [
{
"id": 107,
"text": "A new ticket",
"type": "terminator"
},
{
"id": 108,
"text": "Analyze the issue",
"type": "process"
},
{
"id": 118,
"text": "Do we have all information to work with?",
"type": "diamond"
},
{
"id": 120,
"text": "Answered",
"type": "terminator"
},
{
"id": 121,
"text": "Request additional information or clarify the scenario",
"type": "rectangle"
},
{
"id": 125,
"text": "Prepare an example in Code Central",
"type": "rectangle"
},
{
"id": 127,
"text": "Update the documentation",
"type": "rectangle"
},
{
"id": 131,
"text": "Process the ticket",
"type": "rectangle"
},
{
"id": 133,
"text": "Work with the R&D team",
"type": "rectangle"
}
];
var flowEdges = [
{
"fromId": 107,
"id": 116,
"text": null,
"toId": 108
},
{
"fromId": 108,
"id": 117,
"text": null,
"toId": 118
},
{
"fromId": 118,
"id": 122,
"text": "No",
"toId": 121
},
{
"fromId": 121,
"id": 123,
"text": null,
"toId": 108
},
{
"fromId": 131,
"id": 124,
"text": null,
"toId": 120
},
{
"fromId": 120,
"id": 126,
"text": "",
"toId": 125
},
{
"fromId": 120,
"id": 130,
"text": "",
"toId": 127
},
{
"fromId": 118,
"id": 132,
"text": "Yes",
"toId": 131
},
{
"fromId": 131,
"id": 134,
"text": "Need developer assistance?",
"toId": 133
},
{
"fromId": 133,
"id": 135,
"text": null,
"toId": 120
}
];