Skip to content
Latest

Flow version diffs and canvas performance

Compare any two flow versions side-by-side with added, removed, and changed items color-coded. Canvas rendering is also faster for flows with 100+ nodes.

  • NewFlow version diff view

    Compare any two versions side-by-side, node by node, edge by edge.

  • ImprovedFaster canvas rendering

    Flows with 100+ nodes now render in under 120ms (p50).

Every published flow already carried a full version history. Now you can visually diff any two versions side-by-side. Added, removed, and modified nodes are color-coded; edge changes show up inline.

How it works

Open a flow, hit History in the toolbar, then click Compare on any two versions. The canvas splits in two. Added nodes glow green, removed ones red, and edges that changed endpoints show the old route dimmed behind the new one.

Under the hood

Diffs are computed client-side against a per-version manifest hash. No server round-trip; the comparison runs in the browser against the two serialized versions.

const diff = diffFlows(leftVersion.manifest, rightVersion.manifest);
// → { addedNodes, removedNodes, changedNodes, addedEdges, ... }

Faster canvas

Large flows (100+ nodes) previously re-rendered the entire viewport on every node drag. We memoized per-node subtrees and switched to requestAnimationFrame-driven batching. The same canvas now paints in under 120 ms at the 50th percentile, down from ~340 ms.