Skip to the rows

agentsclimarketplace

Syncfusion aspnetmvc diagram

Skill syncfusion/aspnetmvc-ui-components-skills/skills/syncfusion-aspnetmvc-diagram

This repository contains AI Skills of ASPNET MVC UI Components.

Install

npx -y skills add syncfusion/aspnetmvc-ui-components-skills --skill syncfusion-aspnetmvc-diagram

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

3 things to look at

20 days oldThe repository was created 20 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

8.6 KB, as published. Nobody here has run it

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" }

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.