React components for @mindfusion/diagramming
A diagram library that enables you to build any type of graph, flowchart, tree, org chart, diagram, process chart, database schema and much more. Includes a huge variety of predefined node and link shapes, automatic layout algorithms, many import and export options.
This package contains functional component React wrappers for MindFusion JS Diagram controls. For class component wrappers check the @mindfusion/diagramming-react-cc npm package.
Both packages are upgraded to support React 18.
Installing
For the latest stable version:
npm install @mindfusion/diagramming-react
How To Use
This is how you use the functional component wrappers:
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 the ZoomControl. To obtain a reference to the underlying control, use the find method of the ref.
Documentation
Additional Information
Learn more about JS Diagram from the official product page. Stay in touch with MindFusion about our latest product announcements, tutorials and programming guidelines via Twitter or our company blog.
Technical Support
Licensing
The end-user license agreement for MindFusion packages is here.