syncfusion-javascript-diagram

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

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

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

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

规则 B — 不得猜测或推断

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

你不得：

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

请改为回复：

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

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

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

功能	所需注入
实体关系图	Diagram.Inject(ErDiagrams)
BPMN 图	Diagram.Inject(BpmnDiagrams)
导出 / 打印	Diagram.Inject(PrintAndExport)
思维导图布局	Diagram.Inject(MindMap)
复杂层级布局	Diagram.Inject(ComplexHierarchicalTree)
层级或组织结构布局	Diagram.Inject(HierarchicalTree)
UML 时序图	无需额外注入
撤销/重做	Diagram.Inject(UndoRedo)
线条分布	Diagram.Inject(LineDistribution)
线条路由	Diagram.Inject(LineRouting)
Mermaid 语法	Diagram.Inject(FlowchartLayout, DataBinding) 或 Diagram.Inject(MindMap, DataBinding)

除非参考文件中有明确记录，否则不要假设存在其他注入。

---

Diagram 组件概览

Diagram 控件是一个功能丰富的组件，用于在 TypeScript/JavaScript 应用中创建交互式、可编辑的图表。

核心元素

元素	用途	常见属性
节点	表示实体的图形形状	id、offsetX、offsetY、width、height、shape、style
连接器	连接节点的线条/箭头	id、sourceID、targetID、type、style、targetDecorator
标签	节点/连接器上的文本注释	content、font、alignment、offset

主要功能

✅ 自动布局（流程图、层级、组织结构）
✅ 数据绑定（JSON、父子关系）
✅ 交互工具（绘制、选择、平移、缩放、拖放）
✅ 样式设置（CSS 自定义、主题、条件样式）
✅ 序列化（以 JSON 格式保存/加载）
✅ 导出（PNG、JPG、SVG、PDF）
✅ 用户交互（事件、约束、撤销/重做）

---

导航指南

请始终先阅读 references/getting-started.md，然后仅阅读与请求相关的文件。

参考文件	在查询涉及以下内容时阅读
📄 getting-started.md	每个请求 — 安装包、导入、首个图表、初始化
📄 nodes-and-shapes.md	创建／设置节点样式、形状、定位、BPMN／UML 形状、注释
📄 connectors-and-connections.md	线条（直线／正交／贝塞尔）、箭头、路由、sourceID／targetID、线段
📄 labels-and-annotations.md	文本标签、字体、对齐、节点／连接器上的超链接
📄 ports.md	连接点、端口定位、端口约束
📄 shapes-and-styles.md	Flow／Basic／Path／Image／HTML／Native 形状、填充、描边、渐变、不透明度
📄 data-binding-and-loading.md	DataSourceSettings、JSON 加载、父子映射、动态更新
📄 layout-and-automation.md	层次、组织结构图、思维导图、径向、对称布局、方向
📄 bpmn-diagrams.md	BPMN 模块注入、事件、网关、活动、数据对象、注释
📄 uml-diagrams.md	UML 类图、UML 时序图、分类器、关系、参与者、消息、片段
📄 entity-relationship-diagrams.md	ER 实体、实体字段、数据类型、主键／外键、关系、Crow's Foot 基数、ERD 样式
📄 swimlanes.md	泳道结构、泳道、阶段、标题配置、交互
📄 groups-and-containers.md	节点分组、Canvas／Stack／Grid 容器、嵌套、边界
📄 symbol-palette.md	SymbolPaletteComponent、拖放、类别、自定义符号、搜索
📄 interaction-and-tools.md	绘图工具、选择、约束、平移／缩放、事件、撤销／重做
📄 styling-and-appearance.md	CSS 主题、颜色、字体、无障碍、响应式设计
📄 serialization-and-export.md	将图表保存／加载为 JSON、防止默认值、检测未保存的更改、导出为图像／PDF／Visio、Mermaid 语法、上传器支持
📄 diagram-settings.md	图层、虚拟化、网格、标尺、滚动、页面设置、工具提示、本地化
📄 advanced-features.md	撤销／重做、自定义命令、工具栏、性能优化

---

快速入门

1. 安装包

npm install @syncfusion/ej2-diagrams

2. 导入所需模块

import { Diagram, NodeModel, ConnectorModel } from '@syncfusion/ej2-diagrams';

3. 创建包含节点和连接器的图表

// Define nodes
let nodes: NodeModel[] = [
  {
    id: 'node1',
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    style: { fill: '#6BA5D7' },
    annotations: [{ content: 'Start' }]
  },
  {
    id: 'node2',
    offsetX: 400,
    offsetY: 250,
    width: 100,
    height: 100,
    style: { fill: '#FFD700' },
    annotations: [{ content: 'Process' }]
  }
];

// Define connector between nodes
let connectors: ConnectorModel[] = [
  {
    id: 'connector1',
    sourceID: 'node1',
    targetID: 'node2',
    style: { strokeColor: '#6BA5D7' },
    targetDecorator: { shape: 'Arrow' }
  }
];

// Create diagram
let diagram: Diagram = new Diagram({
  width: '100%',
  height: '500px',
  nodes: nodes,
  connectors: connectors
});

diagram.appendTo('#diagram-container');

HTML：

<div id="diagram-container"></div>

---

常见模式

流程图模式

创建带有决策点的简单流程图：

• 使用矩形表示流程
• 使用菱形表示决策
• 使用箭头连接
• 应用流程图自动布局

组织结构图模式

创建层级结构：

• 使用带有父子关系的数据绑定
• 应用 HierarchicalTree 布局
• 定义包含姓名／照片的员工节点
• 通过连接器显示汇报关系

网络图模式

创建系统架构图：

• 使用预定义形状（服务器、数据库、客户端）
• 使用带标签的线条连接，以展示数据流
• 使用基于网格的定位进行组织
• 添加图标和样式以增强清晰度

交互式图表模式

构建用户可编辑的图表：

• 启用绘图工具
• 允许创建和删除节点／连接器
• 为操作添加上下文菜单
• 使用序列化实现保存／加载
• 处理用户事件（选择、拖动、调整大小）

---

何时使用此技能

✅ 使用 TypeScript/JavaScript 创建任意类型的图表
✅ 构建流程图、流程或层次结构
✅ 实现 BPMN 或 UML 图表
✅ 配置节点／连接器形状、样式和注释
✅ 设置自动布局
✅ 添加用于拖放的符号面板
✅ 从 API 或 JSON 绑定图表数据
✅ 导出图表或打印
✅ 启用绘图工具、撤销／重做和图层

请勿用于： 简单的静态图表或图形（使用 Chart 组件）、数据表格（使用 Grid 组件）

---

关键 TypeScript 接口

接口	用途	关键属性
NodeModel	节点配置	id、offsetX、offsetY、width、height、shape、style、annotations
ConnectorModel	连接器配置	id、sourceID、targetID、type、style、targetDecorator
ShapeModel	形状定义	type（Basic/BPMN/UML/Flow）、shape 名称
AnnotationModel	节点／连接器上的标签	content、font、alignment、offset
PortModel	连接点	id、offset、shape、visibility、constraints

---

常见形状类型

流程形状

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

用法：

shape: { type: 'Flow', shape: 'Process' }

基本形状

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

用法：

shape: { type: 'Basic', shape: 'Rectangle' }