Multi Flow

In complex management systems, you may need to display multiple independent flow charts on a single page — for example, a source process on the left and a transformed target process on the right.

Flow is designed with an isolated architecture. Each component instance operates within its own coordinate system, maintains its own selection state, and manages its own undo/redo stacks and plugin ecosystem.

Multi-Instance Interaction Demo

The following demo features two completely distinct Flow instances. You can move nodes from the "Source" board to the "Target" board by selecting them and clicking the transfer button in the middle.

Source Flow

Source A

Source B

Target Flow

Target Root

Concurrent Instances

Key Concepts

1. State Isolation: Viewport transforms, selection states, and history stacks (undo/redo) are strictly local to each instance. You don't need to worry about cross-contamination.
2. Parent-Driven Sync: Multi-instance communication is best handled through parent component state (as shown in this demo) or a global store like Pinia.
3. Performance Scalability: While multiple instances can be active, each adds its own event listeners and rendering overhead. For most desktop browsers, showing 3-5 concurrent flows (with <100 nodes each) is highly performant.