From f23d6bbc796ff0020686afeca2e8b3dd663e9c1a Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Fri, 11 Sep 2026 16:24:27 +0200
Subject: [PATCH] Add experimental automatic arc connections

---
 .changeset/quiet-arcs-follow.md               |   5 +
 .../petrinaut/docs/drawing-a-net.md           |  12 +
 .../petrinaut/docs/visual-settings.md         |   6 +
 .../src/react/state/user-settings-context.ts  |   4 +
 .../state/user-settings-provider.test.tsx     |  58 +++++
 .../react/state/user-settings-provider.tsx    |   5 +
 .../ui/automatic-arc-connections.stories.tsx  | 158 +++++++++++++
 .../create-experiment-drawer.test.tsx         |   1 +
 .../components/viewport-settings-dialog.tsx   |  30 ++-
 .../react-flow/react-flow-canvas.tsx          |  70 +++++-
 .../react-flow/react-flow-canvas/arc.tsx      |   5 +-
 .../react-flow-canvas/classic-place-node.tsx  |  18 +-
 .../classic-transition-node.tsx               |  17 +-
 .../react-flow-canvas/node-card.tsx           |  17 +-
 .../outline-connection-line.tsx               |  69 ++++++
 .../react-flow-canvas/port-handles.ts         |   4 +-
 .../react-flow-canvas/react-flow-types.ts     |   5 +-
 .../react-flow-canvas/shared/node-handles.tsx | 156 +++++++++++++
 .../shared/outline-arcs.test.ts               | 112 +++++++++
 .../react-flow-canvas/shared/outline-arcs.ts  | 132 +++++++++++
 .../use-react-flow-elements.test.tsx          | 219 ++++++++++++++++++
 .../use-react-flow-elements.ts                |  32 ++-
 22 files changed, 1077 insertions(+), 58 deletions(-)
 create mode 100644 .changeset/quiet-arcs-follow.md
 create mode 100644 libs/@hashintel/petrinaut/src/ui/automatic-arc-connections.stories.tsx
 create mode 100644 libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/outline-connection-line.tsx
 create mode 100644 libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/shared/node-handles.tsx
 create mode 100644 libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/shared/outline-arcs.test.ts
 create mode 100644 libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/shared/outline-arcs.ts
 create mode 100644 libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/use-react-flow-elements.test.tsx

diff --git a/.changeset/quiet-arcs-follow.md b/.changeset/quiet-arcs-follow.md
new file mode 100644
index 00000000000..634d00e8e48
--- /dev/null
+++ b/.changeset/quiet-arcs-follow.md
@@ -0,0 +1,5 @@
+---
+"@hashintel/petrinaut": patch
+---
+
+Add experimental automatic arc connections with a single outgoing hover handle and curves that follow place and transition outlines.
diff --git a/libs/@hashintel/petrinaut/docs/drawing-a-net.md b/libs/@hashintel/petrinaut/docs/drawing-a-net.md
index 783ac50134f..00a2243960a 100644
--- a/libs/@hashintel/petrinaut/docs/drawing-a-net.md
+++ b/libs/@hashintel/petrinaut/docs/drawing-a-net.md
@@ -78,6 +78,18 @@ Petri nets are bipartite: you cannot connect a place to another place or a trans
 
 ![drawing-arc](https://github.com/user-attachments/assets/ac688560-bba8-44fe-a6f8-c7ff320474a4)
 
+### Automatic arc connections (experimental)
+
+Enable **Automatic arc connections** in [Viewport Settings](visual-settings.md#automatic-arc-connections-experimental) to try a different way to connect nodes:
+
+1. Hover over a place or transition to reveal its outgoing handle.
+2. Drag the handle onto the target node. A blue outline shows a valid target.
+3. Release to create the arc. Its endpoints follow the node outlines when you move either node.
+
+Drag from the source: place to transition creates an input arc; transition to place creates an output arc. Release on empty space or press **Escape** to cancel. Dropping onto a subnet does not create an arc in this mode.
+
+You can also focus the outgoing handle with **Tab**, press **Enter** or **Space**, then focus a target and press **Enter** or **Space** again. On touch devices, the outgoing handle stays visible.
+
 ## Component ports
 
 Subnets can expose selected places as ports. If you don't see subnet or component controls, enable **Settings → Net Components** first.
diff --git a/libs/@hashintel/petrinaut/docs/visual-settings.md b/libs/@hashintel/petrinaut/docs/visual-settings.md
index 6fefbefe11b..c5003a06099 100644
--- a/libs/@hashintel/petrinaut/docs/visual-settings.md
+++ b/libs/@hashintel/petrinaut/docs/visual-settings.md
@@ -135,6 +135,12 @@ Off by default. Adds an interval toggle to every numeric value of the experiment
 
 Shown only when the host application provides an optimizer that runs in your browser. Off by default. On, the experiment form's interval toggles read **Optimize**: creating the experiment starts a study over the selected intervals, with an **Objective** and **Constraints** chosen in the form. Off, the toggles read **Sweep** and the sweep waits for your selection; any running in-browser optimization is cancelled. See [Optimizing a sweep](experiments.md#optimizing-a-sweep).
 
+### Automatic arc connections (experimental)
+
+Off by default. Hides the fixed handles on places and transitions. Hover over a node to reveal one outgoing handle, then drag it onto a place or transition to create an arc. Arcs attach to the node outlines and adjust their direction as you move nodes. Opposite directions use separate curves.
+
+This setting uses automatic curves and temporarily disables the **Arcs rendering** selector. Turning it off restores your previous style. Existing subnet connections stay visible; turn the experiment off to create connections through subnet ports. See [Connecting with arcs](drawing-a-net.md#connecting-with-arcs).
+
 ### Arcs rendering
 
 Choose how arcs are drawn between nodes:
diff --git a/libs/@hashintel/petrinaut/src/react/state/user-settings-context.ts b/libs/@hashintel/petrinaut/src/react/state/user-settings-context.ts
index 5271fba5310..3e5528a2467 100644
--- a/libs/@hashintel/petrinaut/src/react/state/user-settings-context.ts
+++ b/libs/@hashintel/petrinaut/src/react/state/user-settings-context.ts
@@ -35,6 +35,7 @@ export type UserSettings = {
   keepPanelsMounted: boolean;
   compactNodes: boolean;
   enableExperimentalIconPack: boolean;
+  enableAutomaticArcConnections: boolean;
   arcRendering: ArcRendering;
   cursorMode: CursorMode;
   isLeftSidebarOpen: boolean;
@@ -114,6 +115,7 @@ export type UserSettingsActions = {
   setKeepPanelsMounted: (value: boolean) => void;
   setCompactNodes: (value: boolean) => void;
   setEnableExperimentalIconPack: (value: boolean) => void;
+  setEnableAutomaticArcConnections: (value: boolean) => void;
   setArcRendering: (value: ArcRendering) => void;
   setIsLeftSidebarOpen: (value: boolean) => void;
   setLeftSidebarWidth: (value: number) => void;
@@ -150,6 +152,7 @@ export const defaultUserSettings: UserSettings = {
   keepPanelsMounted: true,
   compactNodes: false,
   enableExperimentalIconPack: false,
+  enableAutomaticArcConnections: false,
   arcRendering: "custom",
   cursorMode: "pan",
   isLeftSidebarOpen: true,
@@ -185,6 +188,7 @@ export const defaultUserSettingsContextValue: UserSettingsContextValue = {
   setKeepPanelsMounted: () => {},
   setCompactNodes: () => {},
   setEnableExperimentalIconPack: () => {},
+  setEnableAutomaticArcConnections: () => {},
   setArcRendering: () => {},
   setIsLeftSidebarOpen: () => {},
   setLeftSidebarWidth: () => {},
diff --git a/libs/@hashintel/petrinaut/src/react/state/user-settings-provider.test.tsx b/libs/@hashintel/petrinaut/src/react/state/user-settings-provider.test.tsx
index 6530852f3e8..0f6ae45762d 100644
--- a/libs/@hashintel/petrinaut/src/react/state/user-settings-provider.test.tsx
+++ b/libs/@hashintel/petrinaut/src/react/state/user-settings-provider.test.tsx
@@ -43,7 +43,65 @@ const WalkthroughProbe = () => {
   );
 };
 
+const ArcConnectionsProbe = () => {
+  const { enableAutomaticArcConnections, setEnableAutomaticArcConnections } =
+    use(UserSettingsContext);
+  return (
+    <button
+      type="button"
+      onClick={() =>
+        setEnableAutomaticArcConnections(!enableAutomaticArcConnections)
+      }
+    >
+      Automatic arcs: {enableAutomaticArcConnections ? "on" : "off"}
+    </button>
+  );
+};
+
 describe("UserSettingsProvider", () => {
+  it("defaults automatic arcs off for saved preferences from before the experiment", () => {
+    localStorage.setItem(
+      "petrinaut:user-settings",
+      JSON.stringify({ compactNodes: false }),
+    );
+    render(
+      <UserSettingsProvider>
+        <ArcConnectionsProbe />
+      </UserSettingsProvider>,
+    );
+    expect(
+      screen.getByRole("button", { name: "Automatic arcs: off" }),
+    ).toBeTruthy();
+  });
+
+  it("persists automatic arcs independently of the saved arc style", () => {
+    localStorage.setItem(
+      "petrinaut:user-settings",
+      JSON.stringify({ arcRendering: "smoothstep" }),
+    );
+    const first = render(
+      <UserSettingsProvider>
+        <ArcConnectionsProbe />
+      </UserSettingsProvider>,
+    );
+    fireEvent.click(
+      screen.getByRole("button", { name: "Automatic arcs: off" }),
+    );
+    first.unmount();
+    render(
+      <UserSettingsProvider>
+        <ArcConnectionsProbe />
+      </UserSettingsProvider>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Automatic arcs: on" }));
+    expect(
+      JSON.parse(localStorage.getItem("petrinaut:user-settings") ?? "{}"),
+    ).toMatchObject({
+      enableAutomaticArcConnections: false,
+      arcRendering: "smoothstep",
+    });
+  });
+
   it("starts with Brunch demo mode off and toggles it", () => {
     render(
       <UserSettingsProvider>
diff --git a/libs/@hashintel/petrinaut/src/react/state/user-settings-provider.tsx b/libs/@hashintel/petrinaut/src/react/state/user-settings-provider.tsx
index 7c0a250e88d..7a9eb8bbc59 100644
--- a/libs/@hashintel/petrinaut/src/react/state/user-settings-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/react/state/user-settings-provider.tsx
@@ -97,6 +97,11 @@ const OwnedUserSettingsProvider: React.FC<React.PropsWithChildren> = ({
         ...settings,
         enableExperimentalIconPack: value,
       })),
+    setEnableAutomaticArcConnections: (value: boolean) =>
+      setState((settings) => ({
+        ...settings,
+        enableAutomaticArcConnections: value,
+      })),
     setArcRendering: (value: ArcRendering) =>
       setState((prev) => ({ ...prev, arcRendering: value })),
     setCursorMode: (value: CursorMode) =>
diff --git a/libs/@hashintel/petrinaut/src/ui/automatic-arc-connections.stories.tsx b/libs/@hashintel/petrinaut/src/ui/automatic-arc-connections.stories.tsx
new file mode 100644
index 00000000000..415f6fde938
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/automatic-arc-connections.stories.tsx
@@ -0,0 +1,158 @@
+import { use, useState } from "react";
+
+import { UserSettingsContext } from "../react/state/user-settings-context";
+import { UserSettingsProvider } from "../react/state/user-settings-provider";
+import { PetrinautStoryProvider } from "./petrinaut-story-provider";
+
+import type { SDCPN } from "@hashintel/petrinaut-core";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+const definition: SDCPN = {
+  places: [
+    { id: "waiting", name: "Waiting", x: 0, y: 0 },
+    { id: "staff", name: "Free staff", x: 0, y: 240 },
+    { id: "serving", name: "Serving", x: 460, y: 0 },
+    { id: "served", name: "Served", x: 920, y: 0 },
+  ].map((place) => ({
+    ...place,
+    colorId: null,
+    dynamicsEnabled: false,
+    differentialEquationId: null,
+  })),
+  transitions: [
+    {
+      id: "begin",
+      name: "Begin service",
+      x: 230,
+      y: 140,
+      inputArcs: [
+        { placeId: "waiting", weight: 2, type: "standard" },
+        { placeId: "staff", weight: 1, type: "read" },
+      ],
+      outputArcs: [{ placeId: "serving", weight: 1 }],
+      lambdaType: "predicate",
+      lambdaCode: "return true;",
+      transitionKernelCode: "return {};",
+    },
+    {
+      id: "finish",
+      name: "Finish service",
+      x: 690,
+      y: 140,
+      inputArcs: [
+        { placeId: "serving", weight: 1, type: "standard" },
+        { placeId: "served", weight: 3, type: "inhibitor" },
+      ],
+      outputArcs: [
+        { placeId: "served", weight: 1 },
+        { placeId: "staff", weight: 1 },
+      ],
+      lambdaType: "predicate",
+      lambdaCode: "return true;",
+      transitionKernelCode: "return {};",
+    },
+  ],
+  types: [],
+  parameters: [],
+  differentialEquations: [],
+};
+
+const definitionWithSubnet: SDCPN = {
+  ...definition,
+  transitions: definition.transitions.map((transition) =>
+    transition.id === "finish"
+      ? {
+          ...transition,
+          outputArcs: [
+            ...transition.outputArcs,
+            {
+              endpoint: {
+                kind: "componentPort",
+                componentInstanceId: "archive",
+                portPlaceId: "inbox",
+              },
+              weight: 1,
+            },
+          ],
+        }
+      : transition,
+  ),
+  componentInstances: [
+    {
+      id: "archive",
+      name: "Archive",
+      subnetId: "archive-subnet",
+      parameterValues: {},
+      x: 920,
+      y: 320,
+    },
+  ],
+  subnets: [
+    {
+      id: "archive-subnet",
+      name: "Archive subnet",
+      places: [
+        {
+          id: "inbox",
+          name: "Inbox",
+          isPort: true,
+          colorId: null,
+          dynamicsEnabled: false,
+          differentialEquationId: null,
+          x: 0,
+          y: 0,
+        },
+      ],
+      transitions: [],
+      types: [],
+      parameters: [],
+      differentialEquations: [],
+    },
+  ],
+};
+
+const AutomaticArcEditor = ({
+  readonly = false,
+  withSubnet = false,
+}: {
+  readonly?: boolean;
+  withSubnet?: boolean;
+}) => {
+  const settings = use(UserSettingsContext);
+  const [automaticArcs, setAutomaticArcs] = useState(true);
+  return (
+    <UserSettingsContext
+      value={{
+        ...settings,
+        enableAutomaticArcConnections: automaticArcs,
+        setEnableAutomaticArcConnections: setAutomaticArcs,
+      }}
+    >
+      <PetrinautStoryProvider
+        initialTitle="Automatic arc connections"
+        initialDefinition={withSubnet ? definitionWithSubnet : definition}
+        readonly={readonly}
+      />
+    </UserSettingsContext>
+  );
+};
+
+const meta = {
+  title: "Petrinaut/Automatic arc connections",
+  parameters: { layout: "fullscreen" },
+  render: (args) => (
+    <div style={{ height: "100vh", width: "100vw" }}>
+      <UserSettingsProvider>
+        <AutomaticArcEditor {...args} />
+      </UserSettingsProvider>
+    </div>
+  ),
+} satisfies Meta<typeof AutomaticArcEditor>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Editable: Story = {};
+export const ReadOnly: Story = { args: { readonly: true } };
+export const WithSubnet: Story = { args: { withSubnet: true } };
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/create-experiment-drawer.test.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/create-experiment-drawer.test.tsx
index 893093fa058..1e49e49f500 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/create-experiment-drawer.test.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/create-experiment-drawer.test.tsx
@@ -271,6 +271,7 @@ const TestProviders = ({
     setKeepPanelsMounted: () => {},
     setCompactNodes: () => {},
     setEnableExperimentalIconPack: () => {},
+    setEnableAutomaticArcConnections: () => {},
     setArcRendering: () => {},
     setCursorMode: () => {},
     setIsLeftSidebarOpen: () => {},
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-settings-dialog.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-settings-dialog.tsx
index 4f0418ddcf1..37453c49bdd 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-settings-dialog.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-settings-dialog.tsx
@@ -96,6 +96,8 @@ export const ViewportSettingsDialog: React.FC<ViewportSettingsDialogProps> = ({
     setCompactNodes,
     enableExperimentalIconPack,
     setEnableExperimentalIconPack,
+    enableAutomaticArcConnections,
+    setEnableAutomaticArcConnections,
     arcRendering,
     setArcRendering,
     showMinimap,
@@ -193,11 +195,37 @@ export const ViewportSettingsDialog: React.FC<ViewportSettingsDialogProps> = ({
             size="sm"
           />
         </SettingRow>
-        <SettingRow label="Arcs rendering">
+        <SettingRow
+          label={
+            <>
+              Automatic arc connections{" "}
+              <Chip size="xs" color="orange" variant="outline" shape="round">
+                Experimental
+              </Chip>
+            </>
+          }
+          description="Create arcs from one hover handle. Connections follow the outlines of places and transitions."
+        >
+          <Toggle
+            aria-label="Automatic arc connections"
+            value={enableAutomaticArcConnections}
+            onChange={setEnableAutomaticArcConnections}
+            size="sm"
+          />
+        </SettingRow>
+        <SettingRow
+          label="Arcs rendering"
+          description={
+            enableAutomaticArcConnections
+              ? "Automatic arc connections uses curves that follow node direction."
+              : undefined
+          }
+        >
           <Select
             size="sm"
             className={selectStyle}
             required
+            disabled={enableAutomaticArcConnections}
             value={arcRendering}
             onChange={(nextArcRendering) =>
               setArcRendering(nextArcRendering as ArcRendering)
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas.tsx
index dbb45503da8..00c158e2f29 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas.tsx
@@ -10,8 +10,9 @@ import {
   ReactFlowProvider,
   SelectionMode,
   useStore,
+  useStoreApi,
 } from "@xyflow/react";
-import { use, useState } from "react";
+import { use, useEffect, useState } from "react";
 
 import { css } from "@hashintel/ds-helpers/css";
 import {
@@ -39,6 +40,7 @@ import { ClassicPlaceNode } from "./react-flow-canvas/classic-place-node";
 import { ClassicTransitionNode } from "./react-flow-canvas/classic-transition-node";
 import { ComponentInstanceNode } from "./react-flow-canvas/component-instance-node";
 import { MiniMap } from "./react-flow-canvas/mini-map";
+import { OutlineConnectionLine } from "./react-flow-canvas/outline-connection-line";
 import { PlaceNode } from "./react-flow-canvas/place-node";
 import { toCanvasConnection } from "./react-flow-canvas/port-handles";
 import { TransitionNode } from "./react-flow-canvas/transition-node";
@@ -48,6 +50,7 @@ import { useReactFlowController } from "./react-flow-canvas/use-react-flow-contr
 import { useReactFlowElements } from "./react-flow-canvas/use-react-flow-elements";
 
 import type { CanvasNodeKind } from "../../canvas-scene";
+import type { Connection, IsValidConnection } from "@xyflow/react";
 
 const COMPACT_NODE_TYPES = {
   place: PlaceNode,
@@ -103,14 +106,19 @@ const ReactFlowCanvasInner: CanvasRenderer = ({
   viewportActions,
 }) => {
   const presentation = usePetrinautPresentation();
-  const { compactNodes, showMinimap, partialSelection } =
-    use(UserSettingsContext);
+  const {
+    compactNodes,
+    showMinimap,
+    partialSelection,
+    enableAutomaticArcConnections,
+  } = use(UserSettingsContext);
   const { globalMode } = use(EditorContext);
   const { savedViewport, rememberViewport } = use(CanvasViewportContext);
   const isActualMode = globalMode === "actual";
   const nodeTypes = compactNodes ? COMPACT_NODE_TYPES : CLASSIC_NODE_TYPES;
 
   const interactions = useCanvasInteractions(scene);
+  const flowStore = useStoreApi();
   const controller = useReactFlowController();
   const { nodes, edges } = useReactFlowElements(scene);
   const applyChanges = useApplyNodeChanges(interactions);
@@ -118,6 +126,51 @@ const ReactFlowCanvasInner: CanvasRenderer = ({
   useRecenterOnPanelOpen(controller, containerSize, scene.nodes);
   useMonacoKeyboardIsolation();
 
+  useEffect(() => {
+    const cancel = () => {
+      flowStore.getState().cancelConnection();
+      flowStore.setState({ connectionClickStartHandle: null });
+    };
+    cancel();
+    if (!enableAutomaticArcConnections) {
+      return;
+    }
+    const onKeyDown = (event: KeyboardEvent) => {
+      const { connection, connectionClickStartHandle } = flowStore.getState();
+      if (
+        event.key === "Escape" &&
+        (connection.inProgress || connectionClickStartHandle)
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        cancel();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => window.removeEventListener("keydown", onKeyDown, true);
+  }, [enableAutomaticArcConnections, flowStore]);
+
+  const isValidOutlineConnection: IsValidConnection = (connection) => {
+    const canvasConnection = toCanvasConnection(connection);
+    return (
+      !canvasConnection.sourcePortId &&
+      !canvasConnection.targetPortId &&
+      interactions.isValidConnection(canvasConnection)
+    );
+  };
+
+  const connect = (connection: Connection) => {
+    const { connection: gesture, connectionClickStartHandle } =
+      flowStore.getState();
+    if (
+      (!gesture.inProgress && !connectionClickStartHandle) ||
+      (enableAutomaticArcConnections && !isValidOutlineConnection(connection))
+    ) {
+      return;
+    }
+    interactions.connect(toCanvasConnection(connection));
+  };
+
   const bounds = getBoundsOfCenteredBoxes(scene.nodes);
 
   // The viewport at mount: where this net was last left, or centered on the
@@ -182,12 +235,13 @@ const ReactFlowCanvasInner: CanvasRenderer = ({
           edgeTypes={REACTFLOW_EDGE_TYPES}
           onNodesChange={applyChanges}
           onEdgesChange={applyChanges}
-          onConnect={
-            interactions.readonly
-              ? undefined
-              : (connection) =>
-                  interactions.connect(toCanvasConnection(connection))
+          connectionLineComponent={
+            enableAutomaticArcConnections ? OutlineConnectionLine : undefined
+          }
+          isValidConnection={
+            enableAutomaticArcConnections ? isValidOutlineConnection : undefined
           }
+          onConnect={interactions.readonly ? undefined : connect}
           onEdgeClick={(_event, edge) => interactions.selectArc(edge.id)}
           // Node click selection is handled by ReactFlow's internal
           // handleNodeClick, which fires select changes through
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/arc.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/arc.tsx
index acd9dfa6d0a..05984cd4b3d 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/arc.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/arc.tsx
@@ -322,7 +322,8 @@ export const Arc: React.FC<EdgeProps<ArcEdgeType>> = ({
 
   // Compute path based on arc rendering setting.
   const [arcPath, labelX, labelY] =
-    arcRendering === "smoothstep"
+    data?.outlinePath ??
+    (arcRendering === "smoothstep"
       ? getSmoothStepPath({
           sourceX,
           sourceY,
@@ -347,7 +348,7 @@ export const Arc: React.FC<EdgeProps<ArcEdgeType>> = ({
             targetX,
             targetY,
             targetPosition,
-          });
+          }));
 
   const strokeColor = style?.stroke ?? "#b1b1b7";
   const arcType = data?.kind;
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/classic-place-node.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/classic-place-node.tsx
index 0f3e47ce6c1..98cb7188685 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/classic-place-node.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/classic-place-node.tsx
@@ -1,4 +1,4 @@
-import { Handle, type NodeProps, Position } from "@xyflow/react";
+import { type NodeProps } from "@xyflow/react";
 
 import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
@@ -12,9 +12,9 @@ import {
 } from "../../../styles/classic-node-layout";
 import { nodeFocusStyle } from "../../../styles/focus";
 import { nodeSurfaceStyle } from "../../../styles/node-surface";
-import { handleStyling } from "../../../styles/styling";
 import { placeBorderColor, placeFillColor } from "../../../styles/type-colors";
 import { PlaceStateTooltip } from "./place-state-tooltip";
+import { NodeHandles } from "./shared/node-handles";
 
 import type { PlaceNodeType } from "./react-flow-types";
 
@@ -87,12 +87,7 @@ export const ClassicPlaceNode: React.FC<NodeProps<PlaceNodeType>> = ({
   return (
     <div className={containerStyle}>
       {showStateTooltip && <PlaceStateTooltip nodeId={id} />}
-      <Handle
-        type="target"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        style={handleStyling}
-      />
+
       <div
         className={`${nodeSurfaceStyle} ${nodeFocusStyle({ focus })} ${classicNodeBoxStyle} ${placeBoxStyle}`}
         style={
@@ -118,12 +113,7 @@ export const ClassicPlaceNode: React.FC<NodeProps<PlaceNodeType>> = ({
           )}
         </div>
       </div>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        style={handleStyling}
-      />
+      <NodeHandles isConnectable={isConnectable} />
     </div>
   );
 };
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/classic-transition-node.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/classic-transition-node.tsx
index 5a9b69cb993..46754c666ab 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/classic-transition-node.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/classic-transition-node.tsx
@@ -1,4 +1,4 @@
-import { Handle, type NodeProps, Position } from "@xyflow/react";
+import { type NodeProps } from "@xyflow/react";
 import { useRef } from "react";
 
 import { Icon } from "@hashintel/ds-components";
@@ -17,7 +17,7 @@ import {
   nodeSurfaceStyle,
   transitionSurfaceStyle,
 } from "../../../styles/node-surface";
-import { handleStyling } from "../../../styles/styling";
+import { NodeHandles } from "./shared/node-handles";
 import { useTransitionFiringAnimation } from "./use-transition-firing-animation";
 
 import type { TransitionNodeType } from "./react-flow-types";
@@ -86,12 +86,6 @@ export const ClassicTransitionNode: React.FC<NodeProps<TransitionNodeType>> = ({
 
   return (
     <div className={containerStyle}>
-      <Handle
-        type="target"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        style={handleStyling}
-      />
       <div
         ref={boxRef}
         className={`${nodeSurfaceStyle} ${nodeFocusStyle({ focus })} ${transitionSurfaceStyle} ${classicNodeBoxStyle} ${transitionBoxStyle}`}
@@ -112,12 +106,7 @@ export const ClassicTransitionNode: React.FC<NodeProps<TransitionNodeType>> = ({
           </div>
         </div>
       </div>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        style={handleStyling}
-      />
+      <NodeHandles isConnectable={isConnectable} />
     </div>
   );
 };
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/node-card.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/node-card.tsx
index 6c7b5613bbc..223a3adfcdf 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/node-card.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/node-card.tsx
@@ -1,8 +1,6 @@
-import { Handle, Position } from "@xyflow/react";
-
 import { css } from "@hashintel/ds-helpers/css";
 
-import { handleStyling } from "../../../styles/styling";
+import { NodeHandles } from "./shared/node-handles";
 
 import type { ReactNode } from "react";
 
@@ -120,12 +118,6 @@ export const NodeCard: React.FC<NodeCardProps> = ({
 }) => {
   return (
     <div className={containerStyle}>
-      <Handle
-        type="target"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        style={handleStyling}
-      />
       <div ref={cardRef} className={cardClassName} style={cardStyle}>
         {iconContainer}
         <div className={textAreaStyle}>
@@ -134,12 +126,7 @@ export const NodeCard: React.FC<NodeCardProps> = ({
         </div>
         {badge}
       </div>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        style={handleStyling}
-      />
+      <NodeHandles isConnectable={isConnectable} />
     </div>
   );
 };
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/outline-connection-line.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/outline-connection-line.tsx
new file mode 100644
index 00000000000..85254b1f408
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/outline-connection-line.tsx
@@ -0,0 +1,69 @@
+import { useStore, type ConnectionLineComponent } from "@xyflow/react";
+import { use, useId } from "react";
+
+import { UserSettingsContext } from "../../../../../../react/state/user-settings-context";
+import { getOutlineArcPath, getOutlineNode } from "./shared/outline-arcs";
+
+import type { NodeType } from "./react-flow-types";
+
+export const OutlineConnectionLine: ConnectionLineComponent<NodeType> = ({
+  fromNode,
+  toNode,
+  toX,
+  toY,
+  connectionStatus,
+  connectionLineStyle,
+}) => {
+  const { compactNodes } = use(UserSettingsContext);
+  const markerId = useId();
+  const hasReverseArc = useStore(
+    (state) =>
+      toNode !== null &&
+      state.edges.some(
+        (edge) => edge.source === toNode.id && edge.target === fromNode.id,
+      ),
+  );
+  const source = getOutlineNode(fromNode.data, compactNodes);
+  const target =
+    connectionStatus === "valid" && toNode
+      ? getOutlineNode(toNode.data, compactNodes)
+      : null;
+  if (!source) {
+    return null;
+  }
+  const [path] = getOutlineArcPath(
+    source,
+    target ?? { x: toX, y: toY },
+    target !== null && hasReverseArc,
+  );
+  return (
+    <>
+      <defs>
+        <marker
+          id={markerId}
+          viewBox="0 0 10 10"
+          markerWidth="10"
+          markerHeight="10"
+          refX="10"
+          refY="5"
+          orient="auto"
+          markerUnits="userSpaceOnUse"
+        >
+          <path d="M 0,0 L 10,5 L 0,10 Z" fill="var(--colors-blue-s80)" />
+        </marker>
+      </defs>
+      <path
+        className="react-flow__connection-path"
+        d={path}
+        fill="none"
+        strokeDasharray={connectionStatus === "valid" ? undefined : "5 4"}
+        markerEnd={`url(#${markerId})`}
+        style={{
+          stroke: "var(--colors-blue-s80)",
+          strokeWidth: 2,
+          ...connectionLineStyle,
+        }}
+      />
+    </>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/port-handles.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/port-handles.ts
index 79518e3bfbe..e54593ce3ec 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/port-handles.ts
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/port-handles.ts
@@ -5,7 +5,7 @@
  */
 
 import type { CanvasConnection } from "../../../use-canvas-interactions";
-import type { Connection } from "@xyflow/react";
+import type { Edge } from "@xyflow/react";
 
 const portInPrefix = "port-in-";
 const portOutPrefix = "port-out-";
@@ -20,7 +20,7 @@ const portIdOf = (handle: string | null | undefined, prefix: string) =>
   handle?.startsWith(prefix) ? handle.slice(prefix.length) : null;
 
 export const toCanvasConnection = (
-  connection: Connection,
+  connection: Pick<Edge, "source" | "target" | "sourceHandle" | "targetHandle">,
 ): CanvasConnection => ({
   sourceId: connection.source,
   targetId: connection.target,
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/react-flow-types.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/react-flow-types.ts
index fade0a11e5e..814d04135f4 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/react-flow-types.ts
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/react-flow-types.ts
@@ -10,6 +10,7 @@ import type {
   CanvasPlaceNode,
   CanvasTransitionNode,
 } from "../../../canvas-scene";
+import type { OutlineArcPath } from "./shared/outline-arcs";
 import type { Edge, Node } from "@xyflow/react";
 
 export type TransitionFrameState = NonNullable<
@@ -39,6 +40,8 @@ export type NodeType =
 export type ArcData = Pick<
   CanvasArc,
   "kind" | "weight" | "focus" | "transitionId"
->;
+> & {
+  outlinePath?: OutlineArcPath;
+};
 
 export type ArcEdgeType = Edge<ArcData>;
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/shared/node-handles.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/shared/node-handles.tsx
new file mode 100644
index 00000000000..6f2864afdc5
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/shared/node-handles.tsx
@@ -0,0 +1,156 @@
+import { Handle, Position, useNodeId, useStore } from "@xyflow/react";
+import { use } from "react";
+
+import { css } from "@hashintel/ds-helpers/css";
+
+import { UserSettingsContext } from "../../../../../../../react/state/user-settings-context";
+import { handleStyling } from "../../../../styles/styling";
+
+import type { KeyboardEvent } from "react";
+
+const launchHandleStyle = css({
+  opacity: "[0]",
+  ".react-flow__node:hover &, .react-flow__node:focus-within &": {
+    opacity: "[1]",
+  },
+  "@media (hover: none)": { opacity: "[1]" },
+  _before: {
+    content: '""',
+    position: "absolute",
+    inset: "[-7.5px]",
+  },
+  _after: {
+    content: '""',
+    position: "absolute",
+    inset: "[0]",
+    borderRadius: "full",
+    background: "blue.s80",
+    border: "[1px solid white]",
+    pointerEvents: "none",
+  },
+});
+
+// Pseudo-elements expand hit areas without moving the anchors of subnet arcs.
+const targetHandleStyle = css({
+  _after: {
+    content: '""',
+    position: "absolute",
+    left: "[50%]",
+    top: "[calc(50% - var(--arc-target-height) / 2)]",
+    width: "[var(--arc-target-width)]",
+    height: "[var(--arc-target-height)]",
+    borderRadius: "[var(--arc-target-radius)]",
+    outline: "[var(--arc-target-outline)]",
+  },
+  _focusVisible: { _after: { outline: "[3px solid var(--colors-blue-s80)]" } },
+});
+
+const activateHandle = (event: KeyboardEvent<HTMLDivElement>) => {
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    event.stopPropagation();
+    event.currentTarget.click();
+  }
+};
+
+export const NodeHandles = ({ isConnectable }: { isConnectable: boolean }) => {
+  const { enableAutomaticArcConnections, compactNodes } =
+    use(UserSettingsContext);
+  const nodeId = useNodeId();
+  const node = useStore((state) =>
+    nodeId ? state.nodeLookup.get(nodeId) : undefined,
+  );
+  const nodeKind = node?.type;
+  const sourceKind = useStore((state) =>
+    state.connection.inProgress
+      ? state.connection.fromNode.type
+      : state.connectionClickStartHandle
+        ? state.nodeLookup.get(state.connectionClickStartHandle.nodeId)?.type
+        : undefined,
+  );
+  const isActiveTarget = useStore(
+    (state) =>
+      state.connection.isValid === true &&
+      state.connection.toNode?.id === nodeId,
+  );
+
+  const canReceive =
+    isConnectable &&
+    ((sourceKind === "place" && nodeKind === "transition") ||
+      (sourceKind === "transition" && nodeKind === "place"));
+  const borderRadius =
+    nodeKind === "place" ? "999px" : compactNodes ? "0" : "12px";
+
+  return (
+    <>
+      <Handle
+        type="target"
+        position={Position.Left}
+        isConnectable={isConnectable}
+        isConnectableStart={!enableAutomaticArcConnections}
+        isConnectableEnd={!enableAutomaticArcConnections || canReceive}
+        tabIndex={enableAutomaticArcConnections && canReceive ? 0 : undefined}
+        role={enableAutomaticArcConnections ? "button" : undefined}
+        aria-hidden={
+          enableAutomaticArcConnections && !canReceive ? true : undefined
+        }
+        aria-label={
+          enableAutomaticArcConnections ? "Connect arc to this node" : undefined
+        }
+        onKeyDown={enableAutomaticArcConnections ? activateHandle : undefined}
+        className={
+          enableAutomaticArcConnections ? targetHandleStyle : undefined
+        }
+        style={{
+          ...handleStyling,
+          ...(enableAutomaticArcConnections
+            ? {
+                "--arc-target-width": `${node?.measured.width ?? 0}px`,
+                "--arc-target-height": `${node?.measured.height ?? 0}px`,
+                "--arc-target-radius": borderRadius,
+                "--arc-target-outline": isActiveTarget
+                  ? "3px solid var(--colors-blue-s80)"
+                  : "none",
+                border: "none",
+                background: "transparent",
+                outline: "none",
+                pointerEvents: canReceive ? "all" : "none",
+                zIndex: canReceive ? 10 : -1,
+              }
+            : {}),
+        }}
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        isConnectable={isConnectable}
+        isConnectableStart={isConnectable}
+        isConnectableEnd={!enableAutomaticArcConnections}
+        tabIndex={
+          enableAutomaticArcConnections && isConnectable ? 0 : undefined
+        }
+        role={enableAutomaticArcConnections ? "button" : undefined}
+        aria-label={
+          enableAutomaticArcConnections ? "Create outgoing arc" : undefined
+        }
+        onKeyDown={enableAutomaticArcConnections ? activateHandle : undefined}
+        className={
+          enableAutomaticArcConnections ? launchHandleStyle : undefined
+        }
+        style={
+          enableAutomaticArcConnections
+            ? {
+                width: 9,
+                height: 9,
+                right: 0,
+                border: "none",
+                background: "transparent",
+                zIndex: 11,
+                visibility: isConnectable && !sourceKind ? "visible" : "hidden",
+              }
+            : handleStyling
+        }
+      />
+    </>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/shared/outline-arcs.test.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/shared/outline-arcs.test.ts
new file mode 100644
index 00000000000..9ce6b7a2d53
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/shared/outline-arcs.test.ts
@@ -0,0 +1,112 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  getOutlineArcPath,
+  getOutlineAttachment,
+  type OutlineNode,
+} from "./outline-arcs";
+
+const circle: OutlineNode = {
+  position: { x: 40, y: 60 },
+  width: 100,
+  height: 100,
+  cornerRadius: 50,
+};
+
+describe("outline attachments", () => {
+  it.each([0, 30, 45, 90, 135, 180, 225, 270, 315])(
+    "intersects a circle at %s degrees with an outward unit normal",
+    (degrees) => {
+      const angle = (degrees * Math.PI) / 180;
+      const direction = { x: Math.cos(angle), y: Math.sin(angle) };
+      const { point, normal } = getOutlineAttachment(circle, direction);
+      expect(point.x).toBeCloseTo(circle.position.x + 50 * direction.x);
+      expect(point.y).toBeCloseTo(circle.position.y + 50 * direction.y);
+      expect(normal.x).toBeCloseTo(direction.x);
+      expect(normal.y).toBeCloseTo(direction.y);
+    },
+  );
+
+  it("uses the top of a wide capsule and the curve at its end", () => {
+    const capsule = { ...circle, width: 200, height: 40, cornerRadius: 20 };
+    const top = getOutlineAttachment(capsule, { x: 1, y: -1 });
+    expect(top.point).toEqual({ x: 60, y: 40 });
+    expect(top.normal).toEqual({ x: 0, y: -1 });
+
+    const end = getOutlineAttachment(capsule, { x: 10, y: 1 });
+    expect(Math.hypot(end.point.x - 120, end.point.y - 60)).toBeCloseTo(20);
+    expect(Math.hypot(end.normal.x, end.normal.y)).toBeCloseTo(1);
+    expect(end.normal.x).toBeGreaterThan(0);
+    expect(end.normal.y).toBeGreaterThan(0);
+  });
+
+  it("clips a diagonal to a rounded corner rather than its bounding box", () => {
+    const rounded = { ...circle, cornerRadius: 12 };
+    const { point, normal } = getOutlineAttachment(rounded, { x: 1, y: 1 });
+    expect(point.x).toBeCloseTo(40 + 38 + 12 / Math.sqrt(2));
+    expect(point.y).toBeCloseTo(60 + 38 + 12 / Math.sqrt(2));
+    expect(normal.x).toBeCloseTo(1 / Math.sqrt(2));
+    expect(normal.y).toBeCloseTo(1 / Math.sqrt(2));
+  });
+
+  it("keeps rectangular transitions on their boundary", () => {
+    const rectangle = { ...circle, width: 160, height: 40, cornerRadius: 0 };
+    expect(getOutlineAttachment(rectangle, { x: -1, y: 0 })).toEqual({
+      point: { x: -40, y: 60 },
+      normal: { x: -1, y: 0 },
+    });
+    expect(getOutlineAttachment(rectangle, { x: 1, y: 1 })).toEqual({
+      point: { x: 60, y: 80 },
+      normal: { x: 0, y: 1 },
+    });
+  });
+});
+
+describe("outline arc paths", () => {
+  const source = { ...circle, position: { x: 0, y: 0 } };
+  const target = { ...circle, position: { x: 300, y: 0 } };
+
+  it("places the label halfway along a symmetric connection", () => {
+    const [path, labelX, labelY] = getOutlineArcPath(source, target);
+    expect(path).toMatch(/^M 50,0 C /);
+    expect(path).toMatch(/ 250,0$/);
+    expect(labelX).toBe(150);
+    expect(labelY).toBe(0);
+  });
+
+  it("separates both directions onto opposite sides", () => {
+    const [forward, forwardX, forwardY] = getOutlineArcPath(
+      source,
+      target,
+      true,
+    );
+    const [reverse, reverseX, reverseY] = getOutlineArcPath(
+      target,
+      source,
+      true,
+    );
+    expect(forward).not.toBe(reverse);
+    expect(forwardX).toBeCloseTo(reverseX);
+    expect(forwardY).toBeGreaterThan(0);
+    expect(reverseY).toBeCloseTo(-forwardY);
+  });
+
+  it("ends an unsnapped preview at the pointer", () => {
+    const [path] = getOutlineArcPath(source, { x: 75, y: 200 });
+    expect(path).toMatch(/ 75,200$/);
+  });
+
+  it.each([0, 1, 50, 100])(
+    "stays finite with %s pixels between centers",
+    (distance) => {
+      const result = getOutlineArcPath(
+        source,
+        { ...target, position: { x: distance, y: 0 } },
+        true,
+      );
+      expect(result[0]).not.toMatch(/NaN|Infinity/);
+      expect(Number.isFinite(result[1])).toBe(true);
+      expect(Number.isFinite(result[2])).toBe(true);
+    },
+  );
+});
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/shared/outline-arcs.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/shared/outline-arcs.ts
new file mode 100644
index 00000000000..baa5c9e02a3
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/shared/outline-arcs.ts
@@ -0,0 +1,132 @@
+import type { CanvasNode, CanvasPoint } from "../../../../canvas-scene";
+
+export type OutlineNode = {
+  position: CanvasPoint;
+  width: number;
+  height: number;
+  cornerRadius: number;
+};
+
+export type OutlineArcPath = [path: string, labelX: number, labelY: number];
+
+export const getOutlineNode = (
+  node: CanvasNode,
+  compactNodes: boolean,
+): OutlineNode | null =>
+  node.kind === "componentInstance"
+    ? null
+    : {
+        position: node.position,
+        width: node.width,
+        height: node.height,
+        cornerRadius:
+          node.kind === "place"
+            ? Math.min(node.width, node.height) / 2
+            : compactNodes
+              ? 0
+              : 12,
+      };
+
+export const getOutlineAttachment = (
+  node: OutlineNode,
+  direction: CanvasPoint,
+): { point: CanvasPoint; normal: CanvasPoint } => {
+  const length = Math.hypot(direction.x, direction.y);
+  const unit =
+    length > 0
+      ? { x: direction.x / length, y: direction.y / length }
+      : { x: 1, y: 0 };
+  const halfWidth = Math.max(0, node.width / 2);
+  const halfHeight = Math.max(0, node.height / 2);
+  const radius = Math.max(
+    0,
+    Math.min(node.cornerRadius, halfWidth, halfHeight),
+  );
+  const horizontalDistance =
+    unit.x === 0 ? Infinity : halfWidth / Math.abs(unit.x);
+  const verticalDistance =
+    unit.y === 0 ? Infinity : halfHeight / Math.abs(unit.y);
+  let distance = Math.min(horizontalDistance, verticalDistance);
+  let normal =
+    horizontalDistance < verticalDistance
+      ? { x: Math.sign(unit.x), y: 0 }
+      : { x: 0, y: Math.sign(unit.y) };
+
+  if (
+    radius > 0 &&
+    Math.abs(unit.x * distance) > halfWidth - radius &&
+    Math.abs(unit.y * distance) > halfHeight - radius
+  ) {
+    const corner = {
+      x: Math.sign(unit.x) * (halfWidth - radius),
+      y: Math.sign(unit.y) * (halfHeight - radius),
+    };
+    const projection = unit.x * corner.x + unit.y * corner.y;
+    distance =
+      projection +
+      Math.sqrt(
+        Math.max(
+          0,
+          projection ** 2 - corner.x ** 2 - corner.y ** 2 + radius ** 2,
+        ),
+      );
+    normal = {
+      x: (unit.x * distance - corner.x) / radius,
+      y: (unit.y * distance - corner.y) / radius,
+    };
+  }
+
+  return {
+    point: {
+      x: node.position.x + unit.x * distance,
+      y: node.position.y + unit.y * distance,
+    },
+    normal,
+  };
+};
+
+export const getOutlineArcPath = (
+  source: OutlineNode,
+  target: OutlineNode | CanvasPoint,
+  hasReverseArc = false,
+): OutlineArcPath => {
+  const targetCenter = "position" in target ? target.position : target;
+  const direction = {
+    x: targetCenter.x - source.position.x,
+    y: targetCenter.y - source.position.y,
+  };
+  if (direction.x === 0 && direction.y === 0) {
+    direction.x = 1;
+  }
+  const lane = hasReverseArc ? 0.3 : 0;
+  const sourceAttachment = getOutlineAttachment(source, {
+    x: direction.x - direction.y * lane,
+    y: direction.y + direction.x * lane,
+  });
+  const targetAttachment =
+    "position" in target
+      ? getOutlineAttachment(target, {
+          x: -direction.x - direction.y * lane,
+          y: -direction.y + direction.x * lane,
+        })
+      : { point: target, normal: { x: 0, y: 0 } };
+  const start = sourceAttachment.point;
+  const end = targetAttachment.point;
+  const controlDistance = Math.min(
+    80,
+    Math.hypot(end.x - start.x, end.y - start.y) * 0.35,
+  );
+  const firstControl = {
+    x: start.x + sourceAttachment.normal.x * controlDistance,
+    y: start.y + sourceAttachment.normal.y * controlDistance,
+  };
+  const lastControl = {
+    x: end.x + targetAttachment.normal.x * controlDistance,
+    y: end.y + targetAttachment.normal.y * controlDistance,
+  };
+  return [
+    `M ${start.x},${start.y} C ${firstControl.x},${firstControl.y} ${lastControl.x},${lastControl.y} ${end.x},${end.y}`,
+    (start.x + 3 * firstControl.x + 3 * lastControl.x + end.x) / 8,
+    (start.y + 3 * firstControl.y + 3 * lastControl.y + end.y) / 8,
+  ];
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/use-react-flow-elements.test.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/use-react-flow-elements.test.tsx
new file mode 100644
index 00000000000..f7f7e33e66e
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/use-react-flow-elements.test.tsx
@@ -0,0 +1,219 @@
+/** @vitest-environment jsdom */
+import { cleanup, fireEvent, renderHook, screen } from "@testing-library/react";
+import { useState, type ReactNode } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { compactNodeDimensions } from "@hashintel/petrinaut-core";
+
+import {
+  defaultUserSettingsContextValue,
+  UserSettingsContext,
+} from "../../../../../../react/state/user-settings-context";
+import { useReactFlowElements } from "./use-react-flow-elements";
+
+import type { CanvasArc, CanvasNode, CanvasScene } from "../../../canvas-scene";
+
+afterEach(cleanup);
+
+const nodeBase = {
+  position: { x: 0, y: 0 },
+  width: 100,
+  height: 100,
+  label: "Node",
+  dragging: false,
+  selected: false,
+  hovered: false,
+  focus: "none" as const,
+};
+const nodes: CanvasNode[] = [
+  {
+    ...nodeBase,
+    id: "place",
+    kind: "place",
+    dynamicsEnabled: false,
+    hasColorType: false,
+    hasVisualizer: false,
+    visualizerPinned: false,
+    typeColor: undefined,
+  },
+  {
+    ...nodeBase,
+    id: "transition",
+    kind: "transition",
+    position: { x: 300, y: 200 },
+    width: 160,
+    height: 80,
+    lambdaType: "none",
+  },
+  {
+    ...nodeBase,
+    id: "subnet",
+    kind: "componentInstance",
+    position: { x: 600, y: 0 },
+    subnetName: "Subnet",
+    ports: [{ id: "port", name: "Port" }],
+  },
+];
+const arcBase: Omit<CanvasArc, "id" | "sourceId" | "targetId"> = {
+  kind: "read",
+  weight: 3,
+  sourcePortId: null,
+  targetPortId: null,
+  transitionId: "transition",
+  color: "#123456",
+  selected: true,
+  focus: "none",
+};
+const scene: CanvasScene = {
+  nodes,
+  dimensions: compactNodeDimensions,
+  focusActive: false,
+  arcs: [
+    { ...arcBase, id: "input", sourceId: "place", targetId: "transition" },
+    {
+      ...arcBase,
+      id: "output",
+      sourceId: "transition",
+      targetId: "place",
+      kind: "standard",
+    },
+    {
+      ...arcBase,
+      id: "port-input",
+      sourceId: "subnet",
+      targetId: "transition",
+      sourcePortId: "port",
+    },
+    {
+      ...arcBase,
+      id: "port-output",
+      sourceId: "transition",
+      targetId: "subnet",
+      targetPortId: "port",
+    },
+  ],
+};
+
+const Settings = ({ children }: { children: ReactNode }) => {
+  const [enabled, setEnabled] = useState(false);
+  return (
+    <UserSettingsContext
+      value={{
+        ...defaultUserSettingsContextValue,
+        enableAutomaticArcConnections: enabled,
+      }}
+    >
+      <button type="button" onClick={() => setEnabled(!enabled)}>
+        Toggle automatic arcs
+      </button>
+      {children}
+    </UserSettingsContext>
+  );
+};
+
+describe("automatic arc rendering", () => {
+  it("changes only ordinary arc geometry and restores all legacy edge data when switched off", () => {
+    const { result } = renderHook(() => useReactFlowElements(scene), {
+      wrapper: Settings,
+    });
+    const legacy = result.current.edges;
+    expect(legacy.every((edge) => edge.data?.outlinePath === undefined)).toBe(
+      true,
+    );
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Toggle automatic arcs" }),
+    );
+    for (const edge of result.current.edges) {
+      const original = legacy.find((candidate) => candidate.id === edge.id);
+      if (edge.id.startsWith("port-")) {
+        expect(edge).toEqual(original);
+      } else {
+        expect(edge.data?.outlinePath).toBeDefined();
+        expect({
+          ...edge,
+          data: { ...edge.data, outlinePath: undefined },
+        }).toEqual(original);
+      }
+    }
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Toggle automatic arcs" }),
+    );
+    expect(result.current.edges).toEqual(legacy);
+  });
+
+  it("recomputes attachments during node movement without mutating the scene", () => {
+    const snapshot = structuredClone(scene);
+    const { result, rerender } = renderHook(
+      (input: CanvasScene) => useReactFlowElements(input),
+      { initialProps: scene, wrapper: Settings },
+    );
+    fireEvent.click(
+      screen.getByRole("button", { name: "Toggle automatic arcs" }),
+    );
+    const previous = result.current.edges.find((edge) => edge.id === "input")
+      ?.data?.outlinePath;
+    rerender({
+      ...scene,
+      nodes: nodes.map((node) =>
+        node.id === "transition"
+          ? { ...node, position: { x: -200, y: 100 }, dragging: true }
+          : node,
+      ),
+    });
+    expect(
+      result.current.edges.find((edge) => edge.id === "input")?.data
+        ?.outlinePath,
+    ).not.toEqual(previous);
+    expect(scene).toEqual(snapshot);
+  });
+
+  it("preserves unaffected nodes and arcs when focus changes", () => {
+    const { result, rerender } = renderHook(
+      (input: CanvasScene) => useReactFlowElements(input),
+      { initialProps: scene, wrapper: Settings },
+    );
+    fireEvent.click(
+      screen.getByRole("button", { name: "Toggle automatic arcs" }),
+    );
+    const previous = result.current;
+    rerender({
+      ...scene,
+      focusActive: true,
+      nodes: nodes.map((node) =>
+        node.id === "place"
+          ? { ...node, focus: "focused", hovered: true }
+          : { ...node },
+      ),
+      arcs: scene.arcs.map((arc) =>
+        arc.id === "input" ? { ...arc, focus: "outgoing" } : { ...arc },
+      ),
+    });
+
+    for (const node of result.current.nodes) {
+      const original = previous.nodes.find(
+        (candidate) => candidate.id === node.id,
+      );
+      if (node.id === "place") {
+        expect(node).not.toBe(original);
+        expect(node.data.focus).toBe("focused");
+      } else {
+        expect(node).toBe(original);
+      }
+    }
+    for (const edge of result.current.edges) {
+      const original = previous.edges.find(
+        (candidate) => candidate.id === edge.id,
+      );
+      if (edge.id === "input") {
+        expect(edge).not.toBe(original);
+        expect(edge.data?.focus).toBe("outgoing");
+        expect(edge.data?.outlinePath).toEqual(original?.data?.outlinePath);
+        expect(edge.markerEnd).not.toEqual(original?.markerEnd);
+      } else {
+        expect(edge).toBe(original);
+      }
+    }
+  });
+});
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/use-react-flow-elements.ts b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/use-react-flow-elements.ts
index beefd3f60fa..121b603598b 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/use-react-flow-elements.ts
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/renderers/react-flow/react-flow-canvas/use-react-flow-elements.ts
@@ -1,8 +1,11 @@
 import { MarkerType } from "@xyflow/react";
+import { use } from "react";
 
+import { UserSettingsContext } from "../../../../../../react/state/user-settings-context";
 import { arcHaloColor } from "../../../styles/focus";
 import { useStableItems } from "../../../use-stable-items";
 import { portInHandleId, portOutHandleId } from "./port-handles";
+import { getOutlineArcPath, getOutlineNode } from "./shared/outline-arcs";
 
 import type { CanvasArc, CanvasNode, CanvasScene } from "../../../canvas-scene";
 import type { ArcEdgeType, NodeType } from "./react-flow-types";
@@ -79,10 +82,37 @@ const toReactFlowEdge = (arc: CanvasArc): ArcEdgeType => {
 export const useReactFlowElements = (
   scene: CanvasScene,
 ): { nodes: NodeType[]; edges: ArcEdgeType[] } => {
+  const { enableAutomaticArcConnections, compactNodes } =
+    use(UserSettingsContext);
+  const nodesById = new Map(scene.nodes.map((node) => [node.id, node]));
+  const connections = new Set(
+    scene.arcs
+      .filter((arc) => !arc.sourcePortId && !arc.targetPortId)
+      .map((arc) => JSON.stringify([arc.sourceId, arc.targetId])),
+  );
+
   // Rebuilt from the scene, then held at their previous identity where
   // nothing changed, so React Flow re-renders only what a hover touched.
   return {
     nodes: useStableItems(scene.nodes.map(toReactFlowNode)),
-    edges: useStableItems(scene.arcs.map(toReactFlowEdge)),
+    edges: useStableItems(
+      scene.arcs.map((arc) => {
+        const edge = toReactFlowEdge(arc);
+        if (enableAutomaticArcConnections && edge.data) {
+          const source = nodesById.get(arc.sourceId);
+          const target = nodesById.get(arc.targetId);
+          const sourceOutline = source && getOutlineNode(source, compactNodes);
+          const targetOutline = target && getOutlineNode(target, compactNodes);
+          if (sourceOutline && targetOutline) {
+            edge.data.outlinePath = getOutlineArcPath(
+              sourceOutline,
+              targetOutline,
+              connections.has(JSON.stringify([arc.targetId, arc.sourceId])),
+            );
+          }
+        }
+        return edge;
+      }),
+    ),
   };
 };