diff --git a/.changeset/ten-snails-flash.md b/.changeset/ten-snails-flash.md
new file mode 100644
index 000000000..e92f8f092
--- /dev/null
+++ b/.changeset/ten-snails-flash.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Replace existing edge utils with ones that are already provided by `@xyflow/system` and re-export them
diff --git a/packages/core/src/components/ConnectionLine/index.ts b/packages/core/src/components/ConnectionLine/index.ts
index 025ec5627..70101ac8d 100644
--- a/packages/core/src/components/ConnectionLine/index.ts
+++ b/packages/core/src/components/ConnectionLine/index.ts
@@ -1,10 +1,11 @@
 import { computed, defineComponent, h, inject } from 'vue'
+import { getBezierPath, getSmoothStepPath } from '@xyflow/system'
 import type { HandleElement } from '../../types'
 import { ConnectionLineType, ConnectionMode, Position } from '../../types'
 import { getHandlePosition, getMarkerId } from '../../utils'
 import { useVueFlow } from '../../composables'
 import { Slots } from '../../context'
-import { getBezierPath, getSimpleBezierPath, getSmoothStepPath } from '../Edges/utils'
+import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge'
 
 const oppositePosition = {
   [Position.Left]: Position.Right,
diff --git a/packages/core/src/components/Edges/BezierEdge.ts b/packages/core/src/components/Edges/BezierEdge.ts
index 7dc0751f2..4ed7dd82a 100644
--- a/packages/core/src/components/Edges/BezierEdge.ts
+++ b/packages/core/src/components/Edges/BezierEdge.ts
@@ -1,8 +1,8 @@
 import { defineComponent, h } from 'vue'
+import { getBezierPath } from '@xyflow/system'
 import type { BezierEdgeProps } from '../../types'
 import { Position } from '../../types'
 import BaseEdge from './BaseEdge.vue'
-import { getBezierPath } from './utils'
 
 const BezierEdge = defineComponent<BezierEdgeProps>({
   name: 'BezierEdge',
diff --git a/packages/core/src/components/Edges/SimpleBezierEdge.ts b/packages/core/src/components/Edges/SimpleBezierEdge.ts
index a33e7c76f..019c9fb8f 100644
--- a/packages/core/src/components/Edges/SimpleBezierEdge.ts
+++ b/packages/core/src/components/Edges/SimpleBezierEdge.ts
@@ -1,8 +1,99 @@
 import { defineComponent, h } from 'vue'
+import { getBezierEdgeCenter } from '@xyflow/system'
 import type { SimpleBezierEdgeProps } from '../../types'
 import { Position } from '../../types'
 import BaseEdge from './BaseEdge.vue'
-import { getSimpleBezierPath } from './utils'
+
+export interface GetSimpleBezierPathParams {
+  sourceX: number
+  sourceY: number
+  sourcePosition?: Position
+  targetX: number
+  targetY: number
+  targetPosition?: Position
+}
+
+interface GetControlParams {
+  pos: Position
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+function getControl({ pos, x1, y1, x2, y2 }: GetControlParams): [number, number] {
+  let ctX: number, ctY: number
+  switch (pos) {
+    case Position.Left:
+    case Position.Right:
+      ctX = 0.5 * (x1 + x2)
+      ctY = y1
+      break
+    case Position.Top:
+    case Position.Bottom:
+      ctX = x1
+      ctY = 0.5 * (y1 + y2)
+      break
+  }
+  return [ctX, ctY]
+}
+
+/**
+ * Get a simple bezier path from source to target handle (no curvature)
+ * @public
+ *
+ * @param simpleBezierPathParams
+ * @param simpleBezierPathParams.sourceX - The x position of the source handle
+ * @param simpleBezierPathParams.sourceY - The y position of the source handle
+ * @param simpleBezierPathParams.sourcePosition - The position of the source handle (default: Position.Bottom)
+ * @param simpleBezierPathParams.targetX - The x position of the target handle
+ * @param simpleBezierPathParams.targetY - The y position of the target handle
+ * @param simpleBezierPathParams.targetPosition - The position of the target handle (default: Position.Top)
+ * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ */
+export function getSimpleBezierPath({
+  sourceX,
+  sourceY,
+  sourcePosition = Position.Bottom,
+  targetX,
+  targetY,
+  targetPosition = Position.Top,
+}: GetSimpleBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] {
+  const [sourceControlX, sourceControlY] = getControl({
+    pos: sourcePosition,
+    x1: sourceX,
+    y1: sourceY,
+    x2: targetX,
+    y2: targetY,
+  })
+
+  const [targetControlX, targetControlY] = getControl({
+    pos: targetPosition,
+    x1: targetX,
+    y1: targetY,
+    x2: sourceX,
+    y2: sourceY,
+  })
+
+  const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourceControlX,
+    sourceControlY,
+    targetControlX,
+    targetControlY,
+  })
+
+  return [
+    `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
+    labelX,
+    labelY,
+    offsetX,
+    offsetY,
+  ]
+}
 
 const SimpleBezierEdge = defineComponent<SimpleBezierEdgeProps>({
   name: 'SimpleBezierEdge',
diff --git a/packages/core/src/components/Edges/SmoothStepEdge.ts b/packages/core/src/components/Edges/SmoothStepEdge.ts
index 88fd824d6..f43b49cd8 100644
--- a/packages/core/src/components/Edges/SmoothStepEdge.ts
+++ b/packages/core/src/components/Edges/SmoothStepEdge.ts
@@ -1,8 +1,8 @@
 import { defineComponent, h } from 'vue'
+import { getSmoothStepPath } from '@xyflow/system'
 import type { SmoothStepEdgeProps } from '../../types'
 import { Position } from '../../types'
 import BaseEdge from './BaseEdge.vue'
-import { getSmoothStepPath } from './utils'
 
 const SmoothStepEdge = defineComponent<SmoothStepEdgeProps>({
   name: 'SmoothStepEdge',
diff --git a/packages/core/src/components/Edges/StraightEdge.ts b/packages/core/src/components/Edges/StraightEdge.ts
index 38752a902..6d5b6b84d 100644
--- a/packages/core/src/components/Edges/StraightEdge.ts
+++ b/packages/core/src/components/Edges/StraightEdge.ts
@@ -1,7 +1,7 @@
 import { defineComponent, h } from 'vue'
+import { getStraightPath } from '@xyflow/system'
 import type { StraightEdgeProps } from '../../types'
 import BaseEdge from './BaseEdge.vue'
-import { getStraightPath } from './utils'
 
 const StraightEdge = defineComponent<StraightEdgeProps>({
   name: 'StraightEdge',
diff --git a/packages/core/src/components/Edges/utils/bezier.ts b/packages/core/src/components/Edges/utils/bezier.ts
deleted file mode 100644
index 5ddca603c..000000000
--- a/packages/core/src/components/Edges/utils/bezier.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import { Position } from '../../../types'
-import type { EdgePathParams } from './general'
-import { getBezierEdgeCenter } from './general'
-
-export interface GetBezierPathParams {
-  sourceX: number
-  sourceY: number
-  sourcePosition?: Position
-  targetX: number
-  targetY: number
-  targetPosition?: Position
-  curvature?: number
-}
-
-interface GetControlWithCurvatureParams {
-  pos: Position
-  x1: number
-  y1: number
-  x2: number
-  y2: number
-  c: number
-}
-
-function calculateControlOffset(distance: number, curvature: number) {
-  if (distance >= 0) {
-    return 0.5 * distance
-  } else {
-    return curvature * 25 * Math.sqrt(-distance)
-  }
-}
-
-function getControlWithCurvature({ pos, x1, y1, x2, y2, c }: GetControlWithCurvatureParams): [number, number] {
-  let ctX: number, ctY: number
-  switch (pos) {
-    case Position.Left:
-      ctX = x1 - calculateControlOffset(x1 - x2, c)
-      ctY = y1
-      break
-    case Position.Right:
-      ctX = x1 + calculateControlOffset(x2 - x1, c)
-      ctY = y1
-      break
-    case Position.Top:
-      ctX = x1
-      ctY = y1 - calculateControlOffset(y1 - y2, c)
-      break
-    case Position.Bottom:
-      ctX = x1
-      ctY = y1 + calculateControlOffset(y2 - y1, c)
-      break
-  }
-  return [ctX, ctY]
-}
-
-/**
- * Get a bezier path from source to target handle
- * @public
- *
- * @param bezierPathParams
- * @param bezierPathParams.sourceX - The x position of the source handle
- * @param bezierPathParams.sourceY - The y position of the source handle
- * @param bezierPathParams.sourcePosition - The position of the source handle (default: Position.Bottom)
- * @param bezierPathParams.targetX - The x position of the target handle
- * @param bezierPathParams.targetY - The y position of the target handle
- * @param bezierPathParams.targetPosition - The position of the target handle (default: Position.Top)
- * @param bezierPathParams.curvature - The curvature of the edge (default: 0.25)
- * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
- */
-export function getBezierPath(bezierPathParams: GetBezierPathParams): EdgePathParams {
-  const {
-    sourceX,
-    sourceY,
-    sourcePosition = Position.Bottom,
-    targetX,
-    targetY,
-    targetPosition = Position.Top,
-    curvature = 0.25,
-  } = bezierPathParams
-
-  const [sourceControlX, sourceControlY] = getControlWithCurvature({
-    pos: sourcePosition,
-    x1: sourceX,
-    y1: sourceY,
-    x2: targetX,
-    y2: targetY,
-    c: curvature,
-  })
-  const [targetControlX, targetControlY] = getControlWithCurvature({
-    pos: targetPosition,
-    x1: targetX,
-    y1: targetY,
-    x2: sourceX,
-    y2: sourceY,
-    c: curvature,
-  })
-  const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourceControlX,
-    sourceControlY,
-    targetControlX,
-    targetControlY,
-  })
-
-  return [
-    `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
-    labelX,
-    labelY,
-    offsetX,
-    offsetY,
-  ]
-}
diff --git a/packages/core/src/components/Edges/utils/general.ts b/packages/core/src/components/Edges/utils/general.ts
deleted file mode 100644
index 1b7bfab9c..000000000
--- a/packages/core/src/components/Edges/utils/general.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-export type EdgePathParams = [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number]
-
-// this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB)
-export function getSimpleEdgeCenter({
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-}: {
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
-}): [number, number, number, number] {
-  const xOffset = Math.abs(targetX - sourceX) / 2
-  const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset
-
-  const yOffset = Math.abs(targetY - sourceY) / 2
-  const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset
-
-  return [centerX, centerY, xOffset, yOffset]
-}
-
-export function getBezierEdgeCenter({
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourceControlX,
-  sourceControlY,
-  targetControlX,
-  targetControlY,
-}: {
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
-  sourceControlX: number
-  sourceControlY: number
-  targetControlX: number
-  targetControlY: number
-}): [number, number, number, number] {
-  // cubic bezier t=0.5 mid point, not the actual mid point, but easy to calculate
-  // https://stackoverflow.com/questions/67516101/how-to-find-distance-mid-point-of-bezier-curve
-  const centerX = sourceX * 0.125 + sourceControlX * 0.375 + targetControlX * 0.375 + targetX * 0.125
-  const centerY = sourceY * 0.125 + sourceControlY * 0.375 + targetControlY * 0.375 + targetY * 0.125
-  const offsetX = Math.abs(centerX - sourceX)
-  const offsetY = Math.abs(centerY - sourceY)
-
-  return [centerX, centerY, offsetX, offsetY]
-}
diff --git a/packages/core/src/components/Edges/utils/index.ts b/packages/core/src/components/Edges/utils/index.ts
deleted file mode 100644
index 5993032ad..000000000
--- a/packages/core/src/components/Edges/utils/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './bezier'
-export * from './general'
-export * from './simple-bezier'
-export * from './smoothstep'
-export * from './straight'
diff --git a/packages/core/src/components/Edges/utils/simple-bezier.ts b/packages/core/src/components/Edges/utils/simple-bezier.ts
deleted file mode 100644
index 6f9c5f411..000000000
--- a/packages/core/src/components/Edges/utils/simple-bezier.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Position } from '../../../types'
-import type { EdgePathParams } from './general'
-import { getBezierEdgeCenter } from './general'
-
-export interface GetSimpleBezierPathParams {
-  sourceX: number
-  sourceY: number
-  sourcePosition?: Position
-  targetX: number
-  targetY: number
-  targetPosition?: Position
-}
-
-interface GetControlParams {
-  pos: Position
-  x1: number
-  y1: number
-  x2: number
-  y2: number
-}
-
-function getControl({ pos, x1, y1, x2, y2 }: GetControlParams): [number, number] {
-  let ctX: number, ctY: number
-  switch (pos) {
-    case Position.Left:
-    case Position.Right:
-      ctX = 0.5 * (x1 + x2)
-      ctY = y1
-      break
-    case Position.Top:
-    case Position.Bottom:
-      ctX = x1
-      ctY = 0.5 * (y1 + y2)
-      break
-  }
-  return [ctX, ctY]
-}
-
-/**
- * Get a simple bezier path from source to target handle (no curvature)
- * @public
- *
- * @param simpleBezierPathParams
- * @param simpleBezierPathParams.sourceX - The x position of the source handle
- * @param simpleBezierPathParams.sourceY - The y position of the source handle
- * @param simpleBezierPathParams.sourcePosition - The position of the source handle (default: Position.Bottom)
- * @param simpleBezierPathParams.targetX - The x position of the target handle
- * @param simpleBezierPathParams.targetY - The y position of the target handle
- * @param simpleBezierPathParams.targetPosition - The position of the target handle (default: Position.Top)
- * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
- */
-export function getSimpleBezierPath(simpleBezierPathParams: GetSimpleBezierPathParams): EdgePathParams {
-  const {
-    sourceX,
-    sourceY,
-    sourcePosition = Position.Bottom,
-    targetX,
-    targetY,
-    targetPosition = Position.Top,
-  } = simpleBezierPathParams
-
-  const [sourceControlX, sourceControlY] = getControl({
-    pos: sourcePosition,
-    x1: sourceX,
-    y1: sourceY,
-    x2: targetX,
-    y2: targetY,
-  })
-  const [targetControlX, targetControlY] = getControl({
-    pos: targetPosition,
-    x1: targetX,
-    y1: targetY,
-    x2: sourceX,
-    y2: sourceY,
-  })
-
-  const [centerX, centerY, offsetX, offsetY] = getBezierEdgeCenter({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourceControlX,
-    sourceControlY,
-    targetControlX,
-    targetControlY,
-  })
-
-  return [
-    `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
-    centerX,
-    centerY,
-    offsetX,
-    offsetY,
-  ]
-}
diff --git a/packages/core/src/components/Edges/utils/smoothstep.ts b/packages/core/src/components/Edges/utils/smoothstep.ts
deleted file mode 100644
index cc6477440..000000000
--- a/packages/core/src/components/Edges/utils/smoothstep.ts
+++ /dev/null
@@ -1,250 +0,0 @@
-import type { XYPosition } from '../../../types'
-import { Position } from '../../../types'
-import type { EdgePathParams } from './general'
-import { getSimpleEdgeCenter } from './general'
-
-export interface GetSmoothStepPathParams {
-  sourceX: number
-  sourceY: number
-  sourcePosition?: Position
-  targetX: number
-  targetY: number
-  targetPosition?: Position
-  borderRadius?: number
-  centerX?: number
-  centerY?: number
-  offset?: number
-}
-
-const handleDirections = {
-  [Position.Left]: { x: -1, y: 0 },
-  [Position.Right]: { x: 1, y: 0 },
-  [Position.Top]: { x: 0, y: -1 },
-  [Position.Bottom]: { x: 0, y: 1 },
-}
-
-function getDirection({
-  source,
-  sourcePosition = Position.Bottom,
-  target,
-}: {
-  source: XYPosition
-  sourcePosition: Position
-  target: XYPosition
-}): XYPosition {
-  if (sourcePosition === Position.Left || sourcePosition === Position.Right) {
-    return source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 }
-  }
-  return source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 }
-}
-
-function distance(a: XYPosition, b: XYPosition) {
-  return Math.sqrt((b.x - a.x) ** 2 + (b.y - a.y) ** 2)
-}
-
-// With this function we try to mimic an orthogonal edge routing behaviour
-// It's not as good as a real orthogonal edge routing, but it's faster and good enough as a default for step and smooth step edges
-function getPoints({
-  source,
-  sourcePosition = Position.Bottom,
-  target,
-  targetPosition = Position.Top,
-  center,
-  offset,
-}: {
-  source: XYPosition
-  sourcePosition: Position
-  target: XYPosition
-  targetPosition: Position
-  center: Partial<XYPosition>
-  offset: number
-}): [XYPosition[], number, number, number, number] {
-  const sourceDir = handleDirections[sourcePosition]
-  const targetDir = handleDirections[targetPosition]
-  const sourceGapped: XYPosition = { x: source.x + sourceDir.x * offset, y: source.y + sourceDir.y * offset }
-  const targetGapped: XYPosition = { x: target.x + targetDir.x * offset, y: target.y + targetDir.y * offset }
-  const dir = getDirection({
-    source: sourceGapped,
-    sourcePosition,
-    target: targetGapped,
-  })
-  const dirAccessor = dir.x !== 0 ? 'x' : 'y'
-  const currDir = dir[dirAccessor]
-
-  let points: XYPosition[]
-  let centerX, centerY
-
-  const sourceGapOffset = { x: 0, y: 0 }
-  const targetGapOffset = { x: 0, y: 0 }
-
-  const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getSimpleEdgeCenter({
-    sourceX: source.x,
-    sourceY: source.y,
-    targetX: target.x,
-    targetY: target.y,
-  })
-
-  // opposite handle positions, default case
-  if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
-    centerX = center.x ?? defaultCenterX
-    centerY = center.y ?? defaultCenterY
-    //    --->
-    //    |
-    // >---
-    const verticalSplit: XYPosition[] = [
-      { x: centerX, y: sourceGapped.y },
-      { x: centerX, y: targetGapped.y },
-    ]
-    //    |
-    //  ---
-    //  |
-    const horizontalSplit: XYPosition[] = [
-      { x: sourceGapped.x, y: centerY },
-      { x: targetGapped.x, y: centerY },
-    ]
-
-    if (sourceDir[dirAccessor] === currDir) {
-      points = dirAccessor === 'x' ? verticalSplit : horizontalSplit
-    } else {
-      points = dirAccessor === 'x' ? horizontalSplit : verticalSplit
-    }
-  } else {
-    // sourceTarget means we take x from source and y from target, targetSource is the opposite
-    const sourceTarget: XYPosition[] = [{ x: sourceGapped.x, y: targetGapped.y }]
-    const targetSource: XYPosition[] = [{ x: targetGapped.x, y: sourceGapped.y }]
-    // this handles edges with same handle positions
-    if (dirAccessor === 'x') {
-      points = sourceDir.x === currDir ? targetSource : sourceTarget
-    } else {
-      points = sourceDir.y === currDir ? sourceTarget : targetSource
-    }
-
-    if (sourcePosition === targetPosition) {
-      const diff = Math.abs(source[dirAccessor] - target[dirAccessor])
-
-      // if an edge goes from right to right for example (sourcePosition === targetPosition) and the distance between source.x and target.x is less than the offset, the added point and the gapped source/target will overlap. This leads to a weird edge path. To avoid this we add a gapOffset to the source/target
-      if (diff <= offset) {
-        const gapOffset = Math.min(offset - 1, offset - diff)
-        if (sourceDir[dirAccessor] === currDir) {
-          sourceGapOffset[dirAccessor] = (sourceGapped[dirAccessor] > source[dirAccessor] ? -1 : 1) * gapOffset
-        } else {
-          targetGapOffset[dirAccessor] = (targetGapped[dirAccessor] > target[dirAccessor] ? -1 : 1) * gapOffset
-        }
-      }
-    }
-
-    // these are conditions for handling mixed handle positions like Right -> Bottom for example
-    if (sourcePosition !== targetPosition) {
-      const dirAccessorOpposite = dirAccessor === 'x' ? 'y' : 'x'
-      const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessorOpposite]
-      const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite]
-      const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite]
-      const flipSourceTarget =
-        (sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTargetOppo) || (isSameDir && sourceLtTargetOppo))) ||
-        (sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTargetOppo) || (isSameDir && sourceGtTargetOppo)))
-
-      if (flipSourceTarget) {
-        points = dirAccessor === 'x' ? sourceTarget : targetSource
-      }
-    }
-
-    const sourceGapPoint = { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y }
-    const targetGapPoint = { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y }
-    const maxXDistance = Math.max(Math.abs(sourceGapPoint.x - points[0].x), Math.abs(targetGapPoint.x - points[0].x))
-    const maxYDistance = Math.max(Math.abs(sourceGapPoint.y - points[0].y), Math.abs(targetGapPoint.y - points[0].y))
-
-    // we want to place the label on the longest segment of the edge
-    if (maxXDistance >= maxYDistance) {
-      centerX = (sourceGapPoint.x + targetGapPoint.x) / 2
-      centerY = points[0].y
-    } else {
-      centerX = points[0].x
-      centerY = (sourceGapPoint.y + targetGapPoint.y) / 2
-    }
-  }
-
-  const pathPoints = [
-    source,
-    { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y },
-    ...points,
-    { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y },
-    target,
-  ]
-
-  return [pathPoints, centerX, centerY, defaultOffsetX, defaultOffsetY]
-}
-
-function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size: number): string {
-  const bendSize = Math.min(distance(a, b) / 2, distance(b, c) / 2, size)
-  const { x, y } = b
-
-  // no bend
-  if ((a.x === x && x === c.x) || (a.y === y && y === c.y)) {
-    return `L${x} ${y}`
-  }
-
-  // first segment is horizontal
-  if (a.y === y) {
-    const xDir = a.x < c.x ? -1 : 1
-    const yDir = a.y < c.y ? 1 : -1
-    return `L ${x + bendSize * xDir},${y}Q ${x},${y} ${x},${y + bendSize * yDir}`
-  }
-
-  const xDir = a.x < c.x ? 1 : -1
-  const yDir = a.y < c.y ? -1 : 1
-  return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`
-}
-
-/**
- * Get a smooth step path from source to target handle
- * @public
- *
- * @param smoothStepPathParams
- * @param smoothStepPathParams.sourceX - The x position of the source handle
- * @param smoothStepPathParams.sourceY - The y position of the source handle
- * @param smoothStepPathParams.sourcePosition - The position of the source handle (default: Position.Bottom)
- * @param smoothStepPathParams.targetX - The x position of the target handle
- * @param smoothStepPathParams.targetY - The y position of the target handle
- * @param smoothStepPathParams.targetPosition - The position of the target handle (default: Position.Top)
- * @param smoothStepPathParams.borderRadius - The border radius of the edge (default: 5)
- * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
- */
-export function getSmoothStepPath(smoothStepPathParams: GetSmoothStepPathParams): EdgePathParams {
-  const {
-    sourceX,
-    sourceY,
-    sourcePosition = Position.Bottom,
-    targetX,
-    targetY,
-    targetPosition = Position.Top,
-    borderRadius = 5,
-    centerX,
-    centerY,
-    offset = 20,
-  } = smoothStepPathParams
-
-  const [points, labelX, labelY, offsetX, offsetY] = getPoints({
-    source: { x: sourceX, y: sourceY },
-    sourcePosition,
-    target: { x: targetX, y: targetY },
-    targetPosition,
-    center: { x: centerX, y: centerY },
-    offset,
-  })
-
-  const path = points.reduce((res, p, i) => {
-    let segment
-
-    if (i > 0 && i < points.length - 1) {
-      segment = getBend(points[i - 1], p, points[i + 1], borderRadius)
-    } else {
-      segment = `${i === 0 ? 'M' : 'L'}${p.x} ${p.y}`
-    }
-
-    res += segment
-
-    return res
-  }, '')
-
-  return [path, labelX, labelY, offsetX, offsetY]
-}
diff --git a/packages/core/src/components/Edges/utils/straight.ts b/packages/core/src/components/Edges/utils/straight.ts
deleted file mode 100644
index f8dba4a93..000000000
--- a/packages/core/src/components/Edges/utils/straight.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { EdgePathParams } from './general'
-import { getSimpleEdgeCenter } from './general'
-
-export interface GetStraightPathParams {
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
-}
-
-/**
- * Get a straight path from source to target handle
- * @public
- *
- * @param straightEdgeParams
- * @param straightEdgeParams.sourceX - The x position of the source handle
- * @param straightEdgeParams.sourceY - The y position of the source handle
- * @param straightEdgeParams.targetX - The x position of the target handle
- * @param straightEdgeParams.targetY - The y position of the target handle
- * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
- */
-export function getStraightPath(straightEdgeParams: GetStraightPathParams): EdgePathParams {
-  const { sourceX, sourceY, targetX, targetY } = straightEdgeParams
-
-  const [centerX, centerY, offsetX, offsetY] = getSimpleEdgeCenter({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-  })
-
-  return [`M ${sourceX},${sourceY}L ${targetX},${targetY}`, centerX, centerY, offsetX, offsetY]
-}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 371c4dfa9..c3dbf4422 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -18,14 +18,9 @@ export { default as BaseEdge } from './components/Edges/BaseEdge.vue'
 export { default as EdgeText } from './components/Edges/EdgeText.vue'
 export { default as EdgeLabelRenderer } from './components/Edges/EdgeLabelRenderer.vue'
 
-export {
-  getBezierPath,
-  getSimpleBezierPath,
-  getSmoothStepPath,
-  getStraightPath,
-  getSimpleEdgeCenter,
-  getBezierEdgeCenter,
-} from './components/Edges/utils'
+// re-export these utils from system
+export { getBezierPath, getSmoothStepPath, getStraightPath, getBezierEdgeCenter } from '@xyflow/system'
+export { getSimpleBezierPath } from './components/Edges/SimpleBezierEdge'
 
 export {
   isNode,