Skills

syncfusion-aspnetcore-diagram

Installation
SKILL.md

Syncfusion ASP.NET Core Diagram Component

A comprehensive skill for implementing the Syncfusion EJ2 Diagram control in ASP.NET Core 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 Core (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.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 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.diagram.Diagram.Inject(ej.diagram.BpmnDiagrams);

// For export/print
ej.diagram.Diagram.Inject(ej.diagram.PrintAndExport);

// For mind map layout
ej.diagram.Diagram.Inject(ej.diagram.MindMap);

// For complex hierarchical layout
ej.diagram.Diagram.Inject(ej.diagram.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" }
Related skills

More from syncfusion/aspnetcore-ui-components-skills

Installs
9
Repository
syncfusion/aspn…s-skills
First Seen
Mar 31, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykWarn