Add Vue Flow graph visualizer

graphfx-ui/README.md

@@ -0,0 +1,55 @@
+# graphfx-ui
+
+Vue 3 visualizer for serialized GraphFX image-processing graphs.
+
+## What it does
+
+- Renders `graph.serialize()` output with [Vue Flow](https://vueflow.dev/).
+- Builds edges from GraphFX input references (`input.output` points at `${sourceNodeId}-${outputName}`).
+- Uses Dagre automatic layout when serialized nodes do not have `x/y` coordinates, which is the common case for graphs created in code.
+- Can optionally preserve saved coordinates when every node has `x/y`.
+- Shows inputs, outputs, constant input values, edge labels, and diagnostics for missing outputs.
+
+## Development
+
+```bash
+cd graphfx-ui
+npm install
+npm run dev
+```
+
+## Production build
+
+```bash
+cd graphfx-ui
+npm run build
+```
+
+## Input format
+
+Paste the array returned by GraphFX `Graph.serialize()`:
+
+```ts
+const json = JSON.stringify(graph.serialize(), null, 2)
+```
+
+Each item should look like this:
+
+```json
+{
+  "node": {
+    "id": "resize-preview",
+    "name": "Resize",
+    "options": {
+      "in": {
+        "image": { "label": "Image", "value": null, "output": "webcam-image" }
+      },
+      "out": {
+        "image": { "label": "Preview image" }
+      }
+    }
+  }
+}
+```
+
+Coordinates are optional. If omitted, `graphfx-ui` calculates a readable layout automatically.