Undo / Redo

The Undo/Redo plugin enables session history for the workflow diagram. Users can step backwards and forwards through their editing actions without losing work.

This plugin is part of Overflow.

What it tracks

The history tracks node-related actions:

• Adding or removing nodes
• Moving nodes on the canvas
• Connecting or disconnecting nodes
• Editing node properties

Edge-only changes (moving edge labels) may not be included in the history depending on configuration.

Keyboard shortcuts

Action	Windows / Linux	macOS
Undo	Ctrl+Z	Cmd+Z
Redo	Ctrl+Shift+Z	Cmd+Shift+Z

Toolbar buttons for undo and redo are also available in the app bar.

Enabling the plugin

The plugin is registered in apps/frontend/src/app/features/plugins-core/index.ts. To enable it, ensure the import is present:

import '@/plugins/undo-redo/plugin-exports';

To disable it, remove the import. The app continues to work without undo/redo support.

Removing the plugin

Delete apps/frontend/src/app/plugins/undo-redo/ and remove its import from plugins-core/index.ts.

Vite will serve an empty stub in place of the deleted plugin. No errors, no broken app.

How it works

The plugin uses a snapshot-based approach. Before a user action begins (e.g. dragging a node), it captures the current state of nodes, edges, and layout direction. When the action completes, the snapshot is pushed onto the undo stack.

Key functions in use-undo-redo-store.ts:

• takeSnapshot() - captures the current diagram state and pushes it to the history
• startSnapshotWatching(name) - begins observing changes for a continuous action (e.g. node drag)
• processSnapshotWatching(name) - finalizes the observation and records the snapshot

The history stores up to 100 entries. Performing a new action clears the redo stack.

Provided by

overflow.dev - a React Flow UI library for building visual workflows, automations, and tools with production-grade components.

Full docs: overflow.dev/premium - Undo/Redo