How To Save And Export The React Diagram

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:

• Export
• Print

Demo: https://ej2.syncfusion.com/react/demos/#/fluent2/diagram/grouping-and-ordering

Project prerequisites

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.

How to run this application

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