-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Reporting
- AI-powered Extensions
-
Interaction
-
Report Types
-
Data binding
-
Real-life Reports
-
Layout Features
-
Report Controls
-
Web-specific Features
-
Rich Text Editor
- Overview
- Load/Save
- Document Protection
-
Templates
- Autocorrect
-
Customization
- Simple View
-
Spreadsheet
- Overview
-
Open a Document
- Export And Printing
-
Features
-
UI Customization
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
- Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
Related Demos:
Your search did not match any results.
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.
Was this demo helpful?
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@(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>
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
namespace DevExtreme.NETCore.Demos.Controllers {
public class DiagramController : Controller {
public IActionResult Overview() {
return View();
}
}
}
{
"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"
}
}
]
}
#diagram {
height: 900px;
}