syncfusion-react-diagram

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion React Diagram

The Syncfusion React Diagram component enables building rich, interactive diagrams including flowcharts, organizational charts, BPMN process flows, UML diagrams, mind maps, and network diagrams. It renders using SVG and supports extensive customization through nodes, connectors, ports, annotations, layouts, and data binding.

Syncfusion React Diagram组件可用于构建丰富的交互式图表，包括流程图、组织结构图、BPMN流程流、UML图、思维导图和网络图。它使用SVG渲染，并支持通过节点、连接器、端口、注释、布局和数据绑定进行广泛的自定义。

When to Use This Skill

何时使用该技能

Use this skill when users need to:

Build flowcharts representing processes, decision trees, or workflows
Create org charts from hierarchical or flat data sources
Model BPMN diagrams with activities, events, gateways, and flows
Draw UML diagrams including class diagrams and sequence diagrams
Visualize mind maps or radial layouts from data
Design network/entity diagrams with nodes and relationship connectors
Implement swimlane diagrams with lanes and phases
Drag and drop shapes from a symbol palette onto a canvas
Bind data to automatically generate diagram structure
Serialize and restore diagram state as JSON
Export or print diagram content as image/SVG

当用户需要以下功能时，可使用该技能：

构建流程图：表示流程、决策树或工作流
创建组织结构图：从分层或扁平数据源生成
建模BPMN图表：包含活动、事件、网关和流
绘制UML图表：包括类图和序列图
可视化思维导图：从数据源生成放射状布局
设计网络/实体图表：包含节点和关系连接器
实现泳道图：包含泳道和阶段
从符号面板拖拽形状：到画布上
数据绑定：自动生成图表结构
序列化与恢复：将图表状态保存为JSON
导出或打印：将图表内容导出为图片/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类名、属性和签名。请勿假设或推断类名。

Component Overview

组件概述

The Diagram component is built around:

Nodes — Graphical shapes (rectangles, circles, flow shapes, custom) placed on the canvas
Connectors — Lines/arrows linking nodes or freestanding points
Annotations — Text labels attached to nodes or connectors
Ports — Named connection points on nodes for precise connector anchoring
Layouts — Automatic arrangement algorithms (hierarchical, org-chart, mindmap, radial, flowchart)
Symbol Palette — Sidebar of draggable shape symbols
Module System — Opt-in feature modules (
```
Inject
```
directive) to keep bundle size lean

All diagram elements are rendered using SVG for crisp, resolution-independent graphics.

图表组件围绕以下核心元素构建：

节点 — 放置在画布上的图形形状（矩形、圆形、流程形状、自定义形状）
连接器 — 连接节点或独立点的线条/箭头
注释 — 附加到节点或连接器的文本标签
端口 — 节点上的命名连接点，用于精确锚定连接器
布局 — 自动排列算法（分层、组织结构图、思维导图、放射状、流程图）
符号面板 — 可拖拽形状符号的侧边栏
模块系统 — 可选功能模块（
```
Inject
```
指令），用于减小包体积

所有图表元素均使用SVG渲染，以实现清晰、与分辨率无关的图形效果。

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

When to read:

First-time setup of the Diagram component
Installing packages, CSS imports, and theme configuration
Creating a minimal
```
DiagramComponent
```
Understanding the
```
Inject
```
module system
Next.js or Preact integration

Covers:

npm install and dependencies
Vite/CRA project setup
CSS theme import paths
Basic
```
DiagramComponent
```
with
```
nodes
```
and
```
connectors
```
Module injection with
```
<Inject services={[...]} />
```
Next.js and Preact usage notes

📄 阅读：references/getting-started.md

阅读时机：

首次设置Diagram组件
安装包、CSS导入和主题配置
创建最小化的
```
DiagramComponent
```
理解
```
Inject
```
模块系统
Next.js或Preact集成

涵盖内容：

npm安装与依赖
Vite/CRA项目设置
CSS主题导入路径
包含
```
nodes
```
和
```
connectors
```
的基础
```
DiagramComponent
```
使用
```
<Inject services={[...]} />
```
进行模块注入
Next.js和Preact使用说明

Nodes

节点

📄 Read: references/nodes.md

When to read:

Adding, positioning, and sizing nodes
Customizing node appearance (fill, stroke, shadow)
Working with node shapes (Flow, Basic, Path, Image, HTML)
Handling node events (click, drag, resize)
Expanding/collapsing nodes at runtime
Setting default node properties via
```
getNodeDefaults
```

Covers:

Creating nodes via
```
nodes
```
collection
```
offsetX
```
/
```
offsetY
```
,
```
width
```
/
```
height
```
positioning
Adding/removing nodes at runtime (
```
diagram.add
```
,
```
diagram.remove
```
)
Style properties (fill, strokeColor, opacity, gradient)
```
getNodeDefaults
```
pattern for consistent styling
Node expand/collapse with
```
expandIcon
```
/
```
collapseIcon
```
Node interaction events

📄 阅读：references/nodes.md

阅读时机：

添加、定位和调整节点大小
自定义节点外观（填充、描边、阴影）
使用节点形状（流程、基础、路径、图片、HTML）
处理节点事件（点击、拖拽、调整大小）
在运行时展开/折叠节点
通过
```
getNodeDefaults
```
设置默认节点属性

涵盖内容：

通过
```
nodes
```
集合创建节点
```
offsetX
```
/
```
offsetY
```
、
```
width
```
/
```
height
```
定位
在运行时添加/删除节点（
```
diagram.add
```
、
```
diagram.remove
```
）
样式属性（填充、描边颜色、透明度、渐变）
```
getNodeDefaults
```
模式：实现一致的样式
使用
```
expandIcon
```
/
```
collapseIcon
```
实现节点展开/折叠
节点交互事件

Connectors

连接器

📄 Read: references/connectors.md

When to read:

Drawing lines/arrows between nodes or freestanding points
Choosing connector type (Straight, Orthogonal, Bezier)
Configuring connector segments and routing
Customizing decorator (arrow) shapes
Setting
```
sourceID
```
/
```
targetID
```
to link nodes
Setting
```
getConnectorDefaults
```
for consistent styling

Covers:

Connector types:
```
Straight
```
,
```
Orthogonal
```
,
```
Bezier
```
```
sourcePoint
```
/
```
targetPoint
```
for freestanding connectors
```
sourceID
```
/
```
targetID
```
for node-to-node connections
Multiple segment configuration
Bezier control points and segment edit orientation
Arrow/decorator customization
Connector events and interaction
```
getConnectorDefaults
```
pattern

📄 阅读：references/connectors.md

阅读时机：

在节点或独立点之间绘制线条/箭头
选择连接器类型（直线、正交、贝塞尔曲线）
配置连接器段和路由
自定义装饰器（箭头）形状
设置
```
sourceID
```
/
```
targetID
```
连接节点
使用
```
getConnectorDefaults
```
实现一致的样式

涵盖内容：

连接器类型：
```
Straight
```
、
```
Orthogonal
```
、
```
Bezier
```
独立连接器的
```
sourcePoint
```
/
```
targetPoint
```
节点间连接的
```
sourceID
```
/
```
targetID
```
多段配置
贝塞尔曲线控制点和段编辑方向
箭头/装饰器自定义
连接器事件与交互
```
getConnectorDefaults
```
模式

Labels and Annotations

标签与注释

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

When to read:

Adding text labels to nodes or connectors
Styling annotation text (font, color, bold, alignment)
Making labels draggable or editable
Positioning labels relative to nodes/connectors
Handling label-specific events

Covers:

```
annotations
```
array on nodes and connectors
Label
```
content
```
,
```
style
```
,
```
offset
```
,
```
alignment
```
Node labels vs. connector labels
Label interaction (edit on double-click, drag)
Label appearance (background, border, padding)
Label events

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

阅读时机：

为节点或连接器添加文本标签
注释文本样式设置（字体、颜色、加粗、对齐）
使标签可拖拽或编辑
相对于节点/连接器定位标签
处理标签特定事件

涵盖内容：

节点和连接器上的
```
annotations
```
数组
标签的
```
content
```
、
```
style
```
、
```
offset
```
、
```
alignment
```
节点标签与连接器标签的区别
标签交互（双击编辑、拖拽）
标签外观（背景、边框、内边距）
标签事件

Ports

端口

📄 Read: references/ports.md

When to read:

Creating named connection points on nodes
Controlling where connectors attach to a node
Styling and positioning ports
Restricting connector connections to specific ports
Handling port interaction events

Covers:

Port types and
```
ports
```
array on nodes
Port positioning (
```
offset
```
,
```
alignment
```
)
Port appearance (shape, fill, stroke)
Connecting connectors to specific ports via
```
sourcePortID
```
/
```
targetPortID
```
Port interaction and visibility options
Port events

📄 阅读：references/ports.md

阅读时机：

在节点上创建命名连接点
控制连接器与节点的附着位置
样式设置与端口定位
限制连接器仅连接到特定端口
处理端口交互事件

涵盖内容：

端口类型和节点上的
```
ports
```
数组
端口定位（
```
offset
```
、
```
alignment
```
）
端口外观（形状、填充、描边）
通过
```
sourcePortID
```
/
```
targetPortID
```
将连接器连接到特定端口
端口交互与可见性选项
端口事件

Shapes and Styles

形状与样式

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

When to read:

Choosing the right shape type (Flow, Basic, Path, Image, HTML, Native SVG)
Applying fill colors, gradients, and stroke styles
Customizing node appearance with CSS or themes
Understanding shape property structure

Covers:

```
shape.type
```
options:
```
Flow
```
,
```
Basic
```
,
```
Path
```
,
```
Image
```
,
```
HTML
```
,
```
Native
```
Flowchart shape values (Terminator, Process, Decision, etc.)
Basic shape values (Rectangle, Ellipse, Diamond, etc.)

Style properties:

fill

strokeColor

strokeWidth

strokeDashArray

opacity

Linear and radial gradients
Shadow effect
CSS class-based styling

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

阅读时机：

选择合适的形状类型（流程、基础、路径、图片、HTML、原生SVG）
应用填充颜色、渐变和描边样式
使用CSS或主题自定义节点外观
理解形状属性结构

涵盖内容：

```
shape.type
```
选项：
```
Flow
```
、
```
Basic
```
、
```
Path
```
、
```
Image
```
、
```
HTML
```
、
```
Native
```
流程图形状值（终止符、流程、决策等）
基础形状值（矩形、椭圆、菱形等）

样式属性：

fill

、

strokeColor

、

strokeWidth

、

strokeDashArray

、

opacity

线性和径向渐变
阴影效果
基于CSS类的样式

BPMN Diagrams

BPMN图表

📄 Read: references/bpmn-diagrams.md

When to read:

Modeling business process flows using BPMN notation
Using BPMN-specific shapes (activities, events, gateways)
Drawing sequence flows, message flows, associations
Adding data objects, data sources, text annotations, and groups

Covers:

```
BpmnDiagrams
```
module injection
BPMN shape type:
```
shape.type = 'Bpmn'
```
Activities: Task types, Subprocess, Expanded Subprocess
Events: Start, End, Intermediate events and their triggers
Gateways: Exclusive, Parallel, Inclusive, Complex
Flows: Sequence, Message, Association
Data objects and data sources
BPMN groups and text annotations

📄 阅读：references/bpmn-diagrams.md

阅读时机：

使用BPMN符号建模业务流程
使用BPMN特定形状（活动、事件、网关）
绘制序列流、消息流、关联
添加数据对象、数据源、文本注释和组

涵盖内容：

```
BpmnDiagrams
```
模块注入
BPMN形状类型：
```
shape.type = 'Bpmn'
```
活动：任务类型、子流程、展开的子流程
事件：开始、结束、中间事件及其触发器
网关：排他、并行、包容、复杂
流：序列、消息、关联
数据对象和数据源
BPMN组和文本注释

UML Diagrams

UML图表

📄 Read: references/uml-diagrams.md

When to read:

Building UML class diagrams with attributes and methods
Modeling relationships (association, generalization, dependency)
Creating UML sequence diagrams with lifelines and messages
Working with classifiers (class, interface, enumeration, collaboration)

Covers:

UML class diagram shapes (
```
shape.type = 'UmlClassifier'
```
)
Classifier types: Class, Interface, Enumeration, Collaboration
Attributes, operations, and members syntax
UML relationship connector types
UML sequence diagram (
```
shape.type = 'UmlActivity'
```
)
Lifelines, messages, and fragments

📄 阅读：references/uml-diagrams.md

阅读时机：

构建包含属性和方法的UML类图
建模关系（关联、泛化、依赖）
创建包含生命线和消息的UML序列图
使用分类器（类、接口、枚举、协作）

涵盖内容：

UML类图形状（
```
shape.type = 'UmlClassifier'
```
）
分类器类型：类、接口、枚举、协作
属性、操作和成员语法
UML关系连接器类型
UML序列图（
```
shape.type = 'UmlActivity'
```
）
生命线、消息和片段

Layouts

布局

📄 Read: references/layouts.md

When to read:

Automatically arranging nodes in a tree, hierarchy, or radial pattern
Creating org charts driven by parent-child data
Building mind maps from data sources
Configuring flowchart layouts with decision/process shapes
Customizing layout spacing, orientation, and alignment

Covers:

```
HierarchicalTree
```
— top-down/left-right tree layouts

OrganizationalChart

— classic org chart with

getNodeDefaults

getConnectorDefaults

```
MindMap
```
— branching mind map layout
```
RadialTree
```
— circular radial layout
```
Flowchart
```
layout (automatic flow arrangement)
```
ComplexHierarchicalTree
```
for multi-parent hierarchies

layout

property:

type

orientation

margin

horizontalSpacing

verticalSpacing

```
LayoutAnimation
```
module
Layout events

📄 阅读：references/layouts.md

阅读时机：

自动以树形、分层或放射状排列节点
由父子数据驱动创建组织结构图
从数据源构建思维导图
配置包含决策/流程形状的流程图布局
自定义布局间距、方向和对齐方式

涵盖内容：

```
HierarchicalTree
```
— 自上而下/自左向右的树形布局

OrganizationalChart

— 经典组织结构图，搭配

getNodeDefaults

getConnectorDefaults

```
MindMap
```
— 分支式思维导图布局
```
RadialTree
```
— 圆形放射状布局
```
Flowchart
```
布局（自动流程排列）
```
ComplexHierarchicalTree
```
：适用于多父级分层结构

layout

属性：

type

、

orientation

、

margin

、

horizontalSpacing

、

verticalSpacing

```
LayoutAnimation
```
模块
布局事件

Swimlanes

泳道

📄 Read: references/swimlanes.md

When to read:

Creating multi-lane process diagrams
Adding phases to represent timeline or stages
Configuring swimlane headers and orientation
Placing child nodes inside lanes
Using swimlane shapes from the symbol palette

Covers:

Swimlane
```
shape.type = 'SwimLane'
```
Lanes and phases configuration
Header text, size, and orientation
Child nodes inside lanes
Swimlane palette integration
Swimlane interaction (add/remove lanes)

📄 阅读：references/swimlanes.md

阅读时机：

创建多泳道流程图表
添加阶段以表示时间线或步骤
配置泳道标题和方向
在泳道内放置子节点
使用符号面板中的泳道形状

涵盖内容：

泳道
```
shape.type = 'SwimLane'
```
泳道和阶段配置
标题文本、大小和方向
泳道内的子节点
泳道面板集成
泳道交互（添加/删除泳道）

Groups and Containers

组与容器

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

When to read:

Grouping multiple nodes for collective movement/selection
Adding/removing children from groups at runtime
Using container nodes to visually bound child nodes
Configuring padding, fit-to-children behavior

Covers:

Group node
```
shape.type = 'Group'
```
and
```
children
```
array
Grouping/ungrouping nodes via diagram methods
Adding children at runtime
Container node configuration
Padding and auto-fit behavior for containers

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

阅读时机：

对多个节点进行分组，实现集体移动/选择
在运行时向组中添加/移除子节点
使用容器节点可视化绑定子节点
配置内边距、自适应子节点行为

涵盖内容：

组节点
```
shape.type = 'Group'
```
和
```
children
```
数组
通过图表方法对节点进行分组/取消分组
在运行时添加子节点
容器节点配置
容器的内边距和自适应行为

Symbol Palette

符号面板

📄 Read: references/symbol-palette.md

When to read:

Adding a drag-and-drop shape sidebar to your diagram app
Defining custom symbol sets (palettes)
Customizing palette icon size, search behavior, and accordion
Handling
```
symbolDragEnter
```
/
```
symbolDrop
```
events

Covers:

```
SymbolPaletteComponent
```
setup alongside
```
DiagramComponent
```
Defining
```
palettes
```
with symbol arrays
```
getSymbolInfo
```
for display customization
Palette accordion: expanding/collapsing groups
Search functionality
Symbol preview size configuration
Palette events

📄 阅读：references/symbol-palette.md

阅读时机：

为图表应用添加可拖拽形状的侧边栏
定义自定义符号集（面板）
自定义面板图标大小、搜索行为和折叠面板
处理
```
symbolDragEnter
```
/
```
symbolDrop
```
事件

涵盖内容：

与
```
DiagramComponent
```
一起设置
```
SymbolPaletteComponent
```
使用符号数组定义
```
palettes
```
```
getSymbolInfo
```
：自定义显示
面板折叠面板：展开/折叠组
搜索功能
符号预览大小配置
面板事件

Data Binding

数据绑定

📄 Read: references/data-binding.md

When to read:

Generating diagrams automatically from JSON or remote data
Mapping
```
id
```
and
```
parentId
```
fields for hierarchy
Using
```
DataManager
```
for remote or filtered data
Customizing node appearance based on data properties (
```
setNodeTemplate
```
)
Connecting to a PostgreSQL or external data source

Covers:

```
dataSourceSettings
```
property
```
id
```
,
```
parentId
```
field mapping
```
DataManager
```
with local arrays or remote URLs
```
getNodeDefaults
```
and
```
setNodeTemplate
```
for data-driven styling
PostgreSQL data source integration
Rendering org charts from flat JSON data

📄 阅读：references/data-binding.md

阅读时机：

从JSON或远程数据源自动生成图表
映射
```
id
```
和
```
parentId
```
字段以实现分层结构
使用
```
DataManager
```
处理远程或过滤后的数据
根据数据属性自定义节点外观（
```
setNodeTemplate
```
）
连接到PostgreSQL或外部数据源

涵盖内容：

```
dataSourceSettings
```
属性
```
id
```
、
```
parentId
```
字段映射
```
DataManager
```
：处理本地数组或远程URL
```
getNodeDefaults
```
和
```
setNodeTemplate
```
：实现数据驱动的样式
PostgreSQL数据源集成
从扁平JSON数据渲染组织结构图

Interaction and Tools

交互与工具

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

When to read:

Enabling/disabling node and connector interactions (drag, resize, select)
Switching diagram tool modes (pointer, draw, pan)
Configuring diagram constraints
Adding custom keyboard commands or toolbar actions
Implementing undo/redo
Setting up context menus or user handles

Covers:

DiagramConstraints

NodeConstraints

ConnectorConstraints

```
tool
```
property:
```
DiagramTools.Default
```
,
```
ZoomPan
```
,
```
DrawOnce
```
Selection, drag, resize, rotate interactions
```
commands
```
for keyboard shortcuts
Undo/Redo (
```
UndoRedo
```
module)
Context menu (
```
DiagramContextMenu
```
module)
User handles for custom action buttons on nodes
```
Snapping
```
module and snap settings

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

阅读时机：

启用/禁用节点和连接器的交互（拖拽、调整大小、选择）
切换图表工具模式（指针、绘制、平移）
配置图表约束
添加自定义键盘命令或工具栏操作
实现撤销/重做
设置上下文菜单或用户操作手柄

涵盖内容：

DiagramConstraints

、

NodeConstraints

、

ConnectorConstraints

```
tool
```
属性：
```
DiagramTools.Default
```
、
```
ZoomPan
```
、
```
DrawOnce
```
选择、拖拽、调整大小、旋转交互
```
commands
```
：键盘快捷键
撤销/重做（
```
UndoRedo
```
模块）
上下文菜单（
```
DiagramContextMenu
```
模块）
用户操作手柄：节点上的自定义操作按钮
```
Snapping
```
模块和对齐设置

Serialization and Export

序列化与导出

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

When to read:

Saving and restoring diagram state as JSON
Exporting the diagram as PNG, JPEG, or SVG
Printing diagram content
Importing Visio (.vsdx) files
Migrating from EJ1 diagram format

Covers:

diagram.saveDiagram()

and

diagram.loadDiagram(json)

```
PrintAndExport
```
module injection
Export settings: format, region, margin, background
Print dialog and options
Visio file import (
```
visio.md
```
)
EJ1 serialization compatibility (
```
Ej1Serialization
```
module)

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

阅读时机：

将图表状态保存为JSON并恢复
将图表导出为PNG、JPEG或SVG
打印图表内容
导入Visio（.vsdx）文件
从EJ1图表格式迁移

涵盖内容：

diagram.saveDiagram()

和

diagram.loadDiagram(json)

```
PrintAndExport
```
模块注入
导出设置：格式、区域、边距、背景
打印对话框和选项
Visio文件导入（
```
visio.md
```
）
EJ1序列化兼容性（
```
Ej1Serialization
```
模块）

Diagram Settings

图表设置

📄 Read: references/diagram-settings.md

When to read:

Managing diagram layers (visibility, locking, ordering)
Enabling virtualization for performance with large diagrams
Configuring grid lines, snapping, and rulers
Setting page size, orientation, and margins
Configuring scroll behavior and limits
Adding tooltips to diagram elements
Using the Overview component for minimap navigation
Enabling localization or RTL support
Understanding accessibility features

Covers:

Layers: add, lock, set visibility, active layer
```
Virtualization
```
module for large diagrams
Grid lines: dots, lines, snap settings
Ruler configuration
```
scrollSettings
```
:
```
scrollLimit
```
,
```
minZoom
```
,
```
maxZoom
```
```
pageSettings
```
: size, orientation, background, multiplePage
Tooltip on nodes and connectors
```
OverviewComponent
```
minimap setup
Localization and RTL
ARIA and keyboard accessibility

📄 阅读：references/diagram-settings.md

阅读时机：

管理图表图层（可见性、锁定、排序）
启用虚拟化以提升大型图表的性能
配置网格线、对齐和标尺
设置页面大小、方向和边距
配置滚动行为和限制
为图表元素添加工具提示
使用Overview组件实现小地图导航
启用本地化或RTL支持
理解可访问性功能

涵盖内容：

图层：添加、锁定、设置可见性、活动图层
```
Virtualization
```
模块：适用于大型图表
网格线：点、线、对齐设置
标尺配置
```
scrollSettings
```
：
```
scrollLimit
```
、
```
minZoom
```
、
```
maxZoom
```
```
pageSettings
```
：大小、方向、背景、多页
节点和连接器的工具提示
```
OverviewComponent
```
小地图设置
本地化和RTL
ARIA和键盘可访问性

Quick Start Example

快速入门示例

Minimal Flowchart

最小化流程图

tsx

import { DiagramComponent, NodeModel, ConnectorModel, Inject, UndoRedo } from '@syncfusion/ej2-react-diagrams';

const nodes: NodeModel[] = [
  { id: 'start', offsetX: 300, offsetY: 80, width: 140, height: 50,
    shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'Start' }] },
  { id: 'process', offsetX: 300, offsetY: 180, width: 140, height: 50,
    shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process' }] },
  { id: 'end', offsetX: 300, offsetY: 290, width: 140, height: 50,
    shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'End' }] },
];
const connectors: ConnectorModel[] = [
  { id: 'c1', sourceID: 'start', targetID: 'process' },
  { id: 'c2', sourceID: 'process', targetID: 'end' },
];

export default function App() {
  return (
    <DiagramComponent id="diagram" width={'100%'} height={'500px'}
      nodes={nodes} connectors={connectors}
      getConnectorDefaults={(obj) => { obj.type = 'Orthogonal'; return obj; }}>
      <Inject services={[UndoRedo]} />
    </DiagramComponent>
  );
}

CSS import:

@import '@syncfusion/ej2-react-diagrams/styles/material.css';

and peer CSS for

ej2-base

ej2-popups

ej2-splitbuttons

ej2-navigations

tsx

import { DiagramComponent, NodeModel, ConnectorModel, Inject, UndoRedo } from '@syncfusion/ej2-react-diagrams';

const nodes: NodeModel[] = [
  { id: 'start', offsetX: 300, offsetY: 80, width: 140, height: 50,
    shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'Start' }] },
  { id: 'process', offsetX: 300, offsetY: 180, width: 140, height: 50,
    shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process' }] },
  { id: 'end', offsetX: 300, offsetY: 290, width: 140, height: 50,
    shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'End' }] },
];
const connectors: ConnectorModel[] = [
  { id: 'c1', sourceID: 'start', targetID: 'process' },
  { id: 'c2', sourceID: 'process', targetID: 'end' },
];

export default function App() {
  return (
    <DiagramComponent id="diagram" width={'100%'} height={'500px'}
      nodes={nodes} connectors={connectors}
      getConnectorDefaults={(obj) => { obj.type = 'Orthogonal'; return obj; }}>
      <Inject services={[UndoRedo]} />
    </DiagramComponent>
  );
}

CSS导入：

@import '@syncfusion/ej2-react-diagrams/styles/material.css';

以及

ej2-base

、

ej2-popups

、

ej2-splitbuttons

、

ej2-navigations

的依赖CSS。

Common Patterns

常见模式

Pattern 1: Org Chart from Data Source

—

tsx

import { DiagramComponent, HierarchicalTree, DataBinding, Inject } from '@syncfusion/ej2-react-diagrams';
import { DataManager } from '@syncfusion/ej2-data';

const data = [
  { Name: 'CEO' },
  { Name: 'CTO', ReportingPerson: 'CEO' },
  { Name: 'Dev Lead', ReportingPerson: 'CTO' },
];

export default function App() {
  return (
    <DiagramComponent id="diagram" width={'100%'} height={'500px'}
      dataSourceSettings={{ id: 'Name', parentId: 'ReportingPerson', dataManager: new DataManager(data) }}
      layout={{ type: 'OrganizationalChart' }}
      getNodeDefaults={(node) => { node.width = 120; node.height = 40; return node; }}
      getConnectorDefaults={(obj) => { obj.type = 'Orthogonal'; return obj; }}>
      <Inject services={[DataBinding, HierarchicalTree]} />
    </DiagramComponent>
  );
}

###模式1：从数据源生成组织结构图

tsx

import { DiagramComponent, HierarchicalTree, DataBinding, Inject } from '@syncfusion/ej2-react-diagrams';
import { DataManager } from '@syncfusion/ej2-data';

const data = [
  { Name: 'CEO' },
  { Name: 'CTO', ReportingPerson: 'CEO' },
  { Name: 'Dev Lead', ReportingPerson: 'CTO' },
];

export default function App() {
  return (
    <DiagramComponent id="diagram" width={'100%'} height={'500px'}
      dataSourceSettings={{ id: 'Name', parentId: 'ReportingPerson', dataManager: new DataManager(data) }}
      layout={{ type: 'OrganizationalChart' }}
      getNodeDefaults={(node) => { node.width = 120; node.height = 40; return node; }}
      getConnectorDefaults={(obj) => { obj.type = 'Orthogonal'; return obj; }}>
      <Inject services={[DataBinding, HierarchicalTree]} />
    </DiagramComponent>
  );
}

###模式2：保存与加载图表状态

使用

diagramInstance.saveDiagram()

序列化为JSON字符串；使用

diagramInstance.loadDiagram(json)

恢复状态。注入

UndoRedo

以支持历史记录功能。完整示例请查看references/serialization-and-export.md。

###模式3：带符号面板的图表

在

DiagramComponent

旁边渲染

SymbolPaletteComponent

。使用形状数组定义面板，设置

symbolHeight

symbolWidth

，用户即可将形状拖拽到画布上。完整示例请查看references/symbol-palette.md。

Pattern 2: Save and Load Diagram State

模块注入参考

Use

diagramInstance.saveDiagram()

to serialize to JSON string;

diagramInstance.loadDiagram(json)

to restore. Inject

UndoRedo

for history support. For full examples see references/serialization-and-export.md.

仅注入图表所需的模块：

<Inject services={[HierarchicalTree, DataBinding, UndoRedo]} />

模块	用途
`HierarchicalTree`	树形和组织结构图布局
`MindMap`	思维导图布局
`RadialTree`	放射状/圆形布局
`ComplexHierarchicalTree`	多父级分层结构
`DataBinding`	数据源集成
`UndoRedo`	撤销/重做历史记录
`Snapping`	网格对齐
`PrintAndExport`	导出与打印
`BpmnDiagrams`	BPMN形状
`LayoutAnimation`	动画布局
`DiagramContextMenu`	右键上下文菜单
`ConnectorBridging`	连接器交叉桥接
`ConnectorEditing`	编辑连接器段
`Ej1Serialization`	加载EJ1图表JSON

Pattern 3: Diagram with Symbol Palette

关键属性

Render

SymbolPaletteComponent

alongside

DiagramComponent

. Define palettes with shape arrays, set

symbolHeight

symbolWidth

, and users can drag shapes onto the canvas. For full examples see references/symbol-palette.md.

属性	类型	描述
`nodes`	`NodeModel[]`	节点定义数组
`connectors`	`ConnectorModel[]`	连接器定义数组
`layout`	`LayoutModel`	自动布局配置
`dataSourceSettings`	`DataSourceModel`	自动生成图表的数据源设置
`getNodeDefaults`	`(node) => NodeModel`	所有节点的默认属性
`getConnectorDefaults`	`(obj) => ConnectorModel`	所有连接器的默认属性
`setNodeTemplate`	`(node) => DiagramElement`	节点的自定义模板渲染
`tool`	`DiagramTools`	活动交互工具模式
`snapSettings`	`SnapSettingsModel`	网格与对齐配置
`scrollSettings`	`ScrollSettingsModel`	滚动限制与缩放范围
`pageSettings`	`PageSettingsModel`	页面大小、方向、背景
`constraints`	`DiagramConstraints`	启用/禁用图表级交互
`width`	`string`	图表画布宽度（例如： `'100%'` ）
`height`	`string`	图表画布高度（例如： `'600px'` ）

Module Injection Reference

Module	Purpose
`HierarchicalTree`	Tree and org chart layouts
`MindMap`	Mind map layout
`RadialTree`	Radial/circular layout
`ComplexHierarchicalTree`	Multi-parent hierarchies
`DataBinding`	Data source integration
`UndoRedo`	Undo/redo history
`Snapping`	Grid snapping
`PrintAndExport`	Export & print
`BpmnDiagrams`	BPMN shapes
`LayoutAnimation`	Animated layouts
`DiagramContextMenu`	Right-click context menu
`ConnectorBridging`	Bridge overlapping connectors
`ConnectorEditing`	Edit connector segments
`Ej1Serialization`	Load EJ1 diagram JSON

Key Props

—

Prop	Type	Description
`nodes`	`NodeModel[]`	Array of node definitions
`connectors`	`ConnectorModel[]`	Array of connector definitions
`layout`	`LayoutModel`	Automatic layout configuration
`dataSourceSettings`	`DataSourceModel`	Data source for auto-generated diagrams
`getNodeDefaults`	`(node) => NodeModel`	Default properties for all nodes
`getConnectorDefaults`	`(obj) => ConnectorModel`	Default properties for all connectors
`setNodeTemplate`	`(node) => DiagramElement`	Custom template rendering for nodes
`tool`	`DiagramTools`	Active interaction tool mode
`snapSettings`	`SnapSettingsModel`	Grid and snap configuration
`scrollSettings`	`ScrollSettingsModel`	Scroll limits and zoom bounds
`pageSettings`	`PageSettingsModel`	Page size, orientation, background
`constraints`	`DiagramConstraints`	Enable/disable diagram-level interactions
`width`	`string`	Diagram canvas width (e.g., `'100%'` )
`height`	`string`	Diagram canvas height (e.g., `'600px'` )

—

Related Components

—

Chart - Data-driven charts and graphs
Kanban - Kanban board visualization
Data Grid - Tabular data display

—

syncfusion-react-diagram

Original

Translation

Syncfusion React Diagram

Syncfusion React Diagram

Table of Contents

目录

When to Use This Skill

何时使用该技能

Important: API Verification Required

重要提示：需验证API

Component Overview

组件概述

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

Nodes

节点

Connectors

连接器

Labels and Annotations

标签与注释

Ports

端口

Shapes and Styles

形状与样式

BPMN Diagrams

BPMN图表

UML Diagrams

UML图表

Layouts

布局

Swimlanes

泳道

Groups and Containers

组与容器

Symbol Palette

符号面板

Data Binding

数据绑定

Interaction and Tools

交互与工具

Serialization and Export

序列化与导出

Diagram Settings

图表设置

Quick Start Example

快速入门示例

Minimal Flowchart

最小化流程图

Common Patterns

常见模式

Pattern 1: Org Chart from Data Source

Pattern 2: Save and Load Diagram State

模块注入参考

Pattern 3: Diagram with Symbol Palette

关键属性

Module Injection Reference

相关组件

Key Props

Related Components