frontend/src/components/network/edges/ConnectionEdge.tsx

@@ -31,6 +31,7 @@ function getEdgePath(routing: string | null | undefined, props: EdgeProps) {
   }
   if (routing === 'curved') return getBezierPath(base)
   if (routing === 'step') return getSmoothStepPath(base)
+  if (routing === 'orthogonal') return getSmoothStepPath({ ...base, borderRadius: 0 })
   return getStraightPath(base)
 }
 

frontend/src/components/network/panels/PropertiesPanel.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useState, useEffect } from 'react'
 import {
-  Trash2, Minus, Spline, GitBranch, BringToFront, SendToBack,
+  Trash2, Minus, Spline, GitBranch, CornerUpRight, BringToFront, SendToBack,
   AlignStartVertical, AlignCenterHorizontal, AlignEndVertical,
   AlignStartHorizontal, AlignCenterVertical, AlignEndHorizontal,
   AlignHorizontalSpaceAround, AlignVerticalSpaceAround,
@@ -264,6 +264,7 @@ export function PropertiesPanel({
                 { value: null, icon: Minus, label: 'Straight' },
                 { value: 'curved', icon: Spline, label: 'Curved' },
                 { value: 'step', icon: GitBranch, label: 'Step' },
+                { value: 'orthogonal', icon: CornerUpRight, label: 'Ortho' },
               ] as const).map(({ value, icon: Icon, label }) => {
                 const routing = (edgeData.routing as string | null | undefined) ?? null
                 const active = routing === value

frontend/src/types/network-diagram.ts

@@ -28,7 +28,7 @@ export interface DiagramEdge {
   connectionType: string
   speed: string | null
   notes: string | null
-  routing?: string | null
+  routing?: 'curved' | 'step' | 'orthogonal' | null
 }
 
 export interface DeviceTypeResponse {