Stately
PackagesGraph

xyflow

Converter for xyflow (React Flow / Svelte Flow) node and edge objects. Works with VisualGraph since xyflow expects position and size.

Converter for xyflow (React Flow / Svelte Flow) node and edge objects. Works with VisualGraph since xyflow expects position and size.

Resources

API

import { toXYFlow, fromXYFlow, xyflowConverter } from '@statelyai/graph/xyflow';
import { createVisualGraph } from '@statelyai/graph';

const graph = createVisualGraph({
  nodes: [
    { id: 'a', x: 0, y: 0, width: 100, height: 50 },
    { id: 'b', x: 200, y: 100, width: 100, height: 50 },
  ],
  edges: [{ id: 'e0', sourceId: 'a', targetId: 'b' }],
});

const flow = toXYFlow(graph);
// { nodes: [{ id: 'a', position: {x:0,y:0}, ... }], edges: [{ id: 'e0', source: 'a', target: 'b' }] }

const roundTripped = fromXYFlow(flow);

Field mapping

Graphxyflow
node.x, node.ynode.position
node.width, node.heightnode.width, node.height (reads measured / initialWidth on import)
node.shapenode.type
node.parentIdnode.parentId
edge.sourceId / edge.targetIdedge.source / edge.target
edge.sourcePort / edge.targetPortedge.sourceHandle / edge.targetHandle
edge.labeledge.data.label

xyflowConverter

Pre-built VisualGraphFormatConverter<XYFlow>:

const flow = xyflowConverter.to(graph);
const roundTripped = xyflowConverter.from(flow);

Types

TypeDescription
XYFlow{ nodes: XYFlowNode[], edges: XYFlowEdge[] }
XYFlowNodeRe-exported NodeBase from @xyflow/system
XYFlowEdgeRe-exported EdgeBase from @xyflow/system

Note: fromXYFlow always produces a directed graph with direction: 'down'.

TGF

Previous Page

XState VS Code extension

Next Page

On this page

ResourcesAPIField mappingxyflowConverterTypes