Workflow Editor

function FormNode({ data, selected }) {
  return (
    <Box
      sx={{
        border: selected ? '2px solid' : '1px solid',
        borderColor: selected ? 'primary.main' : 'grey.200',
        backgroundColor: selected ? 'primary.light' : 'white',
        borderRadius: '10px',
        p: 2,
        width: 180,
      }}
    >
      <Handle type="target" position={Position.Top} />
      <Stack direction="row" alignItems="center" gap={1}>
        <DescriptionIcon sx={{ fontSize: 16, color: 'primary.main' }} />
        <Typography variant="body2" fontWeight={600}>Form</Typography>
      </Stack>
      <Typography variant="caption" color="text.secondary">
        {data.label || 'No form selected'}
      </Typography>
      <Handle type="source" position={Position.Bottom} />
    </Box>
  );
}

<Box
  draggable
  onDragStart={(e) => {
    e.dataTransfer.setData('application/reactflow', nodeType);
    e.dataTransfer.effectAllowed = 'move';
  }}
  sx={{
    display: 'flex', alignItems: 'center', gap: 1.5,
    p: 1.5, border: '1px solid', borderColor: 'divider',
    borderRadius: '8px', cursor: 'grab',
    '&:hover': { borderColor: 'primary.main' },
  }}
>
  <DragIndicatorIcon sx={{ fontSize: 16, color: 'grey.500' }} />
  <DescriptionIcon sx={{ fontSize: 20, color: 'primary.main' }} />
  <Box>
    <Typography variant="body2" fontWeight={600}>Form</Typography>
    <Typography variant="caption" color="text.secondary">
      Collect user input and data
    </Typography>
  </Box>
</Box>

import { Handle, Position } from '@xyflow/react';
import { tokens } from '@/theme/theme';

// Place inside a React Flow node component:
<Handle
  type="target"
  position={Position.Left}
  style={{
    background: '#FFFFFF',
    width: 11,
    height: 11,
    border: `1px solid ${tokens.color.gray400}`,
    boxShadow: '0 1px 2px rgba(0,0,0,0.12)',
  }}
/>

// Decision nodes have two outputs: yes and no.
// Each handle needs a unique id so edges can target it.

<Handle
  type="source"
  id="yes"
  position={Position.Right}
  style={{
    top: '30%',
    background: '#FFFFFF',
    width: 11,
    height: 11,
    border: `1px solid ${tokens.color.success}`,
  }}
/>
<Handle
  type="source"
  id="no"
  position={Position.Right}
  style={{
    top: '70%',
    background: '#FFFFFF',
    width: 11,
    height: 11,
    border: `1px solid ${tokens.color.danger}`,
  }}
/>

// Edge object passed to React Flow:
const edges = [
  {
    id: 'e-decision-yes',
    source: 'decision',
    sourceHandle: 'yes',
    target: 'email-welcome',
    style: {
      stroke: tokens.color.gray400,
      strokeWidth: 2,
    },
    label: 'Yes',
    labelStyle: {
      fontSize: 11,
      fontWeight: 600,
      fill: tokens.color.successDark,
    },
    labelBgStyle: {
      fill: tokens.color.successLight,
    },
    labelBgPadding: [6, 4],
    labelBgBorderRadius: 9,
    markerEnd: { type: 'arrowclosed', color: tokens.color.gray400 },
  },
];