syncfusion-angular-diagram

用途

Syncfusion Angular Diagram 技能用于在 Angular 项目中实现和配置 Syncfusion EJ2 Diagram 组件，适合需要可视化呈现流程、层级或业务规范图形的场景。

典型使用场景包括：

创建可视化图表（流程图、组织结构图、BPMN、UML）
构建带节点和连接器的交互式图表
应用自动布局（层级布局、组织结构图、思维导图、径向布局、流程图）
设计业务过程的 BPMN 或 UML 图
添加交互（拖拽、调整大小、选择、撤销/重做）
导出或序列化图表为 JSON/图像

主要能力

组件核心概念涵盖：

节点：矩形、圆形、流程图形状、自定义形状
连接器：连接节点的直线（Straight）、正交（Orthogonal）、贝塞尔（Bezier）
标签：节点与连接器上的文本注释
端口：节点边界上的连接点
泳道：用于流程图中的水平/垂直泳道
布局：自动定位（层级、组织结构图、思维导图等）
BPMN 形状：业务流程标准化图形
UML 图：类图与序列图表示法
符号面板：可拖拽的符号库
数据绑定：从 JSON 数据渲染图表

关键特性包括：交互式编辑（拖拽、缩放、旋转节点与连接器）、自动布局、BPMN 与 UML 内置图形库、序列化（JSON 保存/加载）、导出（PNG、SVG、PDF 及打印）、撤销/重做、虚拟化（高效渲染大型图表）、无障碍支持（WCAG 2.1 合规与键盘导航）。

使用方式

API 验证要求：该技能特别说明，在生成代码示例前，必须阅读 reference 文件（references/*.md）来验证 API 类名、属性与签名，不要假设或推断类名。

安装与主题设置流程见 references/getting-started.md。基本使用通过 DiagramComponent 组件实现，并使用模块注入模式注册所需功能，例如：

Diagram.Inject(BpmnDiagrams, SymbolPalette)

快速入门示例（来自技能资料）：

import { Component, Inject } from '@angular/core';
import { DiagramComponent, DiagramModule } from '@syncfusion/ej2-angular-diagrams';

@Component({
  selector: 'app-diagram',
  template: `
    <ejs-diagram #diagram 
      width="100%" 
      height="600px"
      [nodes]="nodes"
      [connectors]="connectors">
    </ejs-diagram>
  `,
  standalone: true,
  imports: [DiagramModule]
})
export class DiagramComponent {
  nodes = [
    {
      id: 'start',
      width: 80,
      height: 80,
      offsetX: 150,
      offsetY: 150,
      shape: { type: 'Flow', shape: 'Terminator' },
      annotations: [{ content: 'START' }]
    },
    {
      id: 'process',
      width: 100,
      height: 80,
      offsetX: 350,
      offsetY: 150,
      shape: { type: 'Flow', shape: 'Process' },
      annotations: [{ content: 'Process' }]
    },
    {
      id: 'end',
      width: 80,
      height: 80,
      offsetX: 550,
      offsetY: 150,
      shape: { type: 'Flow', shape: 'Terminator' },
      annotations: [{ content: 'END' }]
    }
  ];

  connectors = [
    { id: 'connector1', sourceID: 'start', targetID: 'process' },
    { id: 'connector2', sourceID: 'process', targetID: 'end' }
  ];
}

常用模式还包括：通过 getNodeDefaults 设置节点默认样式、通过 dataSourceSettings 绑定数据、处理选择变化、导出图表、序列化图表等，具体见对应 reference 文件。

适用场景与限制

该技能适用于 Angular 项目中的图表构建。资料中列出的常见错误与限制包括：

形状类型应使用 'Flow' 而非 'FlowShape'；BPMN 使用 'Bpmn'；基础几何使用 'Basic'。
不应在 Diagram.Inject() 中注入未经验证的模块（如 Swimlane 不是可注入模块）。
注释样式不支持 whiteSpace 属性。
DiagramComponent 上不存在 updateNode() 方法，应使用 getObject() 获取对象、修改属性后调用 dataBind()。
数据绑定应使用 dataSourceSettings 配置映射，而非直接数组赋值。
独立组件需设置 standalone: true。

性能建议：1000+ 节点时启用虚拟化；复杂层级可预计算位置；连接器更新使用 connectorChanges；超过 50MB 的 PDF 导出使用增量方式。

关于收费、价格等信息，资料中暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景与限制