React

Functional components

The DiagramView React component allows integrating the MindFusion.Diagramming API into React applications. It renders a Diagram instance assigned to "diagram" prop as its model.

At this time, the following properties can be set from JSX too: allowInplaceEdit, autoResize, backBrush, behavior, defaultShape, enabled, linkHeadShapeSize, linkShape, roundedLinks, routeLinks, showAnchors, showGrid, zoomFactor. All diagram events can be handled through JSX syntax as well:

JSX

const [diagram] = useState(new Diagramming.Diagram());
...
<DiagramView diagram={diagram} {...props}
    onDiagramChanged={(diagram, args) => onDiagramChanged(diagram, args)}
    onNodeCreated={(diagram, args) => onDiagramNodeCreated(diagram, args)} />

The DiagramView control exposes a forwardRef, that can be passed on to other controls, such as the Overview and ZoomControl. To obtain a reference to the underlying core controls, use the respective find method of the ref.

DiagramView can be installed from the @mindfusion/diagramming-react package on npm:

npm i @mindfusion/diagramming-react

Several React examples are included in JsDiagram's distribution. In order to run them, execute the following npm commands from command line in Samples/React folder:

npm install
npm start

Class components

Older class-component wrappers have been moved to the @mindfusion/diagramming-react-cc package. Using them looks like this:

JSX

this.state.diagram = new Diagramming.Diagram();
...
<DiagramView
    diagram={this.state.diagram}
    {...props}
    onNodeClicked={(diagram, args) => this.onDiagramNodeClicked(diagram, args)}
    onLinkCreating={(diagram, args) => this.onDiagramLinkCreating(diagram, args)}
    onDiagramChanged={diagram => this.onDiagramChanged(diagram)} />

Class components can be installed from the @mindfusion/diagramming-react-cc package on npm:

npm i @mindfusion/diagramming-react-cc