Diagram - Overview

DevExtreme ASP.NET Core Diagram is a visual interface for designing or modifying diagrams. This component includes over 40 resizable shapes that you can drag and drop onto a page. Shapes and connectors are highly customizable.

Backend API

​x
 
@(Html.DevExtreme().Diagram().ID("diagram"))​<script type="text/javascript">    $(function () {        $.ajax({            url: "@Url.Content("~/SampleData/diagram-flow.json")",            dataType: "text",            success: function(data) {                $("#diagram").dxDiagram("instance").import(data);            }        });    });</script>​​

xxxxxxxxxx
 
using DevExtreme.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;​namespace DevExtreme.NETCore.Demos.Controllers {    public class DiagramController : Controller {        public IActionResult Overview() {            return View();        }    }}

xxxxxxxxxx
 
{    "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"            }        }    ]}​

xxxxxxxxxx
 
#diagram {    height: 900px;}