# 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.