syncfusion-aspnetcore-diagram

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion ASP.NET Core Diagram Component

Syncfusion ASP.NET Core Diagram组件

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.

这是一份关于在ASP.NET Core应用中使用Tag Helpers实现Syncfusion EJ2 Diagram控件的全面技能指南，内容涵盖从基础流程图到复杂的BPMN、UML、泳道图以及自动布局图表的所有相关知识。

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

在ASP.NET Core（Razor Pages / MVC）应用中创建任意图表
制作流程图、组织结构图、网络图、流程图
实现BPMN或UML图表
配置节点/连接器的形状、样式、注释和端口
设置自动布局（层级结构、组织结构图、径向图、思维导图）
添加用于拖放绘图的符号面板
绑定来自数据库或远程数据源的图表数据
将图表导出为图片/SVG格式或进行打印
启用绘图工具、撤销/重做、图层和虚拟化功能

Important: API Verification Required

重要提示：需验证API

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.

需验证API：在生成代码示例之前，请务必通过阅读参考文件（

references/*.md

）来验证API类名、属性和签名。请勿自行假设或推断类名。

Navigation Guide

导航指南

Setup and First Diagram

安装与首个图表

📄 Read: references/getting-started.md

NuGet installation, tag helper registration, CDN resources, basic diagram, first node/connector

📄 阅读：references/getting-started.md

NuGet安装、Tag Helper注册、CDN资源、基础图表、首个节点/连接器

Nodes (Shapes, Position, Styling)

节点（形状、位置、样式）

📄 Read: references/nodes.md

Creating nodes, offsetX/Y, width/height, style, gradient, shadow, expand/collapse icons, events, getNodeDefaults

📄 阅读：references/nodes.md

创建节点、offsetX/Y、width/height、样式、渐变、阴影、展开/折叠图标、事件、getNodeDefaults

Connectors (Lines, Arrows, Routing)

连接器（线条、箭头、路由）

📄 Read: references/connectors.md

Straight/Orthogonal/Bezier connectors, sourceID/targetID, decorators, segments, routing, events

📄 阅读：references/connectors.md

直线/正交/贝塞尔连接器、sourceID/targetID、装饰器、线段、路由、事件

Labels and Annotations

标签与注释

📄 Read: references/labels-and-annotations.md

Adding text to nodes and connectors, font, alignment, hyperlinks, interaction, events

📄 阅读：references/labels-and-annotations.md

为节点和连接器添加文本、字体、对齐方式、超链接、交互、事件

Ports (Connection Points)

端口（连接点）

📄 Read: references/ports.md

Port types, positioning, appearance, connecting via ports, port constraints

📄 阅读：references/ports.md

端口类型、定位、外观、通过端口连接、端口约束

Shapes and Styles

形状与样式

📄 Read: references/shapes-and-styles.md

Flow/Basic/Path/Image/HTML/Native shapes, fill, stroke, gradient, opacity

📄 阅读：references/shapes-and-styles.md

流程图/基础/路径/图片/HTML/原生形状、填充、描边、渐变、透明度

BPMN Diagrams

BPMN图表

📄 Read: references/bpmn-diagrams.md

Module injection, events/triggers, gateways, activities, data objects, BPMN connectors

📄 阅读：references/bpmn-diagrams.md

模块注入、事件/触发器、网关、活动、数据对象、BPMN连接器

UML Diagrams

UML图表

📄 Read: references/uml-diagrams.md

Class diagrams, classifier shapes, relationships, UML activity diagrams, sequence diagrams

📄 阅读：references/uml-diagrams.md

类图、分类器形状、关系、UML活动图、序列图

Automatic Layouts

自动布局

📄 Read: references/layouts.md

Hierarchical tree, org chart, mind map, radial tree, symmetric layout, getLayoutInfo, expand/collapse

📄 阅读：references/layouts.md

层级树、组织结构图、思维导图、径向树、对称布局、getLayoutInfo、展开/折叠

Swimlane Diagrams

泳道图

📄 Read: references/swimlanes.md

Swimlane structure, lanes, phases, children, headers, runtime add, palette integration

📄 阅读：references/swimlanes.md

泳道结构、lanes、phases、子元素、标题、运行时添加、面板集成

Groups and Containers

组与容器

📄 Read: references/groups-and-containers.md

Grouping nodes, add/remove children, Canvas and Stack container types

📄 阅读：references/groups-and-containers.md

节点分组、添加/移除子元素、Canvas和Stack容器类型

Symbol Palette

符号面板

📄 Read: references/symbol-palette.md

SymbolPalette component, defining palettes, drag-and-drop, tooltips, customization

📄 阅读：references/symbol-palette.md

SymbolPalette组件、定义面板、拖放、工具提示、自定义

Data Binding

数据绑定

📄 Read: references/data-binding.md

DataManager integration, dataSourceSettings, id/parentId mapping, setNodeTemplate, CRUD

📄 阅读：references/data-binding.md

DataManager集成、dataSourceSettings、id/parentId映射、setNodeTemplate、CRUD

Interaction and Drawing Tools

交互与绘图工具

📄 Read: references/interaction-and-tools.md

Selection, drag/resize/rotate, drawing tools, constraints, undo/redo, commands, keyboard

📄 阅读：references/interaction-and-tools.md

选择、拖拽/调整大小/旋转、绘图工具、约束、撤销/重做、命令、键盘操作

Serialization and Export

序列化与导出

📄 Read: references/serialization-and-export.md

saveDiagram/loadDiagram, exportDiagram (image/SVG), print, preventDefaults

📄 阅读：references/serialization-and-export.md

saveDiagram/loadDiagram、exportDiagram（图片/SVG）、打印、preventDefaults

Diagram Settings

图表设置

📄 Read: references/diagram-settings.md

Layers, virtualization, grid lines, ruler, scroll settings, page settings, tooltip, accessibility

📄 阅读：references/diagram-settings.md

图层、虚拟化、网格线、标尺、滚动设置、页面设置、工具提示、无障碍访问

Quick Start

快速开始

1. Install NuGet Package

1. 安装NuGet包

powershell

Install-Package Syncfusion.EJ2.AspNet.Core

powershell

Install-Package Syncfusion.EJ2.AspNet.Core

2. Register Tag Helper (

~/Pages/_ViewImports.cshtml

)

2. 注册Tag Helper（

~/Pages/_ViewImports.cshtml

）

cshtml

@addTagHelper *, Syncfusion.EJ2

cshtml

@addTagHelper *, Syncfusion.EJ2

3. Add CDN Resources (

~/Pages/Shared/_Layout.cshtml

)

3. 添加CDN资源（

~/Pages/Shared/_Layout.cshtml

）

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>

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

)

4. 在Razor页面中添加图表（

~/Pages/Index.cshtml

）

cshtml

<ejs-diagram id="diagram" width="100%" height="550px"
    nodes="@ViewBag.nodes"
    connectors="@ViewBag.connectors"
    getNodeDefaults="@ViewBag.getNodeDefaults"
    getConnectorDefaults="@ViewBag.getConnectorDefaults">
</ejs-diagram>

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

5. 控制器 / PageModel

csharp

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();
}

javascript

function getNodeDefaults(node) {
    node.height = 60;
    node.width = 120;
    return node;
}
function getConnectorDefaults(connector) {
    connector.type = 'Orthogonal';
    return connector;
}

csharp

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();
}

javascript

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:

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);

部分功能需要通过JavaScript显式注入模块：

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

关键C#类

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

类	用途
`DiagramNode`	图表节点/形状
`DiagramConnector`	节点间的连接线
`DiagramNodeAnnotation`	节点上的文本标签
`DiagramConnectorAnnotation`	连接器上的文本标签
`DiagramPort`	节点上的连接点
`DiagramLayer`	用于组织图表元素的图层
`DiagramPageSettings`	页面尺寸、方向、背景
`BpmnShapes`	BPMN专用形状配置
`UmlClassifierShapeModel`	UML类图形状

Common Patterns

常见模式

Flow Diagram Shape Types

流程图形状类型

csharp

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

csharp

// 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

基础形状

csharp

// Basic shapes: Rectangle, Ellipse, Triangle, Pentagon, Hexagon,
// Heptagon, Octagon, Decagon, Dodecagon, Star, Cross, Diamond,
// CylindricalShape, Trapezoid, Parallelogram, Rhombus
Shape = new { type = "Basic", shape = "Rectangle" }

csharp

// Basic shapes: Rectangle, Ellipse, Triangle, Pentagon, Hexagon,
// Heptagon, Octagon, Decagon, Dodecagon, Star, Cross, Diamond,
// CylindricalShape, Trapezoid, Parallelogram, Rhombus
Shape = new { type = "Basic", shape = "Rectangle" }

syncfusion-aspnetcore-diagram

Original

Translation

Syncfusion ASP.NET Core Diagram Component

Syncfusion ASP.NET Core Diagram组件

When to Use This Skill

何时使用此技能

Important: API Verification Required

重要提示：需验证API

Navigation Guide

导航指南

Setup and First Diagram

安装与首个图表

Nodes (Shapes, Position, Styling)

节点（形状、位置、样式）

Connectors (Lines, Arrows, Routing)

连接器（线条、箭头、路由）

Labels and Annotations

标签与注释

Ports (Connection Points)

端口（连接点）

Shapes and Styles

形状与样式

BPMN Diagrams

BPMN图表

UML Diagrams

UML图表

Automatic Layouts

自动布局

Swimlane Diagrams

泳道图

Groups and Containers

组与容器

Symbol Palette

符号面板

Data Binding

数据绑定

Interaction and Drawing Tools

交互与绘图工具

Serialization and Export

序列化与导出

Diagram Settings

图表设置

Quick Start

快速开始

1. Install NuGet Package

1. 安装NuGet包

2. Register Tag Helper (~/Pages/_ViewImports.cshtml)

2. 注册Tag Helper（~/Pages/_ViewImports.cshtml）

3. Add CDN Resources (~/Pages/Shared/_Layout.cshtml)

3. 添加CDN资源（~/Pages/Shared/_Layout.cshtml）

4. Add Diagram to a Razor Page (~/Pages/Index.cshtml)

4. 在Razor页面中添加图表（~/Pages/Index.cshtml）

5. Controller / PageModel

5. 控制器 / PageModel

Module Injections

模块注入

Key C# Classes

关键C#类

Common Patterns

常见模式

Flow Diagram Shape Types

流程图形状类型

Basic Shapes

基础形状

2. Register Tag Helper (
`~/Pages/_ViewImports.cshtml`
)

2. 注册Tag Helper（
`~/Pages/_ViewImports.cshtml`
）

3. Add CDN Resources (
`~/Pages/Shared/_Layout.cshtml`
)

3. 添加CDN资源（
`~/Pages/Shared/_Layout.cshtml`
）

4. Add Diagram to a Razor Page (
`~/Pages/Index.cshtml`
)

4. 在Razor页面中添加图表（
`~/Pages/Index.cshtml`
）