From 1332ce28530c3a66b8d54253eeb46c6ff6cbc284 Mon Sep 17 00:00:00 2001
From: Haider <haider.abbas@soptim.de>
Date: Thu, 9 Jul 2026 16:32:09 +0200
Subject: [PATCH 1/5] chore(files): better structuring of SvelteFlow frontend
 components

---
 .../SvelteFlowClassContextMenu.svelte         |  10 +-
 .../SvelteFlowPaneContextMenu.svelte          |   6 +-
 .../{ => contextmenu}/contextMenuUtils.js     |   0
 .../{ => edge}/AssociationEdge.svelte         |  75 ++++++++---
 .../components/{ => edge}/EdgeMarkers.svelte  |   0
 .../{ => edge}/InheritanceEdge.svelte         |   0
 .../svelteflow/components/edgeUtils.ts        | 123 ------------------
 7 files changed, 66 insertions(+), 148 deletions(-)
 rename frontend/src/lib/rendering/svelteflow/components/{ => contextmenu}/SvelteFlowClassContextMenu.svelte (95%)
 rename frontend/src/lib/rendering/svelteflow/components/{ => contextmenu}/SvelteFlowPaneContextMenu.svelte (96%)
 rename frontend/src/lib/rendering/svelteflow/components/{ => contextmenu}/contextMenuUtils.js (100%)
 rename frontend/src/lib/rendering/svelteflow/components/{ => edge}/AssociationEdge.svelte (68%)
 rename frontend/src/lib/rendering/svelteflow/components/{ => edge}/EdgeMarkers.svelte (100%)
 rename frontend/src/lib/rendering/svelteflow/components/{ => edge}/InheritanceEdge.svelte (100%)
 delete mode 100644 frontend/src/lib/rendering/svelteflow/components/edgeUtils.ts

diff --git a/frontend/src/lib/rendering/svelteflow/components/SvelteFlowClassContextMenu.svelte b/frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowClassContextMenu.svelte
similarity index 95%
rename from frontend/src/lib/rendering/svelteflow/components/SvelteFlowClassContextMenu.svelte
rename to frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowClassContextMenu.svelte
index fc70060b..1d32ce46 100644
--- a/frontend/src/lib/rendering/svelteflow/components/SvelteFlowClassContextMenu.svelte
+++ b/frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowClassContextMenu.svelte
@@ -29,8 +29,8 @@
         faDiagramProject,
     } from "@fortawesome/free-solid-svg-icons";
 
-    import { ContextMenu } from "$lib/components/bitsui/contextmenu";
     import ContextMenuSeparator from "$lib/components/bitsui/contextmenu/ContextMenuSeparator.svelte";
+    import { ContextMenu } from "$lib/components/bitsui/contextmenu/index.js";
     import {
         copyState,
         DiagramType,
@@ -43,10 +43,10 @@
         handleContextMenuOpenChange,
         syncContextMenuTrigger,
     } from "./contextMenuUtils.js";
-    import DeleteDependenciesDialog from "../../../../routes/delete-relations-dialog/DeleteDependenciesDialog.svelte";
-    import RemoveFromDiagramDialog from "../../../../routes/mainpage/packageNavigation/custom-diagram-dialogs/RemoveFromDiagramDialog.svelte";
-    import ExtendClassDialog from "../../../../routes/mainpage/packageNavigation/ExtendClassDialog.svelte";
-    import SHACLClassSpecificPopUp from "../../../../routes/shacl/shaclclassspecific/SHACLClassSpecificPopUp.svelte";
+    import DeleteDependenciesDialog from "../../../../../routes/delete-relations-dialog/DeleteDependenciesDialog.svelte";
+    import RemoveFromDiagramDialog from "../../../../../routes/mainpage/packageNavigation/custom-diagram-dialogs/RemoveFromDiagramDialog.svelte";
+    import ExtendClassDialog from "../../../../../routes/mainpage/packageNavigation/ExtendClassDialog.svelte";
+    import SHACLClassSpecificPopUp from "../../../../../routes/shacl/shaclclassspecific/SHACLClassSpecificPopUp.svelte";
 
     let {
         request = null,
diff --git a/frontend/src/lib/rendering/svelteflow/components/SvelteFlowPaneContextMenu.svelte b/frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowPaneContextMenu.svelte
similarity index 96%
rename from frontend/src/lib/rendering/svelteflow/components/SvelteFlowPaneContextMenu.svelte
rename to frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowPaneContextMenu.svelte
index 95c29518..5508df7b 100644
--- a/frontend/src/lib/rendering/svelteflow/components/SvelteFlowPaneContextMenu.svelte
+++ b/frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowPaneContextMenu.svelte
@@ -19,7 +19,7 @@
     import { faPaste, faPlus } from "@fortawesome/free-solid-svg-icons";
 
     import { BackendConnection } from "$lib/api/backend.js";
-    import { ContextMenu } from "$lib/components/bitsui/contextmenu";
+    import { ContextMenu } from "$lib/components/bitsui/contextmenu/index.js";
     import { PUBLIC_BACKEND_URL } from "$lib/config/runtime.js";
     import {
         copyState,
@@ -32,8 +32,8 @@
         handleContextMenuOpenChange,
         syncContextMenuTrigger,
     } from "./contextMenuUtils.js";
-    import { saveCopyClass } from "../../../../routes/mainpage/packageNavigation/save-copy-class-to-backend.js";
-    import NewClassDialog from "../../../../routes/NewClassDialog.svelte";
+    import { saveCopyClass } from "../../../../../routes/mainpage/packageNavigation/save-copy-class-to-backend.js";
+    import NewClassDialog from "../../../../../routes/NewClassDialog.svelte";
 
     let {
         request = null,
diff --git a/frontend/src/lib/rendering/svelteflow/components/contextMenuUtils.js b/frontend/src/lib/rendering/svelteflow/components/contextmenu/contextMenuUtils.js
similarity index 100%
rename from frontend/src/lib/rendering/svelteflow/components/contextMenuUtils.js
rename to frontend/src/lib/rendering/svelteflow/components/contextmenu/contextMenuUtils.js
diff --git a/frontend/src/lib/rendering/svelteflow/components/AssociationEdge.svelte b/frontend/src/lib/rendering/svelteflow/components/edge/AssociationEdge.svelte
similarity index 68%
rename from frontend/src/lib/rendering/svelteflow/components/AssociationEdge.svelte
rename to frontend/src/lib/rendering/svelteflow/components/edge/AssociationEdge.svelte
index e68c869c..1fd43aca 100644
--- a/frontend/src/lib/rendering/svelteflow/components/AssociationEdge.svelte
+++ b/frontend/src/lib/rendering/svelteflow/components/edge/AssociationEdge.svelte
@@ -20,18 +20,22 @@
         BaseEdge,
         EdgeLabel,
         getStraightPath,
+        useEdges,
         useInternalNode,
     } from "@xyflow/svelte";
 
     import { userSettings } from "$lib/userSettings.svelte.js";
 
-    import { getEdgeParams } from "./edgeUtils.ts";
+    import EdgeBendPoints from "./EdgeBendPoints.svelte";
+    import { getEdgeParams, getPolylinePath } from "./edgeUtils.ts";
+    let { id, source, target, data, selected } = $props();
+    const edges = useEdges();
 
-    let { id, source, target, data } = $props();
     let markerEnd = data.useToAssociation ? "url(#associationTo)" : "";
     let markerStart = data.useFromAssociation ? "url(#associationFrom)" : "";
     let sourceNode = useInternalNode(source);
     let targetNode = useInternalNode(target);
+    let bendPoints = $derived(data.bendPoints ?? []);
 
     let style = $derived(
         userSettings.get("useColoredPropertiesInMergedView") && data.color
@@ -41,20 +45,35 @@
 
     let edgeParams = $derived.by(() => {
         if (sourceNode.current && targetNode.current) {
-            return getEdgeParams(sourceNode.current, targetNode.current);
+            return getEdgeParams(
+                sourceNode.current,
+                targetNode.current,
+                0,
+                bendPoints,
+            );
         }
     });
 
+    //TODO hier später am besten in ne getPath methode auslagern
     let path = $derived.by(() => {
         if (!edgeParams) return "";
-        return target === source && sourceNode.current
-            ? getSelfConnectingPath()
-            : getStraightPath({
-                  sourceX: edgeParams.sx,
-                  sourceY: edgeParams.sy,
-                  targetX: edgeParams.tx,
-                  targetY: edgeParams.ty,
-              })[0];
+        if (target === source && sourceNode.current)
+            return getSelfConnectingPath();
+
+        if (bendPoints.length > 0) {
+            return getPolylinePath([
+                { x: edgeParams.sx, y: edgeParams.sy },
+                ...bendPoints,
+                { x: edgeParams.tx, y: edgeParams.ty },
+            ]);
+        }
+
+        return getStraightPath({
+            sourceX: edgeParams.sx,
+            sourceY: edgeParams.sy,
+            targetX: edgeParams.tx,
+            targetY: edgeParams.ty,
+        })[0];
     });
 
     function getSelfConnectingPath() {
@@ -63,18 +82,40 @@
             y: 0,
         };
         const w = sourceNode.current.measured.width ?? 100;
-
         const x1 = pos.x + w * 0.25;
         const y1 = pos.y;
         const x2 = pos.x + w * 0.75;
         const y2 = pos.y;
-
         const loopHeight = 70;
         return `M ${x1} ${y1} C ${x1} ${y1 - loopHeight}, ${x2} ${y2 - loopHeight}, ${x2} ${y2}`;
     }
+
+    function handleBendPointsChange(nextPoints) {
+        edges.update(current =>
+            current.map(edge =>
+                edge.id === id
+                    ? {
+                          ...edge,
+                          data: { ...edge.data, bendPoints: nextPoints },
+                      }
+                    : edge,
+            ),
+        );
+    }
 </script>
 
 <BaseEdge {id} {path} {markerStart} {markerEnd} {style} />
+
+{#if selected && edgeParams && target !== source}
+    <EdgeBendPoints
+        edgeId={id}
+        sourcePoint={{ x: edgeParams.sx, y: edgeParams.sy }}
+        targetPoint={{ x: edgeParams.tx, y: edgeParams.ty }}
+        {bendPoints}
+        onPointsChange={handleBendPointsChange}
+    />
+{/if}
+
 <EdgeLabel>
     {#if data.toMultiplicity}
         {#if target === source && sourceNode.current}
@@ -85,14 +126,14 @@
             {@const w = sourceNode.current.measured.width ?? 100}
             <div
                 style:transform={`translate(-50%, -50%) translate(${pos.x + w * 0.25 - 12}px, ${pos.y - 30}px)`}
-                class="nodrag nopan pointer-events-auto absolute z-50 cursor-pointer rounded bg-white/80 px-2 py-0.5 text-xs font-medium text-[#303030] shadow-sm"
+                class="nodrag nopan pointer-events-auto absolute z-50 cursor-pointer rounded bg-white/80 px-2 py-0.5 text-xs font-medium text-default-text shadow-sm"
             >
                 {data.toMultiplicity}
             </div>
         {:else}
             <div
                 style:transform={`translate(-50%, -50%) translate(${edgeParams.sx + edgeParams.startX}px, ${edgeParams.sy + edgeParams.startY}px)`}
-                class="nodrag nopan pointer-events-auto absolute z-50 cursor-pointer rounded bg-white/80 px-2 py-0.5 text-xs font-medium text-[#303030] shadow-sm"
+                class="nodrag nopan pointer-events-auto absolute z-50 cursor-pointer rounded bg-white/80 px-2 py-0.5 text-xs font-medium text-default-text shadow-sm"
             >
                 {data.toMultiplicity}
             </div>
@@ -107,14 +148,14 @@
             {@const w = targetNode.current.measured.width ?? 100}
             <div
                 style:transform={`translate(-50%, -50%) translate(${pos.x + w * 0.75 + 12}px, ${pos.y - 30}px)`}
-                class="nodrag nopan pointer-events-auto absolute z-50 cursor-pointer rounded bg-white/80 px-2 py-0.5 text-xs font-medium text-[#303030] shadow-sm"
+                class="nodrag nopan pointer-events-auto absolute z-50 cursor-pointer rounded bg-white/80 px-2 py-0.5 text-xs font-medium text-default-text shadow-sm"
             >
                 {data.fromMultiplicity}
             </div>
         {:else}
             <div
                 style:transform={`translate(-50%, -50%) translate(${edgeParams.tx + edgeParams.endX}px, ${edgeParams.ty + edgeParams.endY}px)`}
-                class="nodrag nopan pointer-events-auto absolute z-50 cursor-pointer rounded bg-white/80 px-2 py-0.5 text-xs font-medium text-[#303030] shadow-sm"
+                class="nodrag nopan pointer-events-auto absolute z-50 cursor-pointer rounded bg-white/80 px-2 py-0.5 text-xs font-medium text-default-text shadow-sm"
             >
                 {data.fromMultiplicity}
             </div>
diff --git a/frontend/src/lib/rendering/svelteflow/components/EdgeMarkers.svelte b/frontend/src/lib/rendering/svelteflow/components/edge/EdgeMarkers.svelte
similarity index 100%
rename from frontend/src/lib/rendering/svelteflow/components/EdgeMarkers.svelte
rename to frontend/src/lib/rendering/svelteflow/components/edge/EdgeMarkers.svelte
diff --git a/frontend/src/lib/rendering/svelteflow/components/InheritanceEdge.svelte b/frontend/src/lib/rendering/svelteflow/components/edge/InheritanceEdge.svelte
similarity index 100%
rename from frontend/src/lib/rendering/svelteflow/components/InheritanceEdge.svelte
rename to frontend/src/lib/rendering/svelteflow/components/edge/InheritanceEdge.svelte
diff --git a/frontend/src/lib/rendering/svelteflow/components/edgeUtils.ts b/frontend/src/lib/rendering/svelteflow/components/edgeUtils.ts
deleted file mode 100644
index e338fe19..00000000
--- a/frontend/src/lib/rendering/svelteflow/components/edgeUtils.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-/*
- *    Copyright (c) 2024-2026 SOPTIM AG
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- *
- */
-
-import { type InternalNode } from "@xyflow/svelte";
-
-/**
- * Calculates the intersection point between a line (from the target to the node center)
- * and the border of the intersection node. Used to determine edge start and end points.
- * This and the following methods are adapted from the SvelteFlow "Easy Connect" example.
- * See: https://svelteflow.dev/examples/nodes/easy-connect
- */
-function getNodeIntersection(
-    intersectionNode: InternalNode,
-    targetNode: InternalNode,
-    offsetY: number = 0,
-) {
-    const intersectionPos = intersectionNode.internals.positionAbsolute || {
-        x: 0,
-        y: 0,
-    };
-    const targetPos = targetNode.internals.positionAbsolute || { x: 0, y: 0 };
-
-    const w = (intersectionNode.measured.width ?? 0) / 2;
-    const h = (intersectionNode.measured.height ?? 0) / 2;
-
-    const x2 = intersectionPos.x + w;
-    const y2 = intersectionPos.y + h;
-    const x1 = targetPos.x + (targetNode.measured.width ?? 0) / 2;
-    const y1 = targetPos.y + (targetNode.measured.height ?? 0) / 2 + offsetY;
-
-    const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
-    const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
-
-    const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
-    const xx3 = a * xx1;
-    const yy3 = a * yy1;
-
-    return {
-        x: w * (xx3 + yy3) + x2,
-        y: h * (-xx3 + yy3) + y2,
-    };
-}
-
-/**
- * Calculates the label offsets along an edge based on the angle of the connection line.
- * Used to position start and end labels.
- */
-function getLabelOffsets(sx: number, sy: number, tx: number, ty: number) {
-    const ALONG_EDGE_DISTANCE = 20;
-    const PERPENDICULAR_DISTANCE = 14;
-
-    const dx = tx - sx;
-    const dy = ty - sy;
-    const length = Math.sqrt(dx * dx + dy * dy) || 1;
-
-    const normDx = dx / length;
-    const normDy = dy / length;
-
-    const angle = Math.atan2(-dy, dx) * (180 / Math.PI);
-    const normalizedAngle = (angle + 360) % 360;
-
-    const labelOnLeft =
-        (normalizedAngle >= 90 && normalizedAngle < 180) ||
-        normalizedAngle >= 270;
-    const side = labelOnLeft ? 1 : -1;
-
-    const alongX = normDx * ALONG_EDGE_DISTANCE;
-    const alongY = normDy * ALONG_EDGE_DISTANCE;
-    const perpX = -normDy * PERPENDICULAR_DISTANCE * side;
-    const perpY = normDx * PERPENDICULAR_DISTANCE * side;
-
-    return {
-        startX: alongX + perpX,
-        startY: alongY + perpY,
-        endX: -alongX + perpX,
-        endY: -alongY + perpY,
-    };
-}
-
-/**
- * Returns all parameters needed to render an edge and its labels.
- * Contains the start/end points of the edge as well as the calculated label positions.
- */
-export function getEdgeParams(
-    source: InternalNode,
-    target: InternalNode,
-    offsetY: number = 0,
-) {
-    const sourceIntersection = getNodeIntersection(source, target);
-    const targetIntersection = getNodeIntersection(target, source, offsetY);
-
-    const labelOffsets = getLabelOffsets(
-        sourceIntersection.x,
-        sourceIntersection.y,
-        targetIntersection.x,
-        targetIntersection.y,
-    );
-
-    return {
-        sx: sourceIntersection.x,
-        sy: sourceIntersection.y,
-        tx: targetIntersection.x,
-        ty: targetIntersection.y,
-        startX: labelOffsets.startX,
-        startY: labelOffsets.startY,
-        endX: labelOffsets.endX,
-        endY: labelOffsets.endY,
-    };
-}

From ba9dc3167a7436f352d598f0c62c00fb06c4e92d Mon Sep 17 00:00:00 2001
From: Haider <haider.abbas@soptim.de>
Date: Tue, 14 Jul 2026 16:30:13 +0200
Subject: [PATCH 2/5] feat(multi-segment-edges): initial rendering
 functionality with SVG circle bend points + interaction via context menu

---
 .../SvelteFlowEdgeContextMenu.svelte          | 126 +++++++++
 .../components/edge/EdgeBendPoints.svelte     | 133 +++++++++
 .../svelteflow/components/edge/edgeUtils.ts   | 267 ++++++++++++++++++
 .../interaction/bendPointOperations.js        |  64 +++++
 .../interaction/contextMenus.svelte.js        |  60 +++-
 .../svelteflow/svelteFlowWrapper.svelte       | 120 +++++++-
 .../routes/mainpage/renderingWrapper.svelte   | 113 +++++++-
 7 files changed, 874 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowEdgeContextMenu.svelte
 create mode 100644 frontend/src/lib/rendering/svelteflow/components/edge/EdgeBendPoints.svelte
 create mode 100644 frontend/src/lib/rendering/svelteflow/components/edge/edgeUtils.ts
 create mode 100644 frontend/src/lib/rendering/svelteflow/interaction/bendPointOperations.js

diff --git a/frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowEdgeContextMenu.svelte b/frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowEdgeContextMenu.svelte
new file mode 100644
index 00000000..5f2c839b
--- /dev/null
+++ b/frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowEdgeContextMenu.svelte
@@ -0,0 +1,126 @@
+<!--
+  -    Copyright (c) 2024-2026 SOPTIM AG
+  -
+  -    Licensed under the Apache License, Version 2.0 (the "License");
+  -    you may not use this file except in compliance with the License.
+  -    You may obtain a copy of the License at
+  -
+  -        http://www.apache.org/licenses/LICENSE-2.0
+  -
+  -    Unless required by applicable law or agreed to in writing, software
+  -    distributed under the License is distributed on an "AS IS" BASIS,
+  -    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  -    See the License for the specific language governing permissions and
+  -    limitations under the License.
+  -
+  -->
+
+<script>
+    import {
+        faPlus,
+        faTrash,
+        faEraser,
+    } from "@fortawesome/free-solid-svg-icons";
+
+    import { ContextMenu } from "$lib/components/bitsui/contextmenu";
+    import { MAX_BEND_POINTS_PER_EDGE } from "$lib/rendering/svelteflow/interaction/bendPointOperations.js";
+
+    import {
+        getContextMenuTriggerStyle,
+        handleContextMenuOpenChange,
+        syncContextMenuTrigger,
+    } from "./contextMenuUtils.js";
+
+    let {
+        request = null,
+        disabled = false,
+        onClose = () => {},
+        onAddBendPoint = () => {},
+        onDeleteBendPoint = () => {},
+        onClearBendPoints = () => {},
+    } = $props();
+
+    let triggerRef = $state(null);
+    let open = $state(false);
+
+    let triggerStyle = $derived(getContextMenuTriggerStyle(request));
+
+    let onBendPoint = $derived(!!request?.hitBendPointId);
+    let atLimit = $derived(
+        (request?.bendPointCount ?? 0) >= MAX_BEND_POINTS_PER_EDGE,
+    );
+
+    $effect(() => {
+        syncContextMenuTrigger({
+            disabled,
+            request,
+            triggerRef,
+            setOpen: nextOpen => (open = nextOpen),
+        });
+    });
+
+    function handleOpenChange(nextOpen) {
+        handleContextMenuOpenChange(nextOpen, value => (open = value), onClose);
+    }
+
+    function addBendPoint() {
+        if (atLimit || !request) return;
+        onAddBendPoint({
+            edgeId: request.edgeId,
+            flowPosition: request.flowPosition,
+        });
+        onClose();
+    }
+
+    function deleteBendPoint() {
+        if (!request?.hitBendPointId) return;
+        onDeleteBendPoint({
+            edgeId: request.edgeId,
+            bendPointId: request.hitBendPointId,
+        });
+        onClose();
+    }
+
+    function clearBendPoints() {
+        if (!request) return;
+        onClearBendPoints({ edgeId: request.edgeId });
+        onClose();
+    }
+</script>
+
+<ContextMenu.Root bind:open onOpenChange={handleOpenChange}>
+    <ContextMenu.TriggerArea
+        bind:ref={triggerRef}
+        class="fixed h-px w-px opacity-0"
+        style={triggerStyle}
+        {disabled}
+    />
+    <ContextMenu.Content>
+        {#if onBendPoint}
+            <ContextMenu.Item.Button
+                onSelect={deleteBendPoint}
+                faIcon={faTrash}
+                variant="danger"
+            >
+                Delete bend point
+            </ContextMenu.Item.Button>
+        {:else}
+            <ContextMenu.Item.Button
+                onSelect={addBendPoint}
+                faIcon={faPlus}
+                disabled={atLimit}
+                altText={atLimit ? "Max bend points reached" : "Ctrl+Q"}
+            >
+                Add bend point here
+            </ContextMenu.Item.Button>
+        {/if}
+        <ContextMenu.Separator />
+        <ContextMenu.Item.Button
+            onSelect={clearBendPoints}
+            faIcon={faEraser}
+            variant="danger"
+        >
+            Remove all bend points
+        </ContextMenu.Item.Button>
+    </ContextMenu.Content>
+</ContextMenu.Root>
diff --git a/frontend/src/lib/rendering/svelteflow/components/edge/EdgeBendPoints.svelte b/frontend/src/lib/rendering/svelteflow/components/edge/EdgeBendPoints.svelte
new file mode 100644
index 00000000..97b47331
--- /dev/null
+++ b/frontend/src/lib/rendering/svelteflow/components/edge/EdgeBendPoints.svelte
@@ -0,0 +1,133 @@
+<!--
+  -    Copyright (c) 2024-2026 SOPTIM AG
+  -
+  -    Licensed under the Apache License, Version 2.0 (the "License");
+  -    you may not use this file except in compliance with the License.
+  -    You may obtain a copy of the License at
+  -
+  -        http://www.apache.org/licenses/LICENSE-2.0
+  -
+  -    Unless required by applicable law or agreed to in writing, software
+  -    distributed under the License is distributed on an "AS IS" BASIS,
+  -    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  -    See the License for the specific language governing permissions and
+  -    limitations under the License.
+  -
+  -->
+
+<script>
+    import { useSvelteFlow } from "@xyflow/svelte";
+
+    import {
+        createBendPoint,
+        insertBendPointAt,
+    } from "$lib/rendering/svelteflow/interaction/bendPointOperations.js";
+
+    import { getInactiveBendPoints } from "./edgeUtils.ts";
+
+    let {
+        edgeId,
+        sourcePoint,
+        targetPoint,
+        bendPoints = [],
+        onPointsChange,
+    } = $props();
+
+    const { screenToFlowPosition } = useSvelteFlow();
+
+    let draggingId = $state(null);
+
+    let fullPoints = $derived([sourcePoint, ...bendPoints, targetPoint]);
+    let inactiveBendPoints = $derived(getInactiveBendPoints(fullPoints));
+
+    function beginDrag(pointId, event) {
+        if (event.button === 2) return;
+        event.stopPropagation();
+        draggingId = pointId;
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", endDrag, { once: true });
+        window.addEventListener("contextmenu", endDrag, { once: true });
+    }
+
+    function activateInactivePoint(insertionIndex, event) {
+        if (event.button === 2) return;
+        event.stopPropagation();
+        const flowPosition = screenToFlowPosition({
+            x: event.clientX,
+            y: event.clientY,
+        });
+        const newBendPoint = createBendPoint(flowPosition.x, flowPosition.y);
+        const newBendPoints = insertBendPointAt(
+            bendPoints,
+            insertionIndex,
+            newBendPoint,
+        );
+        onPointsChange(newBendPoints);
+        draggingId = newBendPoint.id;
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", endDrag, { once: true });
+        window.addEventListener("contextmenu", endDrag, { once: true });
+    }
+
+    function endDrag() {
+        draggingId = null;
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", endDrag);
+        window.removeEventListener("contextmenu", endDrag);
+    }
+
+    function onMove(event) {
+        if (!draggingId) return;
+        const flowPosition = screenToFlowPosition({
+            x: event.clientX,
+            y: event.clientY,
+        });
+        const newBendPoints = bendPoints.map(bendPoint =>
+            bendPoint.id === draggingId
+                ? { ...bendPoint, x: flowPosition.x, y: flowPosition.y }
+                : bendPoint,
+        );
+        onPointsChange(newBendPoints);
+    }
+
+</script>
+
+<g>
+    {#each inactiveBendPoints as inactivePoint (inactivePoint.insertionIndex)}
+        <circle
+            class="bend-point-handle nodrag nopan cursor-pointer fill-blue opacity-50"
+            role="button"
+            aria-label="Add bend point"
+            tabindex="-1"
+            data-edge-id={edgeId}
+            cx={inactivePoint.x}
+            cy={inactivePoint.y}
+            r="7"
+            style="pointer-events: all;"
+            onpointerdown={e =>
+                activateInactivePoint(inactivePoint.insertionIndex, e)}
+        />
+    {/each}
+
+    {#each bendPoints as bendPoint (bendPoint.id)}
+        <circle
+            class="bend-point-handle nodrag nopan cursor-grab fill-blue stroke-white stroke-[1.5]"
+            role="button"
+            aria-label="Move bend point"
+            tabindex="-1"
+            data-edge-id={edgeId}
+            cx={bendPoint.x}
+            cy={bendPoint.y}
+            r="8"
+            style="pointer-events: all;"
+            onpointerdown={e => beginDrag(bendPoint.id, e)}
+        />
+    {/each}
+</g>
+
+<style>
+    .bend-point-handle:focus,
+    .bend-point-handle:focus-visible {
+        outline: none;
+    }
+</style>
diff --git a/frontend/src/lib/rendering/svelteflow/components/edge/edgeUtils.ts b/frontend/src/lib/rendering/svelteflow/components/edge/edgeUtils.ts
new file mode 100644
index 00000000..55aaadc6
--- /dev/null
+++ b/frontend/src/lib/rendering/svelteflow/components/edge/edgeUtils.ts
@@ -0,0 +1,267 @@
+/*
+ *    Copyright (c) 2024-2026 SOPTIM AG
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ *
+ */
+
+import { type InternalNode } from "@xyflow/svelte";
+
+export interface BendPoint {
+    id: string;
+    x: number;
+    y: number;
+}
+
+export interface InactiveBendPoint {
+    x: number;
+    y: number;
+    /** Index in the bendPoints array where this point would be inserted when activated. */
+    insertionIndex: number;
+}
+
+/**
+ * Calculates the intersection point between a line (from the target to the node center)
+ * and the border of the intersection node. Used to determine edge start and end points.
+ * This and the following methods are adapted from the SvelteFlow "Easy Connect" example.
+ * See: https://svelteflow.dev/examples/nodes/easy-connect
+ */
+function getNodeIntersection(
+    intersectionNode: InternalNode,
+    targetNode: InternalNode,
+    offsetY: number = 0,
+) {
+    const intersectionPos = intersectionNode.internals.positionAbsolute || {
+        x: 0,
+        y: 0,
+    };
+    const targetPos = targetNode.internals.positionAbsolute || { x: 0, y: 0 };
+
+    const w = (intersectionNode.measured.width ?? 0) / 2;
+    const h = (intersectionNode.measured.height ?? 0) / 2;
+
+    const x2 = intersectionPos.x + w;
+    const y2 = intersectionPos.y + h;
+    const x1 = targetPos.x + (targetNode.measured.width ?? 0) / 2;
+    const y1 = targetPos.y + (targetNode.measured.height ?? 0) / 2 + offsetY;
+
+    const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
+    const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
+
+    const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
+    const xx3 = a * xx1;
+    const yy3 = a * yy1;
+
+    return {
+        x: w * (xx3 + yy3) + x2,
+        y: h * (-xx3 + yy3) + y2,
+    };
+}
+
+/**
+ * Returns all parameters needed to render an edge and its labels.
+ * Contains the start/end points of the edge as well as the calculated label positions.
+ *
+ * When bend points are provided, the source endpoint aims at the first bend point
+ * and the target endpoint aims at the last bend point, so the edge docks correctly
+ * on the node borders facing its actual routing instead of the opposite node.
+ */
+export function getEdgeParams(
+    source: InternalNode,
+    target: InternalNode,
+    offsetY: number = 0,
+    bendPoints: { x: number; y: number }[] = [],
+) {
+    const sourceAim =
+        bendPoints.length > 0 ? makePointNode(bendPoints[0]) : target;
+    const targetAim =
+        bendPoints.length > 0
+            ? makePointNode(bendPoints[bendPoints.length - 1])
+            : source;
+
+    const sourceIntersection = getNodeIntersection(source, sourceAim);
+    const targetIntersection = getNodeIntersection(target, targetAim, offsetY);
+
+    const startAim =
+        bendPoints.length > 0
+            ? bendPoints[0]
+            : { x: targetIntersection.x, y: targetIntersection.y };
+    const endAim =
+        bendPoints.length > 0
+            ? bendPoints[bendPoints.length - 1]
+            : { x: sourceIntersection.x, y: sourceIntersection.y };
+
+    const startOffset = getSingleLabelOffset(
+        sourceIntersection.x,
+        sourceIntersection.y,
+        startAim.x,
+        startAim.y,
+    );
+    const endOffset = getSingleLabelOffset(
+        targetIntersection.x,
+        targetIntersection.y,
+        endAim.x,
+        endAim.y,
+    );
+
+    return {
+        sx: sourceIntersection.x,
+        sy: sourceIntersection.y,
+        tx: targetIntersection.x,
+        ty: targetIntersection.y,
+        startX: startOffset.x,
+        startY: startOffset.y,
+        endX: endOffset.x,
+        endY: endOffset.y,
+    };
+}
+
+/**
+ * Wraps a plain point as a minimal InternalNode-like object so it can be used
+ * as an "aim" target in getNodeIntersection. The point acts as a zero-size node
+ * centered exactly on the given coordinates.
+ */
+function makePointNode(point: { x: number; y: number }): InternalNode {
+    return {
+        internals: { positionAbsolute: { x: point.x, y: point.y } },
+        measured: { width: 0, height: 0 },
+    } as unknown as InternalNode;
+}
+
+/**
+ * Builds a direct (diagonal) polyline SVG path through the given ordered points.
+ * The points array must already include the source endpoint first and the
+ * target endpoint last, with any bend points in between.
+ */
+export function getPolylinePath(points: { x: number; y: number }[]): string {
+    if (points.length < 2) return "";
+    const [start, ...rest] = points;
+    const segments = rest.map(p => `L ${p.x} ${p.y}`).join(" ");
+    return `M ${start.x} ${start.y} ${segments}`;
+}
+
+/**
+ * Computes the midpoint of every segment in the given ordered point list.
+ * These are the inactive bend points shown as insertion hints on a selected edge.
+ * `points` must include source first and target last.
+ */
+export function getInactiveBendPoints(
+    points: { x: number; y: number }[],
+): InactiveBendPoint[] {
+    const inactiveBendPoints: InactiveBendPoint[] = [];
+    for (let i = 0; i < points.length - 1; i++) {
+        inactiveBendPoints.push({
+            x: (points[i].x + points[i + 1].x) / 2,
+            y: (points[i].y + points[i + 1].y) / 2,
+            insertionIndex: i,
+        });
+    }
+    return inactiveBendPoints;
+}
+
+/**
+ * Finds the index in the bend points array at which a new point should be
+ * inserted so that it lands on the segment closest to the given position.
+ *
+ * `orderedPoints` must be the full ordered list [source, ...bendPoints, target].
+ * The returned index is relative to the bendPoints array (source excluded),
+ * i.e. inserting at that index in bendPoints places the new point on the
+ * closest segment.
+ */
+export function getClosestSegmentInsertionIndex(
+    orderedPoints: { x: number; y: number }[],
+    position: { x: number; y: number },
+): number {
+    let bestIndex = 0;
+    let bestDistance = Infinity;
+
+    for (let i = 0; i < orderedPoints.length - 1; i++) {
+        const distance = distanceToSegment(
+            position,
+            orderedPoints[i],
+            orderedPoints[i + 1],
+        );
+        if (distance < bestDistance) {
+            bestDistance = distance;
+            bestIndex = i;
+        }
+    }
+
+    return bestIndex;
+}
+
+/**
+ * Returns the shortest distance from a point to a line segment.
+ */
+function distanceToSegment(
+    point: { x: number; y: number },
+    segmentStart: { x: number; y: number },
+    segmentEnd: { x: number; y: number },
+): number {
+    const dx = segmentEnd.x - segmentStart.x;
+    const dy = segmentEnd.y - segmentStart.y;
+    const lengthSquared = dx * dx + dy * dy;
+
+    if (lengthSquared === 0) {
+        return Math.hypot(point.x - segmentStart.x, point.y - segmentStart.y);
+    }
+
+    let t =
+        ((point.x - segmentStart.x) * dx + (point.y - segmentStart.y) * dy) /
+        lengthSquared;
+    t = Math.max(0, Math.min(1, t));
+
+    const projX = segmentStart.x + t * dx;
+    const projY = segmentStart.y + t * dy;
+    return Math.hypot(point.x - projX, point.y - projY);
+}
+
+/**
+ * Calculates the offset for a single label based on the direction of the
+ * segment it belongs to. The label is pushed a bit along the segment (away
+ * from the node) and a bit perpendicular to it, so it sits next to the line.
+ */
+function getSingleLabelOffset(
+    fromX: number,
+    fromY: number,
+    towardX: number,
+    towardY: number,
+) {
+    const ALONG_EDGE_DISTANCE = 20;
+    const PERPENDICULAR_DISTANCE = 14;
+
+    const dx = towardX - fromX;
+    const dy = towardY - fromY;
+    const length = Math.sqrt(dx * dx + dy * dy) || 1;
+
+    const normDx = dx / length;
+    const normDy = dy / length;
+
+    const angle = Math.atan2(-dy, dx) * (180 / Math.PI);
+    const normalizedAngle = (angle + 360) % 360;
+
+    const labelOnLeft =
+        (normalizedAngle >= 90 && normalizedAngle < 180) ||
+        normalizedAngle >= 270;
+    const side = labelOnLeft ? 1 : -1;
+
+    const alongX = normDx * ALONG_EDGE_DISTANCE;
+    const alongY = normDy * ALONG_EDGE_DISTANCE;
+    const perpX = -normDy * PERPENDICULAR_DISTANCE * side;
+    const perpY = normDx * PERPENDICULAR_DISTANCE * side;
+
+    return {
+        x: alongX + perpX,
+        y: alongY + perpY,
+    };
+}
\ No newline at end of file
diff --git a/frontend/src/lib/rendering/svelteflow/interaction/bendPointOperations.js b/frontend/src/lib/rendering/svelteflow/interaction/bendPointOperations.js
new file mode 100644
index 00000000..c5d685a1
--- /dev/null
+++ b/frontend/src/lib/rendering/svelteflow/interaction/bendPointOperations.js
@@ -0,0 +1,64 @@
+/*
+ *    Copyright (c) 2024-2026 SOPTIM AG
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ *
+ */
+
+export const MAX_BEND_POINTS_PER_EDGE = 20;
+
+/**
+ * Returns the bend points of an edge, or an empty array if none exist.
+ */
+export function getBendPoints(edge) {
+    return edge?.data?.bendPoints ?? [];
+}
+
+/**
+ * Returns a new bend points array with a new point inserted at the given index.
+ */
+export function insertBendPointAt(bendPoints, index, point) {
+    const newBendPoints = [...bendPoints];
+    newBendPoints.splice(index, 0, point);
+    return newBendPoints;
+}
+
+/**
+ * Returns a new bend points array without the point with the given id.
+ */
+export function removeBendPoint(bendPoints, pointId) {
+    return bendPoints.filter(bp => bp.id !== pointId);
+}
+
+/**
+ * Creates a fresh bend point object at the given position.
+ */
+export function createBendPoint(x, y) {
+    return { id: crypto.randomUUID(), x, y };
+}
+
+/**
+ * Finds the first active bend point within the given hit radius of a position.
+ * Returns the bend point or null. Used to decide whether a click on an edge
+ * targets an existing bend point, even when the bend points are not rendered.
+ */
+export function findBendPointAtPosition(bendPoints, position, hitRadius) {
+    for (const bp of bendPoints) {
+        const dx = bp.x - position.x;
+        const dy = bp.y - position.y;
+        if (Math.hypot(dx, dy) <= hitRadius) {
+            return bp;
+        }
+    }
+    return null;
+}
diff --git a/frontend/src/lib/rendering/svelteflow/interaction/contextMenus.svelte.js b/frontend/src/lib/rendering/svelteflow/interaction/contextMenus.svelte.js
index 6dbf0804..8b3ff653 100644
--- a/frontend/src/lib/rendering/svelteflow/interaction/contextMenus.svelte.js
+++ b/frontend/src/lib/rendering/svelteflow/interaction/contextMenus.svelte.js
@@ -17,17 +17,30 @@
 
 import { editorState, multiSelectState } from "$lib/sharedState.svelte.js";
 
+import {
+    findBendPointAtPosition,
+    getBendPoints,
+} from "./bendPointOperations.js";
+
+/** Base hit radius (in screen pixels) for detecting a bend point under the cursor. */
+const BEND_POINT_HIT_RADIUS_PX = 10;
+
 export class ContextMenuController {
     #paneRequest = $state(null);
     #classRequest = $state(null);
+    #edgeRequest = $state(null);
     #contextMenuClass = $state(null);
 
     #getSvelteFlow;
     #getIsReadOnly;
+    #getEdges;
+    #selectEdge;
 
-    constructor({ getSvelteFlow, getIsReadOnly }) {
+    constructor({ getSvelteFlow, getIsReadOnly, getEdges, selectEdge }) {
         this.#getSvelteFlow = getSvelteFlow;
         this.#getIsReadOnly = getIsReadOnly;
+        this.#getEdges = getEdges ?? (() => []);
+        this.#selectEdge = selectEdge ?? (() => {});
     }
 
     get paneRequest() {
@@ -38,6 +51,10 @@ export class ContextMenuController {
         return this.#classRequest;
     }
 
+    get edgeRequest() {
+        return this.#edgeRequest;
+    }
+
     get contextMenuClass() {
         return this.#contextMenuClass;
     }
@@ -45,6 +62,7 @@ export class ContextMenuController {
     close() {
         this.#paneRequest = null;
         this.#classRequest = null;
+        this.#edgeRequest = null;
     }
 
     #consumeEvent(event) {
@@ -90,8 +108,46 @@ export class ContextMenuController {
         };
     }
 
-    handleEdgeContextMenu({ event }) {
+    handleEdgeContextMenu({ event, edge }) {
         this.#consumeEvent(event);
+        if (this.#getIsReadOnly()) {
+            return;
+        }
+
+        const edgeId = edge?.id;
+        if (!edgeId) {
+            return;
+        }
+
+        this.#selectEdge(edgeId);
+
+        const svelteFlow = this.#getSvelteFlow();
+        const flowPosition = svelteFlow
+            ? svelteFlow.screenToFlowPosition(
+                  { x: event.clientX, y: event.clientY },
+                  { snapToGrid: false },
+              )
+            : { x: 0, y: 0 };
+
+        const currentEdge = this.#getEdges().find(e => e.id === edgeId) ?? edge;
+        const bendPoints = getBendPoints(currentEdge);
+
+        const zoom = svelteFlow?.getViewport?.().zoom ?? 1;
+        const hitRadius = BEND_POINT_HIT_RADIUS_PX / (zoom || 1);
+        const hitBendPoint = findBendPointAtPosition(
+            bendPoints,
+            flowPosition,
+            hitRadius,
+        );
+
+        this.#edgeRequest = {
+            x: event.clientX,
+            y: event.clientY,
+            edgeId,
+            flowPosition,
+            hitBendPointId: hitBendPoint?.id ?? null,
+            bendPointCount: bendPoints.length,
+        };
     }
 
     handleNodeContextMenu({ event, node }) {
diff --git a/frontend/src/lib/rendering/svelteflow/svelteFlowWrapper.svelte b/frontend/src/lib/rendering/svelteflow/svelteFlowWrapper.svelte
index c3016d60..abdea2da 100644
--- a/frontend/src/lib/rendering/svelteflow/svelteFlowWrapper.svelte
+++ b/frontend/src/lib/rendering/svelteflow/svelteFlowWrapper.svelte
@@ -29,22 +29,33 @@
     import { BackendConnection } from "$lib/api/backend.js";
     import { PUBLIC_BACKEND_URL } from "$lib/config/runtime";
     import { eventStack } from "$lib/eventhandling/closeEventManager.svelte.js";
+    import SvelteFlowEdgeContextMenu from "$lib/rendering/svelteflow/components/contextmenu/SvelteFlowEdgeContextMenu.svelte";
     import {
         editorState,
         forceReloadTrigger,
         multiSelectState,
     } from "$lib/sharedState.svelte.js";
 
-    import AssociationEdge from "./components/AssociationEdge.svelte";
     import ClassNode from "./components/ClassNode.svelte";
-    import EdgeMarkers from "./components/EdgeMarkers.svelte";
-    import InheritanceEdge from "./components/InheritanceEdge.svelte";
-    import SvelteFlowClassContextMenu from "./components/SvelteFlowClassContextMenu.svelte";
-    import SvelteFlowPaneContextMenu from "./components/SvelteFlowPaneContextMenu.svelte";
+    import SvelteFlowClassContextMenu from "./components/contextmenu/SvelteFlowClassContextMenu.svelte";
+    import SvelteFlowPaneContextMenu from "./components/contextmenu/SvelteFlowPaneContextMenu.svelte";
+    import AssociationEdge from "./components/edge/AssociationEdge.svelte";
+    import EdgeMarkers from "./components/edge/EdgeMarkers.svelte";
+    import {
+        getEdgeParams,
+        getClosestSegmentInsertionIndex,
+    } from "./components/edge/edgeUtils.ts";
+    import InheritanceEdge from "./components/edge/InheritanceEdge.svelte";
     import {
         decorateEdges,
         hasDefaultNodeLayout,
     } from "./diagram/diagramElements.js";
+    import {
+        createBendPoint,
+        insertBendPointAt,
+        removeBendPoint,
+        MAX_BEND_POINTS_PER_EDGE,
+    } from "./interaction/bendPointOperations.js";
     import { ContextMenuController } from "./interaction/contextMenus.svelte.js";
     import { DiagramSelectionController } from "./interaction/diagramSelection.svelte.js";
     import { NodeOrderController } from "./interaction/nodeOrder.svelte.js";
@@ -77,6 +88,8 @@
     const contextMenus = new ContextMenuController({
         getSvelteFlow: () => svelteFlowAPI?.svelteFlow,
         getIsReadOnly: () => isDatasetReadOnly,
+        getEdges: () => edges,
+        selectEdge: edgeId => selectOnlyEdge(edgeId),
     });
 
     const pan = new PanController({
@@ -192,6 +205,24 @@
 
     function onContainerContextMenu(event) {
         pan.handleContainerContextMenuCapture(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        routeBendPointContextMenu(event);
+    }
+
+    function routeBendPointContextMenu(event) {
+        const target = event.target;
+        if (!(target instanceof Element)) return;
+
+        const bendPointCircle = target.closest("[data-edge-id]");
+        if (!bendPointCircle) return;
+
+        const edgeId = bendPointCircle.getAttribute("data-edge-id");
+        const edge = edges.find(e => e.id === edgeId);
+        if (!edge) return;
+
+        contextMenus.handleEdgeContextMenu({ event, edge });
     }
 
     function applyAutoLayoutIfNeeded() {
@@ -354,6 +385,75 @@
             );
         }
     }
+    function selectOnlyEdge(edgeId) {
+        edges = edges.map(edge => ({
+            ...edge,
+            selected: edge.id === edgeId,
+        }));
+    }
+
+    function updateEdgeBendPoints(edgeId, newBendPoints) {
+        edges = edges.map(edge =>
+            edge.id === edgeId
+                ? {
+                      ...edge,
+                      data: { ...edge.data, bendPoints: newBendPoints },
+                  }
+                : edge,
+        );
+    }
+
+    function edgeEndpoints(edge, bendPoints) {
+        const svelteFlow = svelteFlowAPI?.svelteFlow;
+        if (!svelteFlow?.getInternalNode) return null;
+        const sourceNode = svelteFlow.getInternalNode(edge.source);
+        const targetNode = svelteFlow.getInternalNode(edge.target);
+        if (!sourceNode || !targetNode) return null;
+        const params = getEdgeParams(sourceNode, targetNode, 0, bendPoints);
+        return {
+            source: { x: params.sx, y: params.sy },
+            target: { x: params.tx, y: params.ty },
+        };
+    }
+
+    function handleEdgeAddBendPoint({ edgeId, flowPosition }) {
+        const edge = edges.find(e => e.id === edgeId);
+        if (!edge) return;
+        const bendPoints = edge.data?.bendPoints ?? [];
+        if (bendPoints.length >= MAX_BEND_POINTS_PER_EDGE) return;
+
+        const endpoints = edgeEndpoints(edge, bendPoints);
+        let insertionIndex = bendPoints.length;
+        if (endpoints) {
+            const orderedPoints = [
+                endpoints.source,
+                ...bendPoints,
+                endpoints.target,
+            ];
+            insertionIndex = getClosestSegmentInsertionIndex(
+                orderedPoints,
+                flowPosition,
+            );
+        }
+
+        const newBendPoints = insertBendPointAt(
+            bendPoints,
+            insertionIndex,
+            createBendPoint(flowPosition.x, flowPosition.y),
+        );
+        updateEdgeBendPoints(edgeId, newBendPoints);
+    }
+
+    function handleEdgeDeleteBendPoint({ edgeId, bendPointId }) {
+        const edge = edges.find(e => e.id === edgeId);
+        if (!edge) return;
+        const next = removeBendPoint(edge.data?.bendPoints ?? [], bendPointId);
+        updateEdgeBendPoints(edgeId, next);
+    }
+
+    function handleEdgeClearBendPoints({ edgeId }) {
+        updateEdgeBendPoints(edgeId, []);
+    }
 
     export async function applyELKLayout() {
         if (!isLoading) isLoading = true;
@@ -414,7 +514,7 @@
         selectionKey={"Shift"}
         connectionMode={"loose"}
         multiSelectionKey={"Shift"}
-        deleteKeyCode={null}
+        deleteKey={null}
         minZoom={0.1}
         maxZoom={5}
     >
@@ -444,6 +544,14 @@
         onSetLayer={e => nodeOrderCtrl.setLayer(e)}
         onPersistLayer={e => nodeOrderCtrl.persistLayer(e)}
     />
+    <SvelteFlowEdgeContextMenu
+        request={contextMenus.edgeRequest}
+        disabled={isDatasetReadOnly || !contextMenus.edgeRequest}
+        onClose={() => contextMenus.close()}
+        onAddBendPoint={handleEdgeAddBendPoint}
+        onDeleteBendPoint={handleEdgeDeleteBendPoint}
+        onClearBendPoints={handleEdgeClearBendPoints}
+    />
 </div>
 
 <style>
diff --git a/frontend/src/routes/mainpage/renderingWrapper.svelte b/frontend/src/routes/mainpage/renderingWrapper.svelte
index 9296fc43..046a54d0 100644
--- a/frontend/src/routes/mainpage/renderingWrapper.svelte
+++ b/frontend/src/routes/mainpage/renderingWrapper.svelte
@@ -147,7 +147,118 @@
                 isLoading = false;
             } else {
                 const parsedResponse = JSON.parse(responseText);
-                response = parsedResponse;
+                //TODO TESTDATEN FÜR PROTOTYPING, ENTFERNE SPÄTER
+                //response = parsedResponse;
+                response = {
+                    edges: [
+                        {
+                            data: {
+                                color: null,
+                                fromMultiplicity: "1",
+                                graphUri: null,
+                                toMultiplicity: "1",
+                                useFromAssociation: true,
+                                useToAssociation: true,
+                                bendPoints: [
+                                    {
+                                        id: "e104239a-681f-4663-8c34-718957fe8120",
+                                        x: 200,
+                                        y: 200,
+                                    },
+                                ],
+                            },
+                            id: "26aa92ce-8946-4321-a406-fa95b27ebf68",
+                            source: "867c72bc-3abf-4f96-b816-4a528d1cd99e",
+                            target: "88ca000e-28c2-4f68-8ecc-f7bf34d77f75",
+                            type: "association",
+                            zIndex: -1,
+                        },
+                        {
+                            data: {
+                                color: null,
+                                fromMultiplicity: "2",
+                                graphUri: null,
+                                toMultiplicity: "2",
+                                useFromAssociation: true,
+                                useToAssociation: true,
+                                bendPoints: [
+                                    {
+                                        id: "e104239a-681f-4663-8c34-718957fe8120",
+                                        x: -250,
+                                        y: 400,
+                                    },
+                                    {
+                                        id: "4d86da93-3306-481b-a75e-a0dd4ac7aadc",
+                                        x: -300,
+                                        y: 300,
+                                    },
+                                ],
+                            },
+                            id: "0034d8f0-ae20-47ca-8ebe-9da6272859ec",
+                            source: "867c72bc-3abf-4f96-b816-4a528d1cd99e",
+                            target: "9e864145-9510-4ab3-8576-b2f154e66fe0",
+                            type: "association",
+                            zIndex: -1,
+                        },
+                    ],
+                    format: "SVELTEFLOW",
+                    nodes: [
+                        {
+                            data: {
+                                attributes: [],
+                                belongsToCategory: "DiagramLayout",
+                                enumEntries: [],
+                                graphUri:
+                                    "http://graph#DiagramLayoutProfileRDFSAugmented_v2_4_15_4Sep2020",
+                                label: "A",
+                                stereotypes: [],
+                            },
+                            id: "867c72bc-3abf-4f96-b816-4a528d1cd99e",
+                            position: {
+                                x: 12,
+                                y: 467,
+                                z: 1,
+                            },
+                            type: "class",
+                        },
+                        {
+                            data: {
+                                attributes: [],
+                                belongsToCategory: "DiagramLayout",
+                                enumEntries: [],
+                                graphUri:
+                                    "http://graph#DiagramLayoutProfileRDFSAugmented_v2_4_15_4Sep2020",
+                                label: "B",
+                                stereotypes: [],
+                            },
+                            id: "88ca000e-28c2-4f68-8ecc-f7bf34d77f75",
+                            position: {
+                                x: 355.5,
+                                y: 100,
+                                z: 1,
+                            },
+                            type: "class",
+                        },
+                        {
+                            data: {
+                                attributes: [],
+                                belongsToCategory: "DiagramLayout",
+                                enumEntries: [],
+                                graphUri:
+                                    "http://graph#DiagramLayoutProfileRDFSAugmented_v2_4_15_4Sep2020",
+                                label: "C",
+                                stereotypes: [],
+                            },
+                            id: "9e864145-9510-4ab3-8576-b2f154e66fe0",
+                            position: {
+                                x: -355.5,
+                                y: 100,
+                                z: 1,
+                            },
+                            type: "class",
+                        },
+                    ],
+                };
                 renderingFormat = parsedResponse.format;
                 displayDiagram = true;
             }

From 728370a2437bba412c87a08577023dcde8c423ff Mon Sep 17 00:00:00 2001
From: Haider <haider.abbas@soptim.de>
Date: Wed, 15 Jul 2026 12:17:45 +0200
Subject: [PATCH 3/5] feat(multi-segment-edges): new fitView which respects
 bend point positions

---
 .../svelteflow/svelteFlowWrapper.svelte       | 88 +++++++++++++++++--
 .../routes/mainpage/renderingWrapper.svelte   |  4 +-
 2 files changed, 84 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/rendering/svelteflow/svelteFlowWrapper.svelte b/frontend/src/lib/rendering/svelteflow/svelteFlowWrapper.svelte
index abdea2da..12044c6b 100644
--- a/frontend/src/lib/rendering/svelteflow/svelteFlowWrapper.svelte
+++ b/frontend/src/lib/rendering/svelteflow/svelteFlowWrapper.svelte
@@ -20,6 +20,7 @@
     import {
         Background,
         SvelteFlow,
+        useEdges,
         useNodes,
         useNodesInitialized,
         useSvelteFlow,
@@ -116,14 +117,16 @@
 
     let selectionZKey = "";
 
-    let nodesInit = useNodesInitialized();
+    let nodesInitialized = useNodesInitialized();
     let layouted = $state(false);
 
     let selectionZFrame = null;
     let boxSelecting = false;
+
+    let hasFittedInitially = false;
     let hasDefaultLayout = $derived(hasDefaultNodeLayout(nodes));
     let applyLayout = $derived(
-        nodesInit.current && !layouted && hasDefaultLayout,
+        nodesInitialized.current && !layouted && hasDefaultLayout,
     );
 
     $effect(() => {
@@ -174,6 +177,8 @@
         svelteFlowAPI = {
             svelteFlow: useSvelteFlow(),
             nodes: useNodes(),
+            edges: useEdges(),
+            useNodesInitialized: useNodesInitialized(),
         };
 
         const el = containerEl;
@@ -194,6 +199,10 @@
         }
     });
 
+    /*TODO SEHR WICHTIG: AM ENDE AUFRÄUMEN
+        bend point code vllt auslagern, andere sachen, etc
+        es muss ja nicht alles hier im svelteFlowWrapper liegen*/
+
     function onContainerPointerDown(event) {
         selection.notifyPointerDown();
         pan.handleContainerPointerDown(event);
@@ -224,13 +233,21 @@
 
         contextMenus.handleEdgeContextMenu({ event, edge });
     }
-
     function applyAutoLayoutIfNeeded() {
         if (applyLayout) {
             applyELKLayout();
         } else if (!hasDefaultLayout) {
             isLoading = false;
+            fitInitiallyIfNeeded();
+        }
+    }
+
+    function fitInitiallyIfNeeded() {
+        if (hasFittedInitially || !nodesInitialized.current) {
+            return;
         }
+        hasFittedInitially = true;
+        untrack(() => fitViewIncludingBendPoints({ duration: 0 }));
     }
 
     async function refreshReadOnlyState() {
@@ -312,6 +329,7 @@
 
     function resetDiagramSyncState(hasDefaultLayoutAfterSync) {
         layouted = false;
+        hasFittedInitially = false;
 
         // Keep the loading state active until persisted positions or ELK layout
         if (!hasDefaultLayoutAfterSync) {
@@ -321,7 +339,7 @@
 
     function focusRequestedClassInDiagram() {
         const focusClassUUID = editorState.focusedClassUUID.getValue();
-        if (!focusClassUUID || !nodesInit.current) {
+        if (!focusClassUUID || !nodesInitialized.current) {
             return;
         }
 
@@ -461,9 +479,68 @@
         const layoutedNodes = await getLayoutedNodes(nodes, edges);
         nodes = [...layoutedNodes];
         updateNodePositions(nodes);
-        await svelteFlowAPI.svelteFlow.fitView();
+        await fitViewIncludingBendPoints();
         isLoading = false;
     }
+
+    export async function fitViewIncludingBendPoints({ duration = 400 } = {}) {
+        const bounds = getDiagramBounds();
+
+        if (!bounds) {
+            await svelteFlowAPI.svelteFlow.fitView({ duration });
+            return;
+        }
+
+        return svelteFlowAPI.svelteFlow.fitBounds(bounds, {
+            padding: 0.1, //matches the same padding of SvelteFlows fitView
+            duration,
+        });
+    }
+
+    function getDiagramBounds() {
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+
+        for (const node of nodes) {
+            const internalNode = svelteFlowAPI.svelteFlow.getInternalNode(
+                node.id,
+            );
+            const position =
+                internalNode?.internals?.positionAbsolute ?? node.position;
+            const width = internalNode?.measured?.width ?? 0;
+            const height = internalNode?.measured?.height ?? 0;
+            minX = Math.min(minX, position.x);
+            minY = Math.min(minY, position.y);
+            maxX = Math.max(maxX, position.x + width);
+            maxY = Math.max(maxY, position.y + height);
+        }
+
+        for (const edge of edges) {
+            for (const bendPoint of edge.data?.bendPoints ?? []) {
+                minX = Math.min(minX, bendPoint.x);
+                minY = Math.min(minY, bendPoint.y);
+                maxX = Math.max(maxX, bendPoint.x);
+                maxY = Math.max(maxY, bendPoint.y);
+            }
+        }
+        if (
+            !Number.isFinite(minX) ||
+            !Number.isFinite(minY) ||
+            !Number.isFinite(maxX) ||
+            !Number.isFinite(maxY)
+        ) {
+            return null;
+        }
+
+        return {
+            x: minX,
+            y: minY,
+            width: maxX - minX,
+            height: maxY - minY,
+        };
+    }
 </script>
 
 <svelte:window
@@ -482,7 +559,6 @@
         {nodeTypes}
         {edgeTypes}
         nodesDraggable={!isDatasetReadOnly && !pan.shiftHeld && !pan.ctrlHeld}
-        fitView
         elementsSelectable={true}
         nodesFocusable={false}
         zIndexMode={"manual"}
diff --git a/frontend/src/routes/mainpage/renderingWrapper.svelte b/frontend/src/routes/mainpage/renderingWrapper.svelte
index 046a54d0..92743dfc 100644
--- a/frontend/src/routes/mainpage/renderingWrapper.svelte
+++ b/frontend/src/routes/mainpage/renderingWrapper.svelte
@@ -361,7 +361,7 @@
         if (renderingFormat === MERMAID_FORMAT) {
             mermaidWrapper.resetTransform();
         } else if (renderingFormat === SVELTEFLOW_FORMAT) {
-            svelteFlowAPI.svelteFlow.fitView();
+            svelteFlowWrapper.fitViewIncludingBendPoints();
         }
     }
 </script>
@@ -378,7 +378,7 @@
                             variant="default"
                             callOnClick={() => handleResetView()}
                         >
-                            reset view
+                            fit view
                         </ButtonControl>
                     </div>
                     {#if editorState.selectedDiagram.getProperty("type") === DiagramType.PACKAGE}

From 45bf554099801fcd4d119e89db0b20b4179e1e54 Mon Sep 17 00:00:00 2001
From: Haider <haider.abbas@soptim.de>
Date: Wed, 15 Jul 2026 15:16:31 +0200
Subject: [PATCH 4/5] feat(multi-segment-edges): polyline corner smoothing,
 configurable by user

---
 .../lib/components/CheckBoxEditControl.svelte |  6 +-
 .../src/lib/components/TextEditControl.svelte |  4 +-
 .../validity-rules/validityFunctions.js       | 26 +++++
 .../components/edge/AssociationEdge.svelte    | 22 ++++-
 .../components/edge/EdgeBendPoints.svelte     |  1 -
 .../svelteflow/components/edge/edgeUtils.ts   | 94 ++++++++++++++++++-
 frontend/src/routes/UserSettingDialog.svelte  | 42 ++++++++-
 7 files changed, 185 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/CheckBoxEditControl.svelte b/frontend/src/lib/components/CheckBoxEditControl.svelte
index 717be685..d2991984 100644
--- a/frontend/src/lib/components/CheckBoxEditControl.svelte
+++ b/frontend/src/lib/components/CheckBoxEditControl.svelte
@@ -24,6 +24,7 @@
         disabled = false,
         labelFirst = true,
         readonly = false,
+        title = undefined,
     } = $props();
 
     let uuid = crypto.randomUUID();
@@ -31,13 +32,14 @@
 
 <div>
     {#if labelFirst && label}
-        <label for={uuid} class=" text-default-text">
+        <label for={uuid} class=" text-default-text" {title}>
             {label}
         </label>
     {/if}
     <input
         type="checkbox"
         id={uuid}
+        {title}
         class="text-button-default-text bg-default-background checked:bg-button-default-background h-4 w-4
            rounded
            border-none disabled:cursor-not-allowed"
@@ -52,7 +54,7 @@
         disabled={disabled || readonly}
     />
     {#if !labelFirst && label}
-        <label for={uuid} class="">
+        <label for={uuid} class="" {title}>
             {label}
         </label>
     {/if}
diff --git a/frontend/src/lib/components/TextEditControl.svelte b/frontend/src/lib/components/TextEditControl.svelte
index 0e318ebb..e6815ef6 100644
--- a/frontend/src/lib/components/TextEditControl.svelte
+++ b/frontend/src/lib/components/TextEditControl.svelte
@@ -29,11 +29,12 @@
         highlight = false,
         warn = false,
         buttons = [],
+        title = undefined,
     } = $props();
 </script>
 
 <div class="text-default-text flex h-full w-full flex-col">
-    <label for={id}>
+    <label for={id} {title}>
         {#if label}
             {label}
         {/if}
@@ -47,6 +48,7 @@
         {readonly}
         {highlight}
         {warn}
+        {title}
         type="text"
         {buttons}
     />
diff --git a/frontend/src/lib/models/reactive/validity-rules/validityFunctions.js b/frontend/src/lib/models/reactive/validity-rules/validityFunctions.js
index 43c15565..f4806380 100644
--- a/frontend/src/lib/models/reactive/validity-rules/validityFunctions.js
+++ b/frontend/src/lib/models/reactive/validity-rules/validityFunctions.js
@@ -434,3 +434,29 @@ export function hasNoSpaces(text) {
     }
     return violations;
 }
+
+/**
+ * Validates the corner rounding factor entered as free text.
+ * The value is a percentage in [0, 100]. Two kinds of violations are possible:
+ *  - the input is not a number at all (invalid format)
+ *  - the number lies outside the allowed [0, 100] range (out of boundaries)
+ * @param {string|number} value - the raw input value
+ * @returns {string[]} the violations
+ */
+export function isInvalidCornerRoundingFactor(value) {
+    const violations = [];
+    const raw = typeof value === "number" ? String(value) : (value ?? "");
+    if (raw.trim() === "") {
+        violations.push("must not be empty");
+        return violations;
+    }
+    const parsed = Number(raw);
+    if (Number.isNaN(parsed)) {
+        violations.push("must be a number");
+        return violations;
+    }
+    if (parsed < 0 || parsed > 100) {
+        violations.push("must be between 0 and 100");
+    }
+    return violations;
+}
diff --git a/frontend/src/lib/rendering/svelteflow/components/edge/AssociationEdge.svelte b/frontend/src/lib/rendering/svelteflow/components/edge/AssociationEdge.svelte
index 1fd43aca..3164b0b4 100644
--- a/frontend/src/lib/rendering/svelteflow/components/edge/AssociationEdge.svelte
+++ b/frontend/src/lib/rendering/svelteflow/components/edge/AssociationEdge.svelte
@@ -27,7 +27,11 @@
     import { userSettings } from "$lib/userSettings.svelte.js";
 
     import EdgeBendPoints from "./EdgeBendPoints.svelte";
-    import { getEdgeParams, getPolylinePath } from "./edgeUtils.ts";
+    import {
+        getEdgeParams,
+        getPolylinePath,
+        getRoundedCornerPolylinePath,
+    } from "./edgeUtils.ts";
     let { id, source, target, data, selected } = $props();
     const edges = useEdges();
 
@@ -36,6 +40,12 @@
     let sourceNode = useInternalNode(source);
     let targetNode = useInternalNode(target);
     let bendPoints = $derived(data.bendPoints ?? []);
+    let useRoundedCorners = $derived(
+        userSettings.get("useRoundedEdges", false),
+    );
+    let cornerRoundingFactor = $derived(
+        userSettings.get("cornerRoundingFactor", 50),
+    );
 
     let style = $derived(
         userSettings.get("useColoredPropertiesInMergedView") && data.color
@@ -61,11 +71,17 @@
             return getSelfConnectingPath();
 
         if (bendPoints.length > 0) {
-            return getPolylinePath([
+            const orderedPoints = [
                 { x: edgeParams.sx, y: edgeParams.sy },
                 ...bendPoints,
                 { x: edgeParams.tx, y: edgeParams.ty },
-            ]);
+            ];
+            return useRoundedCorners
+                ? getRoundedCornerPolylinePath(
+                      orderedPoints,
+                      cornerRoundingFactor,
+                  )
+                : getPolylinePath(orderedPoints);
         }
 
         return getStraightPath({
diff --git a/frontend/src/lib/rendering/svelteflow/components/edge/EdgeBendPoints.svelte b/frontend/src/lib/rendering/svelteflow/components/edge/EdgeBendPoints.svelte
index 97b47331..af5a1d28 100644
--- a/frontend/src/lib/rendering/svelteflow/components/edge/EdgeBendPoints.svelte
+++ b/frontend/src/lib/rendering/svelteflow/components/edge/EdgeBendPoints.svelte
@@ -89,7 +89,6 @@
         );
         onPointsChange(newBendPoints);
     }
-
 </script>
 
 <g>
diff --git a/frontend/src/lib/rendering/svelteflow/components/edge/edgeUtils.ts b/frontend/src/lib/rendering/svelteflow/components/edge/edgeUtils.ts
index 55aaadc6..4aa9d37d 100644
--- a/frontend/src/lib/rendering/svelteflow/components/edge/edgeUtils.ts
+++ b/frontend/src/lib/rendering/svelteflow/components/edge/edgeUtils.ts
@@ -17,6 +17,9 @@
 
 import { type InternalNode } from "@xyflow/svelte";
 
+//TODO WICHTIG: AM ENDE HIER AUFRÄUMEN! einmal über alle funktionen gehen, zusammenfassen, aufräumen
+
+//TODO UNBENUTZT! vllt entf?
 export interface BendPoint {
     id: string;
     x: number;
@@ -30,6 +33,13 @@ export interface InactiveBendPoint {
     insertionIndex: number;
 }
 
+/**
+ * The corner rounding factor is exposed to the user as a percentage (0..100).
+ * Even a small geometric factor already produces a strong visual rounding, so
+ * 100 % maps to this maximum effective factor rather than to 1.
+ */
+const MAX_EFFECTIVE_ROUNDING_FACTOR = 0.3;
+
 /**
  * Calculates the intersection point between a line (from the target to the node center)
  * and the border of the intersection node. Used to determine edge start and end points.
@@ -153,7 +163,8 @@ export function getPolylinePath(points: { x: number; y: number }[]): string {
 /**
  * Computes the midpoint of every segment in the given ordered point list.
  * These are the inactive bend points shown as insertion hints on a selected edge.
- * `points` must include source first and target last.
+ * `points` must include source first and target last. Since corner rounding keeps
+ * the segments straight, the plain segment midpoint always lies on the drawn line.
  */
 export function getInactiveBendPoints(
     points: { x: number; y: number }[],
@@ -264,4 +275,83 @@ function getSingleLabelOffset(
         x: alongX + perpX,
         y: alongY + perpY,
     };
-}
\ No newline at end of file
+}
+
+/**
+ * Builds a polyline whose corners at the bend points are rounded off.
+ * The segments themselves stay straight, only each interior corner is replaced
+ * by a quadratic Bézier arc. `points` must include the source endpoint first and
+ * the target endpoint last.
+ *
+ * `roundingPercent` is a value in [0, 100] that controls how far the rounding
+ * reaches into the two adjacent segments: 0 keeps the corner sharp, 100 applies
+ * the maximum rounding. The percentage is mapped onto a small geometric factor
+ * because even minor factors already produce a strong visual rounding.
+ */
+export function getRoundedCornerPolylinePath(
+    points: { x: number; y: number }[],
+    roundingPercent: number = 50,
+): string {
+    if (points.length < 2) return "";
+    if (points.length === 2) {
+        return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
+    }
+
+    const clampedPercent = Math.max(0, Math.min(100, roundingPercent));
+    const clampedFactor =
+        (clampedPercent / 100) * MAX_EFFECTIVE_ROUNDING_FACTOR;
+    let path = `M ${points[0].x} ${points[0].y}`;
+
+    for (let i = 1; i < points.length - 1; i++) {
+        const previous = points[i - 1];
+        const corner = points[i];
+        const next = points[i + 1];
+
+        const reachBefore = cornerReach(previous, corner, clampedFactor);
+        const reachAfter = cornerReach(next, corner, clampedFactor);
+
+        const entry = pointTowards(corner, previous, reachBefore);
+        const exit = pointTowards(corner, next, reachAfter);
+
+        path += ` L ${entry.x} ${entry.y}`;
+        path += ` Q ${corner.x} ${corner.y}, ${exit.x} ${exit.y}`;
+    }
+
+    const last = points[points.length - 1];
+    path += ` L ${last.x} ${last.y}`;
+    return path;
+}
+
+/**
+ * Returns how far the rounding may reach from `corner` towards `neighbour`:
+ * half of the segment length scaled by the rounding factor.
+ */
+function cornerReach(
+    neighbour: { x: number; y: number },
+    corner: { x: number; y: number },
+    roundingFactor: number,
+): number {
+    const segmentLength = Math.hypot(
+        neighbour.x - corner.x,
+        neighbour.y - corner.y,
+    );
+    return (segmentLength / 2) * roundingFactor;
+}
+
+/**
+ * Returns the point that lies `distance` pixels away from `from` in the
+ * direction of `to`.
+ */
+function pointTowards(
+    from: { x: number; y: number },
+    to: { x: number; y: number },
+    distance: number,
+): { x: number; y: number } {
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    const length = Math.hypot(dx, dy) || 1;
+    return {
+        x: from.x + (dx / length) * distance,
+        y: from.y + (dy / length) * distance,
+    };
+}
diff --git a/frontend/src/routes/UserSettingDialog.svelte b/frontend/src/routes/UserSettingDialog.svelte
index 33c7085c..2d7e7604 100644
--- a/frontend/src/routes/UserSettingDialog.svelte
+++ b/frontend/src/routes/UserSettingDialog.svelte
@@ -18,7 +18,10 @@
 <script>
     import { UserSettingsComponents as USC } from "$lib/components/bitsui/usersettings/index.js";
     import CheckBoxEditControl from "$lib/components/CheckBoxEditControl.svelte";
+    import TextEditControl from "$lib/components/TextEditControl.svelte";
+    import ViolationMessages from "$lib/components/ViolationMessages.svelte";
     import ModifyDataDialog from "$lib/dialog/ModifyDataDialog.svelte";
+    import { isInvalidCornerRoundingFactor } from "$lib/models/reactive/validity-rules/validityFunctions.js";
     import { forceReloadTrigger } from "$lib/sharedState.svelte.js";
     import { userSettings } from "$lib/userSettings.svelte.js";
     import { supportedRDFMediaTypes } from "$lib/utils/fileUtils.ts";
@@ -31,6 +34,8 @@
         showPackagePrefix: false,
         useColoredPropertiesInMergedView: true,
         normalizeComments: true,
+        useRoundedEdges: false,
+        cornerRoundingFactor: 50,
     };
 
     let localSettings = $state({});
@@ -39,6 +44,16 @@
         JSON.stringify(localSettings) !== JSON.stringify(savedSettings),
     );
 
+    let cornerRoundingFactorViolations = $derived(
+        localSettings["useRoundedEdges"]
+            ? isInvalidCornerRoundingFactor(
+                  localSettings["cornerRoundingFactor"],
+              )
+            : [],
+    );
+
+    let hasInvalidInput = $derived(cornerRoundingFactorViolations.length > 0);
+
     function onOpen() {
         localSettings = { ...DEFAULT_SETTINGS, ...userSettings.all };
     }
@@ -63,7 +78,7 @@
     saveChanges={save}
     discardChanges={() =>
         (localSettings = { ...DEFAULT_SETTINGS, ...userSettings.all })}
-    hasChanges={isModified}
+    hasChanges={isModified && !hasInvalidInput}
     size="w-1/3"
     title="Settings"
 >
@@ -94,6 +109,31 @@
                 bind:value={localSettings["useColoredPropertiesInMergedView"]}
                 labelFirst={false}
             />
+            <CheckBoxEditControl
+                label="Smoothed edges"
+                bind:value={localSettings["useRoundedEdges"]}
+                labelFirst={false}
+                title={"When enabled, the sharp corners of edges at their bend \n" +
+                    "points are rounded off. The edges stay polylines with \n" +
+                    "straight segments, only the corners are smoothed."}
+            />
+            <div class="flex flex-col gap-1">
+                <TextEditControl
+                    label="Corner rounding (%)"
+                    bind:value={localSettings["cornerRoundingFactor"]}
+                    placeholder="50"
+                    disabled={!localSettings["useRoundedEdges"]}
+                    warn={hasInvalidInput}
+                    title={"Controls how strongly the edge corners are \n" +
+                        "rounded, as a percentage from 0 to 100. \n" +
+                        "0 keeps the corners sharp, 100 applies the maximum \n" +
+                        "rounding. The edges always stay polylines, this only \n" +
+                        "affects how soft the corners at the bend points look."}
+                />
+                <ViolationMessages
+                    violations={cornerRoundingFactorViolations}
+                />
+            </div>
         </USC.Section>
         <USC.Section title="Normalization">
             <CheckBoxEditControl

From 3a69a12ce17939a498020a220849b05366c26dfd Mon Sep 17 00:00:00 2001
From: Haider <haider.abbas@soptim.de>
Date: Wed, 15 Jul 2026 17:00:35 +0200
Subject: [PATCH 5/5] feat(multi-segment-edges): end points for moving the
 docking points to classes of edges

---
 frontend/src/app.css                          |   6 +
 .../SvelteFlowEdgeContextMenu.svelte          |  21 ++-
 .../components/edge/AssociationEdge.svelte    |  27 +++-
 .../components/edge/EdgeBendPoints.svelte     | 139 ++++++++++++++++--
 .../components/edge/EdgeMarkers.svelte        |   8 +-
 .../svelteflow/components/edge/edgeUtils.ts   |  67 +++++++--
 .../interaction/bendPointOperations.js        |  33 +++++
 .../interaction/contextMenus.svelte.js        |   8 +
 .../svelteflow/svelteFlowWrapper.svelte       | 131 +++++++++++++++--
 9 files changed, 390 insertions(+), 50 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index 2eb3d1a5..09e7d6bc 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -83,6 +83,11 @@
 https://tailwindcss.com/docs/colors#using-a-custom-palette
 */
 @theme {
+    /*TODO WICHTIG: SPÄTER DIE RENDERING FARBEN FIXEN:
+       ich mag die variablen hier gerade nicht
+       es sieht sehr chaotisch aus, manche variablen sind doppelt
+       wenigstens für meine Rendering farben fix das mal
+       konkret ist das das blau und grün der bendpoints*/
     --color-*: initial;
     --color-dialog-backlight: rgba(0, 0, 0, 0.5);
 
@@ -161,4 +166,5 @@ https://tailwindcss.com/docs/colors#using-a-custom-palette
     --color-class-node-highlighted: var(--color-border-select);
     --color-class-node-highlighted-secondary: rgba(31, 117, 203, 0.45);
     --color-inheritance-edge: var(--color-soptim-dunkelgrau);
+    --color-green: #22a35a;
 }
diff --git a/frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowEdgeContextMenu.svelte b/frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowEdgeContextMenu.svelte
index 5f2c839b..557cec28 100644
--- a/frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowEdgeContextMenu.svelte
+++ b/frontend/src/lib/rendering/svelteflow/components/contextmenu/SvelteFlowEdgeContextMenu.svelte
@@ -37,6 +37,7 @@
         onClose = () => {},
         onAddBendPoint = () => {},
         onDeleteBendPoint = () => {},
+        onDeleteEndPoint = () => {},
         onClearBendPoints = () => {},
     } = $props();
 
@@ -46,6 +47,7 @@
     let triggerStyle = $derived(getContextMenuTriggerStyle(request));
 
     let onBendPoint = $derived(!!request?.hitBendPointId);
+    let onEndPoint = $derived(!!request?.hitEndPointSide);
     let atLimit = $derived(
         (request?.bendPointCount ?? 0) >= MAX_BEND_POINTS_PER_EDGE,
     );
@@ -81,6 +83,15 @@
         onClose();
     }
 
+    function deleteEndPoint() {
+        if (!request?.hitEndPointSide) return;
+        onDeleteEndPoint({
+            edgeId: request.edgeId,
+            side: request.hitEndPointSide,
+        });
+        onClose();
+    }
+
     function clearBendPoints() {
         if (!request) return;
         onClearBendPoints({ edgeId: request.edgeId });
@@ -96,7 +107,15 @@
         {disabled}
     />
     <ContextMenu.Content>
-        {#if onBendPoint}
+        {#if onEndPoint}
+            <ContextMenu.Item.Button
+                onSelect={deleteEndPoint}
+                faIcon={faTrash}
+                variant="danger"
+            >
+                Delete end point
+            </ContextMenu.Item.Button>
+        {:else if onBendPoint}
             <ContextMenu.Item.Button
                 onSelect={deleteBendPoint}
                 faIcon={faTrash}
diff --git a/frontend/src/lib/rendering/svelteflow/components/edge/AssociationEdge.svelte b/frontend/src/lib/rendering/svelteflow/components/edge/AssociationEdge.svelte
index 3164b0b4..5d945ce7 100644
--- a/frontend/src/lib/rendering/svelteflow/components/edge/AssociationEdge.svelte
+++ b/frontend/src/lib/rendering/svelteflow/components/edge/AssociationEdge.svelte
@@ -40,6 +40,8 @@
     let sourceNode = useInternalNode(source);
     let targetNode = useInternalNode(target);
     let bendPoints = $derived(data.bendPoints ?? []);
+    let endPoints = $derived(data.endPoints ?? {});
+
     let useRoundedCorners = $derived(
         userSettings.get("useRoundedEdges", false),
     );
@@ -60,6 +62,10 @@
                 targetNode.current,
                 0,
                 bendPoints,
+                {
+                    source: endPoints.source ?? null,
+                    target: endPoints.target ?? null,
+                },
             );
         }
     });
@@ -106,18 +112,23 @@
         return `M ${x1} ${y1} C ${x1} ${y1 - loopHeight}, ${x2} ${y2 - loopHeight}, ${x2} ${y2}`;
     }
 
-    function handleBendPointsChange(nextPoints) {
+    function patchEdgeData(dataPatch) {
         edges.update(current =>
             current.map(edge =>
                 edge.id === id
-                    ? {
-                          ...edge,
-                          data: { ...edge.data, bendPoints: nextPoints },
-                      }
+                    ? { ...edge, data: { ...edge.data, ...dataPatch } }
                     : edge,
             ),
         );
     }
+
+    function handleBendPointsChange(nextPoints) {
+        patchEdgeData({ bendPoints: nextPoints });
+    }
+
+    function handleEndPointsChange(nextEndPoints) {
+        patchEdgeData({ endPoints: nextEndPoints });
+    }
 </script>
 
 <BaseEdge {id} {path} {markerStart} {markerEnd} {style} />
@@ -127,8 +138,14 @@
         edgeId={id}
         sourcePoint={{ x: edgeParams.sx, y: edgeParams.sy }}
         targetPoint={{ x: edgeParams.tx, y: edgeParams.ty }}
+        sourceBorderPoint={{ x: edgeParams.borderSx, y: edgeParams.borderSy }}
+        targetBorderPoint={{ x: edgeParams.borderTx, y: edgeParams.borderTy }}
         {bendPoints}
+        {endPoints}
+        sourceNodeId={source}
+        targetNodeId={target}
         onPointsChange={handleBendPointsChange}
+        onEndPointsChange={handleEndPointsChange}
     />
 {/if}
 
diff --git a/frontend/src/lib/rendering/svelteflow/components/edge/EdgeBendPoints.svelte b/frontend/src/lib/rendering/svelteflow/components/edge/EdgeBendPoints.svelte
index af5a1d28..57e2a378 100644
--- a/frontend/src/lib/rendering/svelteflow/components/edge/EdgeBendPoints.svelte
+++ b/frontend/src/lib/rendering/svelteflow/components/edge/EdgeBendPoints.svelte
@@ -14,42 +14,63 @@
   -    limitations under the License.
   -
   -->
-
 <script>
     import { useSvelteFlow } from "@xyflow/svelte";
 
     import {
         createBendPoint,
         insertBendPointAt,
+        createEndPoint,
     } from "$lib/rendering/svelteflow/interaction/bendPointOperations.js";
 
-    import { getInactiveBendPoints } from "./edgeUtils.ts";
+    import {
+        getInactiveBendPoints,
+        projectPointOntoNodeBorder,
+    } from "./edgeUtils.ts";
 
     let {
         edgeId,
         sourcePoint,
         targetPoint,
+        sourceBorderPoint,
+        targetBorderPoint,
         bendPoints = [],
+        endPoints = {},
+        sourceNodeId,
+        targetNodeId,
         onPointsChange,
+        onEndPointsChange,
     } = $props();
 
-    const { screenToFlowPosition } = useSvelteFlow();
+    const { screenToFlowPosition, getInternalNode } = useSvelteFlow();
 
-    let draggingId = $state(null);
+    let drag = $state(null);
 
     let fullPoints = $derived([sourcePoint, ...bendPoints, targetPoint]);
     let inactiveBendPoints = $derived(getInactiveBendPoints(fullPoints));
 
-    function beginDrag(pointId, event) {
+    let inactiveEndPoints = $derived(
+        [
+            endPoints.source ? null : { side: "source", ...sourceBorderPoint },
+            endPoints.target ? null : { side: "target", ...targetBorderPoint },
+        ].filter(Boolean),
+    );
+
+    function beginBendDrag(pointId, event) {
         if (event.button === 2) return;
         event.stopPropagation();
-        draggingId = pointId;
-        window.addEventListener("pointermove", onMove);
-        window.addEventListener("pointerup", endDrag, { once: true });
-        window.addEventListener("contextmenu", endDrag, { once: true });
+        drag = { kind: "bend", id: pointId };
+        addDragListeners();
     }
 
-    function activateInactivePoint(insertionIndex, event) {
+    function beginEndDrag(side, event) {
+        if (event.button === 2) return;
+        event.stopPropagation();
+        drag = { kind: "end", side, id: endPoints[side]?.id ?? null };
+        addDragListeners();
+    }
+
+    function activateInactiveBendPoint(insertionIndex, event) {
         if (event.button === 2) return;
         event.stopPropagation();
         const flowPosition = screenToFlowPosition({
@@ -63,32 +84,73 @@
             newBendPoint,
         );
         onPointsChange(newBendPoints);
-        draggingId = newBendPoint.id;
+        drag = { kind: "bend", id: newBendPoint.id };
+        addDragListeners();
+    }
+
+    function activateInactiveEndPoint(side, event) {
+        if (event.button === 2) return;
+        event.stopPropagation();
+        const flowPosition = screenToFlowPosition({
+            x: event.clientX,
+            y: event.clientY,
+        });
+        const projected = projectOntoSide(side, flowPosition);
+        const newEndPoint = createEndPoint(projected.x, projected.y);
+        onEndPointsChange({ ...endPoints, [side]: newEndPoint });
+        drag = { kind: "end", side, id: newEndPoint.id };
+        addDragListeners();
+    }
+
+    function addDragListeners() {
         window.addEventListener("pointermove", onMove);
         window.addEventListener("pointerup", endDrag, { once: true });
         window.addEventListener("contextmenu", endDrag, { once: true });
     }
 
     function endDrag() {
-        draggingId = null;
+        drag = null;
         window.removeEventListener("pointermove", onMove);
         window.removeEventListener("pointerup", endDrag);
         window.removeEventListener("contextmenu", endDrag);
     }
 
     function onMove(event) {
-        if (!draggingId) return;
+        if (!drag) return;
         const flowPosition = screenToFlowPosition({
             x: event.clientX,
             y: event.clientY,
         });
+
+        if (drag.kind === "end") {
+            const projected = projectOntoSide(drag.side, flowPosition);
+            onEndPointsChange({
+                ...endPoints,
+                [drag.side]: {
+                    ...endPoints[drag.side],
+                    id: drag.id,
+                    x: projected.x,
+                    y: projected.y,
+                },
+            });
+            return;
+        }
+
         const newBendPoints = bendPoints.map(bendPoint =>
-            bendPoint.id === draggingId
+            bendPoint.id === drag.id
                 ? { ...bendPoint, x: flowPosition.x, y: flowPosition.y }
                 : bendPoint,
         );
         onPointsChange(newBendPoints);
     }
+
+    function projectOntoSide(side, flowPosition) {
+        const nodeId = side === "source" ? sourceNodeId : targetNodeId;
+        const node = getInternalNode(nodeId);
+        return node
+            ? projectPointOntoNodeBorder(node, flowPosition)
+            : flowPosition;
+    }
 </script>
 
 <g>
@@ -104,7 +166,22 @@
             r="7"
             style="pointer-events: all;"
             onpointerdown={e =>
-                activateInactivePoint(inactivePoint.insertionIndex, e)}
+                activateInactiveBendPoint(inactivePoint.insertionIndex, e)}
+        />
+    {/each}
+
+    {#each inactiveEndPoints as inactiveEnd (inactiveEnd.side)}
+        <circle
+            class="bend-point-handle nodrag nopan cursor-pointer fill-green opacity-50"
+            role="button"
+            aria-label="Activate end point"
+            tabindex="-1"
+            data-edge-id={edgeId}
+            cx={inactiveEnd.x}
+            cy={inactiveEnd.y}
+            r="7"
+            style="pointer-events: all;"
+            onpointerdown={e => activateInactiveEndPoint(inactiveEnd.side, e)}
         />
     {/each}
 
@@ -119,9 +196,39 @@
             cy={bendPoint.y}
             r="8"
             style="pointer-events: all;"
-            onpointerdown={e => beginDrag(bendPoint.id, e)}
+            onpointerdown={e => beginBendDrag(bendPoint.id, e)}
         />
     {/each}
+
+    {#if endPoints.source}
+        <circle
+            class="bend-point-handle nodrag nopan cursor-grab fill-green stroke-white stroke-[1.5]"
+            role="button"
+            aria-label="Move source end point"
+            tabindex="-1"
+            data-edge-id={edgeId}
+            cx={endPoints.source.x}
+            cy={endPoints.source.y}
+            r="8"
+            style="pointer-events: all;"
+            onpointerdown={e => beginEndDrag("source", e)}
+        />
+    {/if}
+
+    {#if endPoints.target}
+        <circle
+            class="bend-point-handle nodrag nopan cursor-grab fill-green stroke-white stroke-[1.5]"
+            role="button"
+            aria-label="Move target end point"
+            tabindex="-1"
+            data-edge-id={edgeId}
+            cx={endPoints.target.x}
+            cy={endPoints.target.y}
+            r="8"
+            style="pointer-events: all;"
+            onpointerdown={e => beginEndDrag("target", e)}
+        />
+    {/if}
 </g>
 
 <style>
diff --git a/frontend/src/lib/rendering/svelteflow/components/edge/EdgeMarkers.svelte b/frontend/src/lib/rendering/svelteflow/components/edge/EdgeMarkers.svelte
index bd33f4f5..aaa6bda6 100644
--- a/frontend/src/lib/rendering/svelteflow/components/edge/EdgeMarkers.svelte
+++ b/frontend/src/lib/rendering/svelteflow/components/edge/EdgeMarkers.svelte
@@ -34,10 +34,10 @@
         </marker>
         <marker
             id="associationTo"
-            viewBox="0 0 10 10"
+            viewBox="0 0 11 10"
             refX="10"
             refY="5"
-            markerWidth="10"
+            markerWidth="11"
             markerHeight="10"
             orient="auto"
         >
@@ -45,10 +45,10 @@
         </marker>
         <marker
             id="associationFrom"
-            viewBox="0 0 10 10"
+            viewBox="-1 0 11 10"
             refX="0"
             refY="5"
-            markerWidth="10"
+            markerWidth="11"
             markerHeight="10"
             orient="auto"
         >
diff --git a/frontend/src/lib/rendering/svelteflow/components/edge/edgeUtils.ts b/frontend/src/lib/rendering/svelteflow/components/edge/edgeUtils.ts
index 4aa9d37d..3c2a3eb6 100644
--- a/frontend/src/lib/rendering/svelteflow/components/edge/edgeUtils.ts
+++ b/frontend/src/lib/rendering/svelteflow/components/edge/edgeUtils.ts
@@ -91,6 +91,10 @@ export function getEdgeParams(
     target: InternalNode,
     offsetY: number = 0,
     bendPoints: { x: number; y: number }[] = [],
+    activeEndPoints: {
+        source?: { x: number; y: number } | null;
+        target?: { x: number; y: number } | null;
+    } = {},
 ) {
     const sourceAim =
         bendPoints.length > 0 ? makePointNode(bendPoints[0]) : target;
@@ -102,33 +106,41 @@ export function getEdgeParams(
     const sourceIntersection = getNodeIntersection(source, sourceAim);
     const targetIntersection = getNodeIntersection(target, targetAim, offsetY);
 
+    // Active end points override the automatic border intersection for that side.
+    const sourcePoint = activeEndPoints.source ?? sourceIntersection;
+    const targetPoint = activeEndPoints.target ?? targetIntersection;
+
     const startAim =
         bendPoints.length > 0
             ? bendPoints[0]
-            : { x: targetIntersection.x, y: targetIntersection.y };
+            : { x: targetPoint.x, y: targetPoint.y };
     const endAim =
         bendPoints.length > 0
             ? bendPoints[bendPoints.length - 1]
-            : { x: sourceIntersection.x, y: sourceIntersection.y };
+            : { x: sourcePoint.x, y: sourcePoint.y };
 
     const startOffset = getSingleLabelOffset(
-        sourceIntersection.x,
-        sourceIntersection.y,
+        sourcePoint.x,
+        sourcePoint.y,
         startAim.x,
         startAim.y,
     );
     const endOffset = getSingleLabelOffset(
-        targetIntersection.x,
-        targetIntersection.y,
+        targetPoint.x,
+        targetPoint.y,
         endAim.x,
         endAim.y,
     );
 
     return {
-        sx: sourceIntersection.x,
-        sy: sourceIntersection.y,
-        tx: targetIntersection.x,
-        ty: targetIntersection.y,
+        sx: sourcePoint.x,
+        sy: sourcePoint.y,
+        tx: targetPoint.x,
+        ty: targetPoint.y,
+        borderSx: sourceIntersection.x,
+        borderSy: sourceIntersection.y,
+        borderTx: targetIntersection.x,
+        borderTy: targetIntersection.y,
         startX: startOffset.x,
         startY: startOffset.y,
         endX: endOffset.x,
@@ -253,7 +265,7 @@ function getSingleLabelOffset(
 
     const dx = towardX - fromX;
     const dy = towardY - fromY;
-    const length = Math.sqrt(dx * dx + dy * dy) || 1;
+    const length = Math.hypot(dx, dy) || 1;
 
     const normDx = dx / length;
     const normDy = dy / length;
@@ -355,3 +367,36 @@ function pointTowards(
         y: from.y + (dy / length) * distance,
     };
 }
+
+/**
+ * Projects an arbitrary point onto the border of a node's rectangle. Used to keep
+ * end points sticky on the class border while they are dragged. Returns the point
+ * on the rectangle outline closest to the given position.
+ */
+export function projectPointOntoNodeBorder(
+    node: InternalNode,
+    point: { x: number; y: number },
+): { x: number; y: number } {
+    const pos = node.internals.positionAbsolute ?? { x: 0, y: 0 };
+    const width = node.measured.width ?? 0;
+    const height = node.measured.height ?? 0;
+
+    const left = pos.x;
+    const right = pos.x + width;
+    const top = pos.y;
+    const bottom = pos.y + height;
+
+    const clampedX = Math.max(left, Math.min(right, point.x));
+    const clampedY = Math.max(top, Math.min(bottom, point.y));
+
+    const distLeft = Math.abs(clampedX - left);
+    const distRight = Math.abs(clampedX - right);
+    const distTop = Math.abs(clampedY - top);
+    const distBottom = Math.abs(clampedY - bottom);
+    const minDist = Math.min(distLeft, distRight, distTop, distBottom);
+
+    if (minDist === distLeft) return { x: left, y: clampedY };
+    if (minDist === distRight) return { x: right, y: clampedY };
+    if (minDist === distTop) return { x: clampedX, y: top };
+    return { x: clampedX, y: bottom };
+}
diff --git a/frontend/src/lib/rendering/svelteflow/interaction/bendPointOperations.js b/frontend/src/lib/rendering/svelteflow/interaction/bendPointOperations.js
index c5d685a1..a06af32b 100644
--- a/frontend/src/lib/rendering/svelteflow/interaction/bendPointOperations.js
+++ b/frontend/src/lib/rendering/svelteflow/interaction/bendPointOperations.js
@@ -62,3 +62,36 @@ export function findBendPointAtPosition(bendPoints, position, hitRadius) {
     }
     return null;
 }
+
+/**
+ * Returns the active end points of an edge, defaulting to an empty object.
+ * Shape: { source?: {id,x,y}|null, target?: {id,x,y}|null }.
+ */
+export function getEndPoints(edge) {
+    return edge?.data?.endPoints ?? {};
+}
+
+/**
+ * Creates a fresh end point object at the given position.
+ */
+export function createEndPoint(x, y) {
+    return { id: crypto.randomUUID(), x, y };
+}
+
+/**
+ * Finds an active end point ("source"/"target") within the given hit radius of a
+ * position. Returns the side or null. Mirrors findBendPointAtPosition, but for the
+ * end points held in edge.data.endPoints.
+ */
+export function findEndPointSideAtPosition(endPoints, position, hitRadius) {
+    for (const side of ["source", "target"]) {
+        const endPoint = endPoints?.[side];
+        if (!endPoint) continue;
+        const dx = endPoint.x - position.x;
+        const dy = endPoint.y - position.y;
+        if (Math.hypot(dx, dy) <= hitRadius) {
+            return side;
+        }
+    }
+    return null;
+}
diff --git a/frontend/src/lib/rendering/svelteflow/interaction/contextMenus.svelte.js b/frontend/src/lib/rendering/svelteflow/interaction/contextMenus.svelte.js
index 8b3ff653..d7d2046b 100644
--- a/frontend/src/lib/rendering/svelteflow/interaction/contextMenus.svelte.js
+++ b/frontend/src/lib/rendering/svelteflow/interaction/contextMenus.svelte.js
@@ -19,7 +19,9 @@ import { editorState, multiSelectState } from "$lib/sharedState.svelte.js";
 
 import {
     findBendPointAtPosition,
+    findEndPointSideAtPosition,
     getBendPoints,
+    getEndPoints,
 } from "./bendPointOperations.js";
 
 /** Base hit radius (in screen pixels) for detecting a bend point under the cursor. */
@@ -140,12 +142,18 @@ export class ContextMenuController {
             hitRadius,
         );
 
+        const endPoints = getEndPoints(currentEdge);
+        const hitEndPointSide = hitBendPoint
+            ? null
+            : findEndPointSideAtPosition(endPoints, flowPosition, hitRadius);
+
         this.#edgeRequest = {
             x: event.clientX,
             y: event.clientY,
             edgeId,
             flowPosition,
             hitBendPointId: hitBendPoint?.id ?? null,
+            hitEndPointSide,
             bendPointCount: bendPoints.length,
         };
     }
diff --git a/frontend/src/lib/rendering/svelteflow/svelteFlowWrapper.svelte b/frontend/src/lib/rendering/svelteflow/svelteFlowWrapper.svelte
index 12044c6b..0a811f0a 100644
--- a/frontend/src/lib/rendering/svelteflow/svelteFlowWrapper.svelte
+++ b/frontend/src/lib/rendering/svelteflow/svelteFlowWrapper.svelte
@@ -55,6 +55,8 @@
         createBendPoint,
         insertBendPointAt,
         removeBendPoint,
+        getBendPoints,
+        getEndPoints,
         MAX_BEND_POINTS_PER_EDGE,
     } from "./interaction/bendPointOperations.js";
     import { ContextMenuController } from "./interaction/contextMenus.svelte.js";
@@ -122,6 +124,9 @@
 
     let selectionZFrame = null;
     let boxSelecting = false;
+    // Tracks the last seen position per dragged node id, to compute the delta
+    // for moving attached end points live during a class drag.
+    let lastDragPositions = new Map();
 
     let hasFittedInitially = false;
     let hasDefaultLayout = $derived(hasDefaultNodeLayout(nodes));
@@ -369,6 +374,90 @@
         return await res.json();
     }
 
+    function handleNodeDragStart({ nodes: draggedNodes }) {
+        lastDragPositions.clear();
+        for (const node of draggedNodes) {
+            lastDragPositions.set(node.id, {
+                x: node.position.x,
+                y: node.position.y,
+            });
+        }
+    }
+
+    function handleNodeDrag({ nodes: draggedNodes }) {
+        let anyEndPointMoved = false;
+        const updatedEdges = edges.map(edge => {
+            const endPoints = edge.data?.endPoints;
+            if (!endPoints || (!endPoints.source && !endPoints.target)) {
+                return edge;
+            }
+
+            let nextEndPoints = endPoints;
+            for (const node of draggedNodes) {
+                const previous = lastDragPositions.get(node.id);
+                if (!previous) continue;
+                const dx = node.position.x - previous.x;
+                const dy = node.position.y - previous.y;
+                if (dx === 0 && dy === 0) continue;
+
+                nextEndPoints = shiftEndPointsForNode(
+                    nextEndPoints,
+                    edge,
+                    node.id,
+                    dx,
+                    dy,
+                );
+            }
+
+            if (nextEndPoints === endPoints) {
+                return edge;
+            }
+            anyEndPointMoved = true;
+            return {
+                ...edge,
+                data: { ...edge.data, endPoints: nextEndPoints },
+            };
+        });
+
+        if (anyEndPointMoved) {
+            edges = updatedEdges;
+        }
+
+        for (const node of draggedNodes) {
+            lastDragPositions.set(node.id, {
+                x: node.position.x,
+                y: node.position.y,
+            });
+        }
+    }
+
+    // Shifts the source and/or target end point of an edge by (dx, dy) if that
+    // side is attached to the given moved node.
+    function shiftEndPointsForNode(endPoints, edge, movedNodeId, dx, dy) {
+        let result = endPoints;
+        if (edge.source === movedNodeId && result.source) {
+            result = {
+                ...result,
+                source: {
+                    ...result.source,
+                    x: result.source.x + dx,
+                    y: result.source.y + dy,
+                },
+            };
+        }
+        if (edge.target === movedNodeId && result.target) {
+            result = {
+                ...result,
+                target: {
+                    ...result.target,
+                    x: result.target.x + dx,
+                    y: result.target.y + dy,
+                },
+            };
+        }
+        return result;
+    }
+
     function handleNodeMove(nodeMoveEvent) {
         updateNodePositions(nodeMoveEvent.nodes);
     }
@@ -411,14 +500,7 @@
     }
 
     function updateEdgeBendPoints(edgeId, newBendPoints) {
-        edges = edges.map(edge =>
-            edge.id === edgeId
-                ? {
-                      ...edge,
-                      data: { ...edge.data, bendPoints: newBendPoints },
-                  }
-                : edge,
-        );
+        patchEdgeData(edgeId, { bendPoints: newBendPoints });
     }
 
     function edgeEndpoints(edge, bendPoints) {
@@ -437,7 +519,7 @@
     function handleEdgeAddBendPoint({ edgeId, flowPosition }) {
         const edge = edges.find(e => e.id === edgeId);
         if (!edge) return;
-        const bendPoints = edge.data?.bendPoints ?? [];
+        const bendPoints = getBendPoints(edge);
         if (bendPoints.length >= MAX_BEND_POINTS_PER_EDGE) return;
 
         const endpoints = edgeEndpoints(edge, bendPoints);
@@ -465,12 +547,32 @@
     function handleEdgeDeleteBendPoint({ edgeId, bendPointId }) {
         const edge = edges.find(e => e.id === edgeId);
         if (!edge) return;
-        const next = removeBendPoint(edge.data?.bendPoints ?? [], bendPointId);
+        const next = removeBendPoint(getBendPoints(edge), bendPointId);
         updateEdgeBendPoints(edgeId, next);
     }
 
     function handleEdgeClearBendPoints({ edgeId }) {
-        updateEdgeBendPoints(edgeId, []);
+        patchEdgeData(edgeId, { bendPoints: [], endPoints: {} });
+    }
+
+    function handleEdgeDeleteEndPoint({ edgeId, side }) {
+        const edge = edges.find(e => e.id === edgeId);
+        if (!edge) return;
+        const currentEndPoints = getEndPoints(edge);
+        const nextEndPoints = { ...currentEndPoints, [side]: null };
+        updateEdgeEndPoints(edgeId, nextEndPoints);
+    }
+
+    function updateEdgeEndPoints(edgeId, newEndPoints) {
+        patchEdgeData(edgeId, { endPoints: newEndPoints });
+    }
+
+    function patchEdgeData(edgeId, dataPatch) {
+        edges = edges.map(edge =>
+            edge.id === edgeId
+                ? { ...edge, data: { ...edge.data, ...dataPatch } }
+                : edge,
+        );
     }
 
     export async function applyELKLayout() {
@@ -576,10 +678,12 @@
             selection.handleSelectionEnd();
             applySelectionZIndices();
         }}
-        onnodedragstart={({ node }) => {
+        onnodedragstart={e => {
             selection.notifyNodeDragStart();
-            nodeOrderCtrl.bringToFrontTemporarily(node?.id);
+            nodeOrderCtrl.bringToFrontTemporarily(e.node?.id);
+            handleNodeDragStart(e);
         }}
+        onnodedrag={e => handleNodeDrag(e)}
         onnodedragstop={e => {
             selection.notifyNodeDragStop();
             handleNodeMove(e);
@@ -626,6 +730,7 @@
         onClose={() => contextMenus.close()}
         onAddBendPoint={handleEdgeAddBendPoint}
         onDeleteBendPoint={handleEdgeDeleteBendPoint}
+        onDeleteEndPoint={handleEdgeDeleteEndPoint}
         onClearBendPoints={handleEdgeClearBendPoints}
     />
 </div>