用途
Syncfusion React Diagram 组件用于在 React 应用中构建丰富的交互式图表，包括流程图、组织架构图、BPMN 流程、UML 图、思维导图与网络图等。所有图表元素以 SVG 渲染，具备分辨率无关的清晰图形表现。
主要能力
组件围绕以下核心概念构建：
- 节点（Nodes）：画布上的图形形状，如矩形、圆形、流程形状及自定义形状。
- 连接线（Connectors）：连接节点或自由端点的线段与箭头。
- 标注（Annotations）：附加在节点或连接线上的文本标签。
- 端口（Ports）：节点上命名的连接点，用于精确锚定连接线。
- 布局（Layouts）：自动排列算法，包括层次树、组织架构图、思维导图、径向树、流程图等。
- 符号面板（Symbol Palette）：可拖拽形状符号的侧边栏。
- 模块系统：通过 Inject 指令按需启用功能模块，以控制打包体积。
组件还覆盖 BPMN 图（活动、事件、网关、流）、UML 类图与序列图、ER 实体关系图、泳道图、分组与容器、数据绑定、交互与工具、序列化与导出、图表设置等主题。
使用方式
技能以参考文档导航的形式组织，每个主题对应一份 references/*.md 文件，包括：getting-started.md（首次搭建、安装、CSS 主题导入、最小示例、Inject 模块系统、Next.js/Preact 集成）、nodes.md、connectors.md、labels-and-annotations.md、ports.md、shapes-and-styles.md、bpmn-diagrams.md、uml-diagrams.md、entity-relationship-diagrams.md、layouts.md、swimlanes.md、groups-and-containers.md、symbol-palette.md、data-binding.md、interaction-and-tools.md、serialization-and-export.md、diagram-settings.md。
快速开始示例展示了最小流程图写法：从 @syncfusion/ej2-react-diagrams 引入 DiagramComponent、NodeModel、ConnectorModel、Inject、UndoRedo；定义 nodes 与 connectors 数组；在 DiagramComponent 中传入 nodes、connectors，并通过 getConnectorDefaults 设置连接线类型；使用 <Inject services={[UndoRedo]} /> 注入模块；同时需要导入 @syncfusion/ej2-react-diagrams/styles/material.css 及 ej2-base、ej2-popups、ej2-splitbuttons、ej2-navigations 等 peer CSS。
常见模式包括：从数据源生成组织架构图（使用 dataSourceSettings、layout 为 OrganizationalChart，注入 DataBinding 与 HierarchicalTree）；保存与加载图表状态（saveDiagram() 序列化为 JSON 字符串，loadDiagram(json) 恢复）；以及与符号面板组合使用（同时渲染 SymbolPaletteComponent 和 DiagramComponent）。
重要提示：在生成代码示例前，务必先阅读 references/*.md 参考文件核对 API 类名、属性与签名，不要假设或推断类名。
适用场景
适用于需要构建流程图、决策树、工作流、组织架构图、BPMN 流程、UML 类图与序列图、思维导图、网络/实体图、泳道图，以及需要从符号面板拖拽形状、数据绑定自动生成图表结构、序列化与恢复图表状态、导出或打印图表内容为图片/SVG 等场景。
限制
上述介绍基于该技能条目所提供的资料。具体的收费、价格、平台支持版本或性能效果等信息，原资料暂未提供。