Export & Import

This section covers getting a diagram out of your app: as JSON you can load back later, or as an image you can share. JSON round-tripping ships with the free @joint/react; image export is part of JointJS+.

JSON

Persist graph state with useGraph().exportToJSON() and importFromJSON() in @joint/react, including how model defaults keep the JSON minimal.

Image Export

Export a diagram to PNG, JPEG, WebP, or SVG with useImageExport() in @joint/react-plus. Download a file or read a data URL, drive the format and region from state, and track export status.

Other formats

JointJS+ ships more import and export plugins. They operate on the native graph and paper instances behind your components, which you can reach as described in JointJS interop:

• BPMN: import and export Business Process Model and Notation diagrams. Guide, API.
• Visio: import and export Microsoft Visio files. Guide, API.
• GEXF: import graphs stored in the GEXF XML format. Guide, API.
• Print: prepare the paper for printing with the browser print wizard. Guide, API.
• Adjacency list: convert the graph to an adjacency list with graphUtils.toAdjacencyList. Guide, API.
• Construct a tree: build a diagram from a JSON tree with graphUtils.constructTree. Guide, API.