Syncfusion ASP.NET MVC Diagram Component
A comprehensive skill for implementing the Syncfusion EJ2 Diagram control in ASP.NET MVC applications using Tag Helpers. Covers everything from basic flowcharts to complex BPMN, UML, swimlane, and auto-layout diagrams.
When to Use This Skill
- Creating any diagram in an ASP.NET MVC (Razor Pages / MVC) application
- Building flowcharts, org charts, network diagrams, process maps
- Implementing BPMN or UML diagrams
- Configuring node/connector shapes, styles, annotations, and ports
- Setting up automatic layouts (hierarchical, org chart, radial, mind map)
- Adding a symbol palette for drag-and-drop diagramming
- Binding diagram data from a database or remote source
- Exporting diagrams to image/SVG or printing
- Enabling drawing tools, undo/redo, layers, and virtualization
Important: API Verification Required
API Verification Required: Always verify API class names, properties, and signatures by reading reference files (references/*.md) BEFORE generating code examples. Do not assume or infer class names.
Navigation Guide
Setup and First Diagram
📄 Read: references/getting-started.md
- NuGet installation, tag helper registration, CDN resources, basic diagram, first node/connector
Nodes (Shapes, Position, Styling)
📄 Read: references/nodes.md
- Creating nodes, offsetX/Y, width/height, style, gradient, shadow, expand/collapse icons, events, getNodeDefaults
Connectors (Lines, Arrows, Routing)
📄 Read: references/connectors.md
- Straight/Orthogonal/Bezier connectors, sourceID/targetID, decorators, segments, routing, events
Labels and Annotations
📄 Read: references/labels-and-annotations.md
- Adding text to nodes and connectors, font, alignment, hyperlinks, interaction, events
Ports (Connection Points)
📄 Read: references/ports.md
- Port types, positioning, appearance, connecting via ports, port constraints
Shapes and Styles
📄 Read: references/shapes-and-styles.md
- Flow/Basic/Path/Image/HTML/Native shapes, fill, stroke, gradient, opacity
BPMN Diagrams
📄 Read: references/bpmn-diagrams.md
- Module injection, events/triggers, gateways, activities, data objects, BPMN connectors
UML Diagrams
📄 Read: references/uml-diagrams.md
- Class diagrams, classifier shapes, relationships, UML activity diagrams, sequence diagrams
Automatic Layouts
📄 Read: references/layouts.md
- Hierarchical tree, org chart, mind map, radial tree, symmetric layout, getLayoutInfo, expand/collapse
Swimlane Diagrams
📄 Read: references/swimlanes.md
- Swimlane structure, lanes, phases, children, headers, runtime add, palette integration
Groups and Containers
📄 Read: references/groups-and-containers.md
- Grouping nodes, add/remove children, Canvas and Stack container types
Symbol Palette
📄 Read: references/symbol-palette.md
- SymbolPalette component, defining palettes, drag-and-drop, tooltips, customization
Data Binding
📄 Read: references/data-binding.md
- DataManager integration, dataSourceSettings, id/parentId mapping, setNodeTemplate, CRUD
Interaction and Drawing Tools
📄 Read: references/interaction-and-tools.md
- Selection, drag/resize/rotate, drawing tools, constraints, undo/redo, commands, keyboard
Serialization and Export
📄 Read: references/serialization-and-export.md
- saveDiagram/loadDiagram, exportDiagram (image/SVG), print, preventDefaults
Diagram Settings
📄 Read: references/diagram-settings.md
- Layers, virtualization, grid lines, ruler, scroll settings, page settings, tooltip, accessibility
Quick Start
1. Install NuGet Package
Install-Package Syncfusion.EJ2.AspNet.MVC
2. Register Tag Helper (~/Pages/_ViewImports.cshtml)
@addTagHelper *, Syncfusion.EJ2
3. Add CDN Resources (~/Pages/Shared/_Layout.cshtml)
<head>
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
</head>
<body>
...
<ejs-scripts></ejs-scripts>
</body>
4. Add Diagram to a Razor Page (~/Pages/Index.cshtml)
<ejs-diagram id="diagram" width="100%" height="550px"
nodes="@ViewBag.nodes"
connectors="@ViewBag.connectors"
getNodeDefaults="@ViewBag.getNodeDefaults"
getConnectorDefaults="@ViewBag.getConnectorDefaults">
</ejs-diagram>
5. Controller / PageModel
public IActionResult OnGet()
{
List<DiagramNode> nodes = new List<DiagramNode>
{
new DiagramNode { Id = "node1", OffsetX = 100, OffsetY = 100, Width = 100, Height = 60,
Annotations = new List<DiagramNodeAnnotation> {
new DiagramNodeAnnotation { Content = "Start" }
},
Shape = new { type = "Flow", shape = "Terminator" }
},
new DiagramNode { Id = "node2", OffsetX = 300, OffsetY = 100, Width = 100, Height = 60,
Annotations = new List<DiagramNodeAnnotation> {
new DiagramNodeAnnotation { Content = "Process" }
},
Shape = new { type = "Flow", shape = "Process" }
}
};
List<DiagramConnector> connectors = new List<DiagramConnector>
{
new DiagramConnector { Id = "conn1", SourceID = "node1", TargetID = "node2" }
};
ViewBag.nodes = nodes;
ViewBag.connectors = connectors;
ViewBag.getNodeDefaults = "getNodeDefaults";
ViewBag.getConnectorDefaults = "getConnectorDefaults";
return Page();
}
function getNodeDefaults(node) {
node.height = 60;
node.width = 120;
return node;
}
function getConnectorDefaults(connector) {
connector.type = 'Orthogonal';
return connector;
}
Module Injections
Some features require explicit module injection via JavaScript:
// For BPMN diagrams
ej.diagrams.Diagram.Inject(ej.diagrams.BpmnDiagrams);
// For export/print
ej.diagrams.Diagram.Inject(ej.diagrams.PrintAndExport);
// For mind map layout
ej.diagrams.Diagram.Inject(ej.diagrams.MindMap);
// For complex hierarchical layout
ej.diagrams.Diagram.Inject(ej.diagrams.ComplexHierarchicalTree);
Key C# Classes
| Class |
Purpose |
DiagramNode |
Diagram node/shape |
DiagramConnector |
Connection line between nodes |
DiagramNodeAnnotation |
Text label on a node |
DiagramConnectorAnnotation |
Text label on a connector |
DiagramPort |
Connection point on a node |
DiagramLayer |
Layer for organizing diagram elements |
DiagramPageSettings |
Page size, orientation, background |
BpmnShapes |
BPMN-specific shape config |
UmlClassifierShapeModel |
UML class diagram shape |
Common Patterns
Flow Diagram Shape Types
// Flow shapes: Terminator, Process, Decision, Document, DirectData,
// MultiDocument, PreDefinedProcess, Delay, Annotation, Annotation2,
// ManualOperation, ManualInput, Card, PaperTap, Or, SummingJunction,
// Sort, Extract, Merge, Offline, Start1, Start2, End1, End2,
// Preparation, SequentialAccessStorage, PunchedCard, PunchedTape,
// StoredData, InternalStorage, DirectAccessStorage, Display,
// ManualOperation, Connector, OffPageReference, ExternalOrganization
Shape = new { type = "Flow", shape = "Process" }
Basic Shapes
// Basic shapes: Rectangle, Ellipse, Triangle, Pentagon, Hexagon,
// Heptagon, Octagon, Decagon, Dodecagon, Star, Cross, Diamond,
// CylindricalShape, Trapezoid, Parallelogram, Rhombus
Shape = new { type = "Basic", shape = "Rectangle" }
1---2name: syncfusion-aspnetmvc-diagram3description: Use this skill whenever the user asks to create, configure, customize, or troubleshoot interactive diagrams using the Syncfusion ASP.NET MVC Diagram component with EJ2 Tag Helpers. Trigger this skill for requests involving flowcharts, organizational charts, BPMN diagrams, UML diagrams, swimlane diagrams, or mind maps, including node and connector definitions, shapes, styles, layouts, data binding, drawing tools, serialization, export, or advanced customization in ASP.NET MVC applications.4---56# Syncfusion ASP.NET MVC Diagram Component78A comprehensive skill for implementing the Syncfusion EJ2 Diagram control in ASP.NET MVC applications using Tag Helpers. Covers everything from basic flowcharts to complex BPMN, UML, swimlane, and auto-layout diagrams.910## When to Use This Skill1112- Creating any diagram in an ASP.NET MVC (Razor Pages / MVC) application13- Building flowcharts, org charts, network diagrams, process maps14- Implementing BPMN or UML diagrams15- Configuring node/connector shapes, styles, annotations, and ports16- Setting up automatic layouts (hierarchical, org chart, radial, mind map)17- Adding a symbol palette for drag-and-drop diagramming18- Binding diagram data from a database or remote source19- Exporting diagrams to image/SVG or printing20- Enabling drawing tools, undo/redo, layers, and virtualization2122## Important: API Verification Required2324**API Verification Required**: Always verify API class names, properties, and signatures by reading reference files (`references/*.md`) BEFORE generating code examples. Do not assume or infer class names.2526## Navigation Guide2728### Setup and First Diagram29📄 **Read:** [references/getting-started.md](references/getting-started.md)30- NuGet installation, tag helper registration, CDN resources, basic diagram, first node/connector3132### Nodes (Shapes, Position, Styling)33📄 **Read:** [references/nodes.md](references/nodes.md)34- Creating nodes, offsetX/Y, width/height, style, gradient, shadow, expand/collapse icons, events, getNodeDefaults3536### Connectors (Lines, Arrows, Routing)37📄 **Read:** [references/connectors.md](references/connectors.md)38- Straight/Orthogonal/Bezier connectors, sourceID/targetID, decorators, segments, routing, events3940### Labels and Annotations41📄 **Read:** [references/labels-and-annotations.md](references/labels-and-annotations.md)42- Adding text to nodes and connectors, font, alignment, hyperlinks, interaction, events4344### Ports (Connection Points)45📄 **Read:** [references/ports.md](references/ports.md)46- Port types, positioning, appearance, connecting via ports, port constraints4748### Shapes and Styles49📄 **Read:** [references/shapes-and-styles.md](references/shapes-and-styles.md)50- Flow/Basic/Path/Image/HTML/Native shapes, fill, stroke, gradient, opacity5152### BPMN Diagrams53📄 **Read:** [references/bpmn-diagrams.md](references/bpmn-diagrams.md)54- Module injection, events/triggers, gateways, activities, data objects, BPMN connectors5556### UML Diagrams57📄 **Read:** [references/uml-diagrams.md](references/uml-diagrams.md)58- Class diagrams, classifier shapes, relationships, UML activity diagrams, sequence diagrams5960### Automatic Layouts61📄 **Read:** [references/layouts.md](references/layouts.md)62- Hierarchical tree, org chart, mind map, radial tree, symmetric layout, getLayoutInfo, expand/collapse6364### Swimlane Diagrams65📄 **Read:** [references/swimlanes.md](references/swimlanes.md)66- Swimlane structure, lanes, phases, children, headers, runtime add, palette integration6768### Groups and Containers69📄 **Read:** [references/groups-and-containers.md](references/groups-and-containers.md)70- Grouping nodes, add/remove children, Canvas and Stack container types7172### Symbol Palette73📄 **Read:** [references/symbol-palette.md](references/symbol-palette.md)74- SymbolPalette component, defining palettes, drag-and-drop, tooltips, customization7576### Data Binding77📄 **Read:** [references/data-binding.md](references/data-binding.md)78- DataManager integration, dataSourceSettings, id/parentId mapping, setNodeTemplate, CRUD7980### Interaction and Drawing Tools81📄 **Read:** [references/interaction-and-tools.md](references/interaction-and-tools.md)82- Selection, drag/resize/rotate, drawing tools, constraints, undo/redo, commands, keyboard8384### Serialization and Export85📄 **Read:** [references/serialization-and-export.md](references/serialization-and-export.md)86- saveDiagram/loadDiagram, exportDiagram (image/SVG), print, preventDefaults8788### Diagram Settings89📄 **Read:** [references/diagram-settings.md](references/diagram-settings.md)90- Layers, virtualization, grid lines, ruler, scroll settings, page settings, tooltip, accessibility9192## Quick Start9394### 1. Install NuGet Package9596```powershell97Install-Package Syncfusion.EJ2.AspNet.MVC98```99100### 2. Register Tag Helper (`~/Pages/_ViewImports.cshtml`)101102```cshtml103@addTagHelper *, Syncfusion.EJ2104```105106### 3. Add CDN Resources (`~/Pages/Shared/_Layout.cshtml`)107108```cshtml109<head>110 <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />111 <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>112</head>113<body>114 ...115 <ejs-scripts></ejs-scripts>116</body>117```118119### 4. Add Diagram to a Razor Page (`~/Pages/Index.cshtml`)120121```cshtml122<ejs-diagram id="diagram" width="100%" height="550px"123 nodes="@ViewBag.nodes"124 connectors="@ViewBag.connectors"125 getNodeDefaults="@ViewBag.getNodeDefaults"126 getConnectorDefaults="@ViewBag.getConnectorDefaults">127</ejs-diagram>128```129130### 5. Controller / PageModel131132```csharp133public IActionResult OnGet()134{135 List<DiagramNode> nodes = new List<DiagramNode>136 {137 new DiagramNode { Id = "node1", OffsetX = 100, OffsetY = 100, Width = 100, Height = 60,138 Annotations = new List<DiagramNodeAnnotation> {139 new DiagramNodeAnnotation { Content = "Start" }140 },141 Shape = new { type = "Flow", shape = "Terminator" }142 },143 new DiagramNode { Id = "node2", OffsetX = 300, OffsetY = 100, Width = 100, Height = 60,144 Annotations = new List<DiagramNodeAnnotation> {145 new DiagramNodeAnnotation { Content = "Process" }146 },147 Shape = new { type = "Flow", shape = "Process" }148 }149 };150 List<DiagramConnector> connectors = new List<DiagramConnector>151 {152 new DiagramConnector { Id = "conn1", SourceID = "node1", TargetID = "node2" }153 };154 ViewBag.nodes = nodes;155 ViewBag.connectors = connectors;156 ViewBag.getNodeDefaults = "getNodeDefaults";157 ViewBag.getConnectorDefaults = "getConnectorDefaults";158 return Page();159}160```161162```javascript163function getNodeDefaults(node) {164 node.height = 60;165 node.width = 120;166 return node;167}168function getConnectorDefaults(connector) {169 connector.type = 'Orthogonal';170 return connector;171}172```173174## Module Injections175176Some features require explicit module injection via JavaScript:177178```javascript179// For BPMN diagrams180ej.diagrams.Diagram.Inject(ej.diagrams.BpmnDiagrams);181182// For export/print183ej.diagrams.Diagram.Inject(ej.diagrams.PrintAndExport);184185// For mind map layout186ej.diagrams.Diagram.Inject(ej.diagrams.MindMap);187188// For complex hierarchical layout189ej.diagrams.Diagram.Inject(ej.diagrams.ComplexHierarchicalTree);190```191192## Key C# Classes193194| Class | Purpose |195|-------|---------|196| `DiagramNode` | Diagram node/shape |197| `DiagramConnector` | Connection line between nodes |198| `DiagramNodeAnnotation` | Text label on a node |199| `DiagramConnectorAnnotation` | Text label on a connector |200| `DiagramPort` | Connection point on a node |201| `DiagramLayer` | Layer for organizing diagram elements |202| `DiagramPageSettings` | Page size, orientation, background |203| `BpmnShapes` | BPMN-specific shape config |204| `UmlClassifierShapeModel` | UML class diagram shape |205206## Common Patterns207208### Flow Diagram Shape Types209```csharp210// Flow shapes: Terminator, Process, Decision, Document, DirectData,211// MultiDocument, PreDefinedProcess, Delay, Annotation, Annotation2,212// ManualOperation, ManualInput, Card, PaperTap, Or, SummingJunction,213// Sort, Extract, Merge, Offline, Start1, Start2, End1, End2,214// Preparation, SequentialAccessStorage, PunchedCard, PunchedTape,215// StoredData, InternalStorage, DirectAccessStorage, Display,216// ManualOperation, Connector, OffPageReference, ExternalOrganization217Shape = new { type = "Flow", shape = "Process" }218```219220### Basic Shapes221```csharp222// Basic shapes: Rectangle, Ellipse, Triangle, Pentagon, Hexagon,223// Heptagon, Octagon, Decagon, Dodecagon, Star, Cross, Diamond,224// CylindricalShape, Trapezoid, Parallelogram, Rhombus225Shape = new { type = "Basic", shape = "Rectangle" }226```
syncfusion