Save & Restore

In diagram editors, it is crucial to persist the graph's state (Nodes, Edges, and Viewport transformations) so users can resume their work later. Flow provides convenient instance methods to extract and rehydrate the entire board state.

Basic Persistence Demo

Modify the graph below, then try the "Save" and "Restore" buttons. We use browser localStorage to simulate a persistent data layer.

Node 1

Node 2

State Persist & Load

Core Principles

There are two primary ways to capture the state of your diagram for persistence:

1. Pull from Engine Instance: This is the most accurate method. Access the FlowInstance (via ref) and call methods like getNodes() and getEdges(). This retrieves the current internal state of all entities, including user-driven position changes.
2. External Reactive State: If you are using a global state manager (like Pinia), you can synchronize your nodes and edges arrays whenever a change event (like @nodes-drag-end) is emitted by the component.

Instance Methods Reference

Method	Return Type	Description
getNodes()	Node[]	Returns a deep snapshot of all nodes currently in the engine.
getEdges()	Edge[]	Returns a deep snapshot of all edges currently in the engine.
exportJson()	string	[(Export Plugin required)] Wraps internal graph data into a serialized string for easy network transfer.