A quick-start project that shows how to add the Vue Ribbon Component to the Vue application. Learn how to save the contents of the Diagram component as a JSON string or a file stream and load the diagram using the saved files. Also learn how to export the diagram component, in the form of a printed PDF or image formats like PNG, SVG, etc.
The React Diagram is a feature-rich component for visualizing, creating, and editing interactive diagrams. It supports creating flowcharts, organizational charts, mind maps, and BPMN charts through code or a visual interface. Grouping is used to cluster multiple nodes and connectors into a single element. A group acts like a container for its children.
Documentations:
Demo: https://ej2.syncfusion.com/react/demos/#/fluent2/diagram/grouping-and-ordering
Make sure that you have the compatible versions of Visual Studio Code, and NodeJS or a later version on your machine before starting to work on this project.
To run this application, follow these steps:
- Step 1:
Clone the repository.
git clone https://github.com/SyncfusionExamples/how-to-save-and-export-the-react-diagram- Step 2:
Open the application folder, install the dependencies and run the application.
cd how-to-save-and-export-the-react-diagram
npm install
npm start