syncfusion-aspnetcore-diagram

⚠️ 严格使用规则——所有代码生成均须遵守

这些规则不可协商，每次代码生成请求都必须遵守。

规则 A — 仅使用提供的参考文件

1. 每次请求都必须阅读 references/getting-started.md
2. 仅当其他参考文件与用户的查询相关时，才阅读这些文件（参见下方导航指南）
3. 禁止使用外部知识：
   • ❌ 不要使用互联网文档
   • ❌ 不要依据训练数据推测 Syncfusion API
   • ❌ 不要引用旧版 EJ1 API 或非 Tag Helper 语法
   • ✅ 如果无法从参考文件确认某项功能，请遵循规则 B

规则 B — 不得猜测或推断

如果参考文件中未明确记录某项功能、属性、API 或行为：

不得：

• 虚构类属性、子类或构造函数重载
• 推断 JavaScript 回调签名或方法名称
• 假设存在文档未记载的模块注入
• 根据其他 Syncfusion 组件进行泛化
• 使用已弃用或未记录的形状类型

请改为回复：

⚠️ NOT DOCUMENTED: [feature name] is not covered in the reference files.
Skipping this feature to avoid generating incorrect code.

规则 C — 强制注入所需模块

为以下功能生成代码前，必须始终包含相应的注入：

功能	所需注入
BPMN 图表	ej.diagrams.Diagram.Inject(ej.diagrams.BpmnDiagrams)
导出 / 打印	ej.diagrams.Diagram.Inject(ej.diagrams.PrintAndExport)
思维导图布局	ej.diagrams.Diagram.Inject(ej.diagrams.MindMap)
复杂分层布局	ej.diagrams.Diagram.Inject(ej.diagrams.ComplexHierarchicalTree)

除非参考文件中已确认，否则不要假设存在任何其他注入。

---

导航指南

使用此表确定要阅读哪个参考文件（规则 A）。
始终先阅读 references/getting-started.md，然后仅阅读与请求相关的文件。

参考文件	查询涉及以下内容时阅读
📄 getting-started.md	每次请求——NuGet 设置、Tag Helper 注册、CDN、第一个图表
📄 nodes.md	创建 / 设置节点样式、offsetX/Y、width/height、渐变、阴影、展开 / 折叠、getNodeDefaults
📄 connectors.md	线条（直线 / 正交 / 贝塞尔）、箭头、路由、sourceID/targetID、线段、getConnectorDefaults
📄 labels-and-annotations.md	文本标签、字体、对齐方式、超链接
📄 ports.md	连接点、端口定位、约束
📄 shapes-and-styles.md	流程图 / 基本 / 路径 / 图像 / HTML / Native 形状、填充、描边、渐变、不透明度
📄 bpmn-diagrams.md	BPMN 事件、网关、活动、数据对象
📄 uml-diagrams.md	UML 类图 / 时序图 / 活动图、分类器、关系
📄 layouts.md	分层、组织结构图、思维导图、辐射状、对称布局、getLayoutInfo
📄 swimlanes.md	泳道结构、泳道、阶段、调色板集成
📄 groups-and-containers.md	节点分组、Canvas/Stack 容器
📄 symbol-palette.md	ejs-symbolpalette、调色板、拖放、工具提示
📄 data-binding.md	DataManager、dataSourceSettings、id/parentId 映射、setNodeTemplate、CRUD
📄 interaction-and-tools.md	选择、拖动 / 调整大小 / 旋转、绘制工具、约束、撤销 / 重做
📄 serialization-and-export.md	saveDiagram/loadDiagram、导出、打印
📄 diagram-settings.md	图层、虚拟化、网格、标尺、滚动、页面设置、工具提示

---

快速入门

1. 安装 NuGet 包

Install-Package Syncfusion.EJ2.AspNet.Core

2. 注册标记帮助程序（~/Pages/_ViewImports.cshtml）

@addTagHelper *, Syncfusion.EJ2

3. 添加 CDN 资源（~/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. 在 Razor 页面中添加图表（~/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 / 控制器

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

---

重要 C# 类

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

---

常见形状类型

流程形状

Terminator, Process, Decision, Document, DirectData, MultiDocument, PreDefinedProcess, Delay, Annotation, ManualOperation, ManualInput, Card, Or, SummingJunction, Extract, Merge, Sort, OffPageReference

用法：

Shape = new { type = "Flow", shape = "Process" }

基本形状

Rectangle, Ellipse, Triangle, Pentagon, Hexagon, Heptagon, Octagon, Star, Cross, Diamond, CylindricalShape, Trapezoid, Parallelogram, Rhombus

用法：

Shape = new { type = "Basic", shape = "Rectangle" }

何时使用此技能

✅ 在 ASP.NET Core（Razor Pages / MVC）中创建任何图表
✅ 构建流程图、组织结构图、网络图
✅ 实现 BPMN 或 UML 图表
✅ 配置节点/连接器的形状、样式和注释
✅ 设置自动布局
✅ 添加用于拖放的符号面板
✅ 从数据库绑定图表数据
✅ 导出图表或打印
✅ 启用绘图工具、撤销/重做和图层