⚠️ STRICT USAGE RULES — MANDATORY FOR ALL CODE GENERATION
These rules are non-negotiable and must be followed for every code generation request.
Rule A — Use Only Provided Reference Files
- Always read
references/getting-started.md for every request
- Read additional reference files only if they match the user's query (see Navigation Guide below)
- No external knowledge allowed:
- ❌ Do NOT use internet documentation
- ❌ Do NOT use training-data assumptions about Syncfusion APIs
- ❌ Do NOT reference older EJ1 APIs or non-Tag Helper syntax
- ✅ If a feature cannot be confirmed from reference files, apply Rule B
Rule B — No Guessing, No Inference
If a feature, property, API, or behavior is not explicitly documented in the reference files:
You must NOT:
- Invent class properties, subclasses, or constructor overloads
- Infer JavaScript callback signatures or method names
- Assume module injections exist beyond those documented
- Generalize from other Syncfusion components
- Use deprecated or undocumented shape types
Instead, respond with:
⚠️ NOT DOCUMENTED: [feature name] is not covered in the reference files.
Skipping this feature to avoid generating incorrect code.
Rule C — Enforce Required Module Injections
Before generating code for these features, always include the corresponding injection:
| Feature |
Required Injection |
| BPMN diagrams |
ej.diagrams.Diagram.Inject(ej.diagrams.BpmnDiagrams) |
| Export / Print |
ej.diagrams.Diagram.Inject(ej.diagrams.PrintAndExport) |
| Mind Map layout |
ej.diagrams.Diagram.Inject(ej.diagrams.MindMap) |
| Complex Hierarchical layout |
ej.diagrams.Diagram.Inject(ej.diagrams.ComplexHierarchicalTree) |
Do NOT assume any other injections exist unless confirmed in reference files.
Navigation Guide
Use this table to identify which reference file to read (Rule A).
Always read references/getting-started.md first, then read only files relevant to the request.
| Reference File |
Read When the Query Involves |
| 📄 getting-started.md |
Every request — NuGet setup, tag helper registration, CDN, first diagram |
| 📄 nodes.md |
Creating/styling nodes, offsetX/Y, width/height, gradients, shadow, expand/collapse, getNodeDefaults |
| 📄 connectors.md |
Lines (Straight/Orthogonal/Bezier), arrows, routing, sourceID/targetID, segments, getConnectorDefaults |
| 📄 labels-and-annotations.md |
Text labels, font, alignment, hyperlinks |
| 📄 ports.md |
Connection points, port positioning, constraints |
| 📄 shapes-and-styles.md |
Flow/Basic/Path/Image/HTML/Native shapes, fill, stroke, gradient, opacity |
| 📄 bpmn-diagrams.md |
BPMN events, gateways, activities, data objects |
| 📄 uml-diagrams.md |
UML class/sequence/activity diagrams, classifiers, relationships |
| 📄 layouts.md |
Hierarchical, org chart, mind map, radial, symmetric layouts, getLayoutInfo |
| 📄 swimlanes.md |
Swimlane structure, lanes, phases, palette integration |
| 📄 groups-and-containers.md |
Grouping nodes, Canvas/Stack containers |
| 📄 symbol-palette.md |
ejs-symbolpalette, palettes, drag-and-drop, tooltips |
| 📄 data-binding.md |
DataManager, dataSourceSettings, id/parentId mapping, setNodeTemplate, CRUD |
| 📄 interaction-and-tools.md |
Selection, drag/resize/rotate, drawing tools, constraints, undo/redo |
| 📄 serialization-and-export.md |
saveDiagram/loadDiagram, export, print |
| 📄 diagram-settings.md |
Layers, virtualization, grid, ruler, scroll, page settings, tooltip |
Quick Start
1. Install NuGet Package
Install-Package Syncfusion.EJ2.AspNet.Core
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 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. PageModel / Controller
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;
}
Key C# Classes
| Class |
Purpose |
DiagramNode |
Node/shape element |
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 elements |
DiagramPageSettings |
Page size, orientation, background |
BpmnShapes |
BPMN shape configuration |
UmlClassifierShapeModel |
UML class diagram shape |
Common Shape Types
Flow Shapes
Terminator, Process, Decision, Document, DirectData, MultiDocument, PreDefinedProcess, Delay, Annotation, ManualOperation, ManualInput, Card, Or, SummingJunction, Extract, Merge, Sort, OffPageReference
Usage:
Shape = new { type = "Flow", shape = "Process" }
Basic Shapes
Rectangle, Ellipse, Triangle, Pentagon, Hexagon, Heptagon, Octagon, Star, Cross, Diamond, CylindricalShape, Trapezoid, Parallelogram, Rhombus
Usage:
Shape = new { type = "Basic", shape = "Rectangle" }
When to Use This Skill
✅ Creating any diagram in ASP.NET Core (Razor Pages / MVC)
✅ Building flowcharts, org charts, network diagrams
✅ Implementing BPMN or UML diagrams
✅ Configuring node/connector shapes, styles, annotations
✅ Setting up automatic layouts
✅ Adding symbol palette for drag-and-drop
✅ Binding diagram data from database
✅ Exporting diagrams or printing
✅ Enabling drawing tools, undo/redo, layers
1---2name: syncfusion-aspnetcore-diagram3description: Implement Syncfusion ASP.NET Core Diagram component (EJ2 Tag Helper `ejs-diagram`) for building interactive diagrams in Razor Pages or MVC applications. Use this skill when working with org charts, flowcharts, BPMN process diagrams, UML diagrams, or swimlane charts. This skill covers node and connector configuration, layout options, shape styling, data binding, drawing tools, export/print functionality, and other diagram features.4---56# ⚠️ STRICT USAGE RULES — MANDATORY FOR ALL CODE GENERATION78These rules are **non-negotiable** and must be followed for **every** code generation request.910## Rule A — Use Only Provided Reference Files11121. **Always read** `references/getting-started.md` for every request132. Read **additional** reference files **only if they match the user's query** (see Navigation Guide below)143. **No external knowledge** allowed:15 - ❌ Do NOT use internet documentation16 - ❌ Do NOT use training-data assumptions about Syncfusion APIs17 - ❌ Do NOT reference older EJ1 APIs or non-Tag Helper syntax18 - ✅ If a feature cannot be confirmed from reference files, apply Rule B1920## Rule B — No Guessing, No Inference2122If a feature, property, API, or behavior is **not explicitly documented** in the reference files:2324**You must NOT:**25- Invent class properties, subclasses, or constructor overloads26- Infer JavaScript callback signatures or method names27- Assume module injections exist beyond those documented28- Generalize from other Syncfusion components29- Use deprecated or undocumented shape types3031**Instead, respond with:**32```33⚠️ NOT DOCUMENTED: [feature name] is not covered in the reference files.34Skipping this feature to avoid generating incorrect code.35```3637## Rule C — Enforce Required Module Injections3839Before generating code for these features, **always include** the corresponding injection:4041| Feature | Required Injection |42|---|---|43| BPMN diagrams | `ej.diagrams.Diagram.Inject(ej.diagrams.BpmnDiagrams)` |44| Export / Print | `ej.diagrams.Diagram.Inject(ej.diagrams.PrintAndExport)` |45| Mind Map layout | `ej.diagrams.Diagram.Inject(ej.diagrams.MindMap)` |46| Complex Hierarchical layout | `ej.diagrams.Diagram.Inject(ej.diagrams.ComplexHierarchicalTree)` |4748Do **NOT** assume any other injections exist unless confirmed in reference files.4950---5152# Navigation Guide5354Use this table to identify which reference file to read (Rule A). 55**Always read `references/getting-started.md` first**, then read only files relevant to the request.5657| Reference File | Read When the Query Involves |58|---|---|59| 📄 [getting-started.md](references/getting-started.md) | **Every request** — NuGet setup, tag helper registration, CDN, first diagram |60| 📄 [nodes.md](references/nodes.md) | Creating/styling nodes, offsetX/Y, width/height, gradients, shadow, expand/collapse, `getNodeDefaults` |61| 📄 [connectors.md](references/connectors.md) | Lines (Straight/Orthogonal/Bezier), arrows, routing, `sourceID`/`targetID`, segments, `getConnectorDefaults` |62| 📄 [labels-and-annotations.md](references/labels-and-annotations.md) | Text labels, font, alignment, hyperlinks |63| 📄 [ports.md](references/ports.md) | Connection points, port positioning, constraints |64| 📄 [shapes-and-styles.md](references/shapes-and-styles.md) | Flow/Basic/Path/Image/HTML/Native shapes, fill, stroke, gradient, opacity |65| 📄 [bpmn-diagrams.md](references/bpmn-diagrams.md) | BPMN events, gateways, activities, data objects |66| 📄 [uml-diagrams.md](references/uml-diagrams.md) | UML class/sequence/activity diagrams, classifiers, relationships |67| 📄 [layouts.md](references/layouts.md) | Hierarchical, org chart, mind map, radial, symmetric layouts, `getLayoutInfo` |68| 📄 [swimlanes.md](references/swimlanes.md) | Swimlane structure, lanes, phases, palette integration |69| 📄 [groups-and-containers.md](references/groups-and-containers.md) | Grouping nodes, Canvas/Stack containers |70| 📄 [symbol-palette.md](references/symbol-palette.md) | `ejs-symbolpalette`, palettes, drag-and-drop, tooltips |71| 📄 [data-binding.md](references/data-binding.md) | DataManager, `dataSourceSettings`, id/parentId mapping, `setNodeTemplate`, CRUD |72| 📄 [interaction-and-tools.md](references/interaction-and-tools.md) | Selection, drag/resize/rotate, drawing tools, constraints, undo/redo |73| 📄 [serialization-and-export.md](references/serialization-and-export.md) | `saveDiagram`/`loadDiagram`, export, print |74| 📄 [diagram-settings.md](references/diagram-settings.md) | Layers, virtualization, grid, ruler, scroll, page settings, tooltip |7576---7778# Quick Start7980## 1. Install NuGet Package8182```powershell83Install-Package Syncfusion.EJ2.AspNet.Core84```8586## 2. Register Tag Helper (`~/Pages/_ViewImports.cshtml`)8788```cshtml89@addTagHelper *, Syncfusion.EJ290```9192## 3. Add CDN Resources (`~/Pages/Shared/_Layout.cshtml`)9394```cshtml95<head>96 <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />97 <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>98</head>99<body>100 ...101 <ejs-scripts></ejs-scripts>102</body>103```104105## 4. Add Diagram to Razor Page (`~/Pages/Index.cshtml`)106107```cshtml108<ejs-diagram id="diagram" width="100%" height="550px"109 nodes="@ViewBag.nodes"110 connectors="@ViewBag.connectors"111 getNodeDefaults="@ViewBag.getNodeDefaults"112 getConnectorDefaults="@ViewBag.getConnectorDefaults">113</ejs-diagram>114```115116## 5. PageModel / Controller117118```csharp119public IActionResult OnGet()120{121 List<DiagramNode> nodes = new List<DiagramNode>122 {123 new DiagramNode { Id = "node1", OffsetX = 100, OffsetY = 100, Width = 100, Height = 60,124 Annotations = new List<DiagramNodeAnnotation> {125 new DiagramNodeAnnotation { Content = "Start" }126 },127 Shape = new { type = "Flow", shape = "Terminator" }128 },129 new DiagramNode { Id = "node2", OffsetX = 300, OffsetY = 100, Width = 100, Height = 60,130 Annotations = new List<DiagramNodeAnnotation> {131 new DiagramNodeAnnotation { Content = "Process" }132 },133 Shape = new { type = "Flow", shape = "Process" }134 }135 };136 137 List<DiagramConnector> connectors = new List<DiagramConnector>138 {139 new DiagramConnector { Id = "conn1", SourceID = "node1", TargetID = "node2" }140 };141 142 ViewBag.nodes = nodes;143 ViewBag.connectors = connectors;144 ViewBag.getNodeDefaults = "getNodeDefaults";145 ViewBag.getConnectorDefaults = "getConnectorDefaults";146 return Page();147}148```149150```javascript151function getNodeDefaults(node) {152 node.height = 60;153 node.width = 120;154 return node;155}156157function getConnectorDefaults(connector) {158 connector.type = 'Orthogonal';159 return connector;160}161```162163---164165# Key C# Classes166167| Class | Purpose |168|-------|---------|169| `DiagramNode` | Node/shape element |170| `DiagramConnector` | Connection line between nodes |171| `DiagramNodeAnnotation` | Text label on a node |172| `DiagramConnectorAnnotation` | Text label on a connector |173| `DiagramPort` | Connection point on a node |174| `DiagramLayer` | Layer for organizing elements |175| `DiagramPageSettings` | Page size, orientation, background |176| `BpmnShapes` | BPMN shape configuration |177| `UmlClassifierShapeModel` | UML class diagram shape |178179---180181# Common Shape Types182183### Flow Shapes184`Terminator`, `Process`, `Decision`, `Document`, `DirectData`, `MultiDocument`, `PreDefinedProcess`, `Delay`, `Annotation`, `ManualOperation`, `ManualInput`, `Card`, `Or`, `SummingJunction`, `Extract`, `Merge`, `Sort`, `OffPageReference`185186**Usage:**187```csharp188Shape = new { type = "Flow", shape = "Process" }189```190191### Basic Shapes192`Rectangle`, `Ellipse`, `Triangle`, `Pentagon`, `Hexagon`, `Heptagon`, `Octagon`, `Star`, `Cross`, `Diamond`, `CylindricalShape`, `Trapezoid`, `Parallelogram`, `Rhombus`193194**Usage:**195```csharp196Shape = new { type = "Basic", shape = "Rectangle" }197```198199## When to Use This Skill200201✅ Creating any diagram in ASP.NET Core (Razor Pages / MVC) 202✅ Building flowcharts, org charts, network diagrams 203✅ Implementing BPMN or UML diagrams 204✅ Configuring node/connector shapes, styles, annotations 205✅ Setting up automatic layouts 206✅ Adding symbol palette for drag-and-drop 207✅ Binding diagram data from database 208✅ Exporting diagrams or printing 209✅ Enabling drawing tools, undo/redo, layers
syncfusion