graphfx/graphfx-ui

graphfx-ui

Vue 3 visualizer for serialized GraphFX image-processing graphs.

What it does

• Renders graph.serialize() output with Vue Flow.
• 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

cd graphfx-ui
npm install
npm run dev

Production build

cd graphfx-ui
npm run build

Input format

Paste the array returned by GraphFX Graph.serialize():

const json = JSON.stringify(graph.serialize(), null, 2)

Each item should look like this:

{
  "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.