syncfusion-javascript-diagram

用途

Syncfusion JavaScript Diagram 是一个功能丰富的组件，用于在 TypeScript/JavaScript 应用中创建交互式、可编辑的图表。它适用于构建流程图、BPMN、泳道、UML、组织架构图、网络拓扑等可视化图表。

主要能力

• 核心元素：节点（Nodes）表示图形实体，连接线（Connectors）连接节点，标签（Labels）为节点或连接线添加文本注释。
• 自动布局：支持流程图、层次结构、组织架构等自动布局。
• 数据绑定：支持 JSON 数据及父子关系映射。
• 交互工具：绘图、选择、平移、缩放、拖放等。
• 样式定制：CSS 定制、主题、条件样式。
• 序列化：以 JSON 格式保存/加载图表。
• 导出：支持 PNG、JPG、SVG、PDF 格式。
• 用户交互：事件、约束、撤销/重做。

使用方式

安装

npm install @syncfusion/ej2-diagrams

导入模块

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

创建包含节点与连接线的图表

// 定义节点
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' }]
  }
];

// 定义节点之间的连接线
let connectors: ConnectorModel[] = [
  {
    id: 'connector1',
    sourceID: 'node1',
    targetID: 'node2',
    style: { strokeColor: '#6BA5D7' },
    targetDecorator: { shape: 'Arrow' }
  }
];

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

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

HTML：

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

强制模块注入

针对特定功能，生成代码前必须包含对应的注入：

• 实体关系图：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)

除参考文件中确认的注入外，不得假设存在其他注入。

常用模式

• 流程图模式：使用矩形表示流程，菱形表示决策，箭头连接，应用流程图自动布局。
• 组织架构图模式：使用父子关系数据绑定，应用 HierarchicalTree 布局，定义员工节点，通过连接线展示汇报关系。
• 网络图模式：使用预定义形状（服务器、数据库、客户端），用带标签的线连接展示数据流，基于网格定位，添加图标和样式。
• 交互式图表模式：启用绘图工具，允许创建和删除节点/连接线，添加上下文菜单，实现序列化保存/加载，处理用户事件（选择、拖拽、调整大小）。

关键 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' }

适用场景

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

不适用于：简单静态图表或图形（应使用 Chart 组件）、数据表格（应使用 Grid 组件）。

限制

该技能要求严格遵循参考文件，禁止使用互联网文档、训练数据假设、旧版 EJ1 API 或已弃用语法。若某功能、属性、API 或行为未在参考文件中明确记录，必须回复“⚠️ NOT DOCUMENTED”并跳过，不得猜测或推断。