⚠️ 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

1. Always read references/getting-started.md for every request
2. Read additional reference files only if they match the user's query (see Navigation Guide below)
3. 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:

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.

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

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