diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1a3bc4d0d..ca580c173 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
- ``
- prove useage of `usePlaceholder` by jest test coverage
+### Changed
+
+- ``
+ - introduced the new `arrowDirection` property, replacing the previous `inversePath` to provide more flexible control over edge arrows, including support for bidirectional edges
+
## [24.4.1] - 2025-08-25
### Fixed
diff --git a/src/extensions/react-flow/edges/EdgeDefaultV12.tsx b/src/extensions/react-flow/edges/EdgeDefaultV12.tsx
index 5ffed2cdc..664506fc4 100644
--- a/src/extensions/react-flow/edges/EdgeDefaultV12.tsx
+++ b/src/extensions/react-flow/edges/EdgeDefaultV12.tsx
@@ -25,11 +25,13 @@ export type EdgeDefaultV12DataProps = Record & {
* Size of the "glow" effect when the edge is hovered.
*/
pathGlowWidth?: number;
- /*
- * Direction of the SVG path is inversed.
- * This is important for the placement of the markers and the animation movement.
+ /**
+ * Controls where arrow heads appear on the edge.
+ * - `normal`: arrow at the end (target)
+ * - `inversed`: arrow at the start (source)
+ * - `bidirectional`: arrows at both start and end
*/
- inversePath?: boolean;
+ arrowDirection?: "normal" | "inversed" | "bidirectional";
/**
* Callback handler that returns a React element used as edge title.
*/
@@ -64,7 +66,15 @@ export const EdgeDefaultV12 = memo(
data = {},
...edgeOriginalProperties
}: EdgeProps>) => {
- const { pathGlowWidth = 10, highlightColor, renderLabel, edgeSvgProps, intent, inversePath, strokeType } = data;
+ const {
+ pathGlowWidth = 10,
+ highlightColor,
+ renderLabel,
+ edgeSvgProps,
+ intent,
+ strokeType,
+ arrowDirection = "normal",
+ } = data;
const [edgePath, labelX, labelY] = getBezierPath({
sourceX,
@@ -103,6 +113,13 @@ export const EdgeDefaultV12 = memo(
/>
) : null);
+ const markerStart =
+ arrowDirection === "inversed" || arrowDirection === "bidirectional"
+ ? "url(#arrow-closed-reverse)"
+ : undefined;
+ const markerEnd =
+ arrowDirection === "normal" || arrowDirection === "bidirectional" ? "url(#arrow-closed)" : undefined;
+
return (