Build a workflow editor in Vue 3 — the whole thing

Originally published on the Grafloria engineering blog.

Vue gets fewer diagram tutorials than React, and the ones that exist usually stop at "nodes appear on screen". This one goes where real workflow editors go: custom node cards, ports with connection rules, ⌘Z, auto-layout, and a save format — in Vue idiom the whole way. Everything below is running code; it's the same API our Vue demo gallery exercises in CI.

1 — A canvas with taste

import { GrafloriaFlow } from '@grafloria/vue';

const nodes = [