syncfusion-react-diagram

Create and customize visual diagrams in React using Syncfusion Diagrams. Trigger for requests involving React component setup, nodes and connectors, flowcharts, org charts, process diagrams, BPMN or UML models, ER diagrams, layout algorithms, swimlanes, symbol palettes, and interactive diagram visualization features.

Ir a la instalación

Repositorio: syncfusion/react-ui-components-skills
Última actividad en el origen: 28 de julio de 2026 a las 05:07
Idioma detectado de SKILL.md: inglés
Estrellas: 3
Forks: 8

Opciones de instalación

De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.

Revisa los archivos de origen

Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.

Volver a la búsqueda Volver a la instalación

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>
  );
}

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>
  );
}

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
`ErDiagrams`	ER diagram shapes and relationships
`LayoutAnimation`	Animated layouts
`DiagramContextMenu`	Right-click context menu
`ConnectorBridging`	Bridge overlapping connectors
`ConnectorEditing`	Edit connector segments
`Ej1Serialization`	Load EJ1 diagram JSON

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'`)