Приводил к стилу consta UI

src/DiagramEditor.tsx

@@ -32,7 +32,7 @@ import { nodeTypes, NodesWithChildrenContext, ModeContext } from './nodes';
 import { NodeInspector } from './NodeInspector';
 import { EdgeInspector } from './EdgeInspector';
 import { debounce, serializeDocument } from './serialize';
-import type { DiagramDocument, DiagramNodeData, NodeKind } from './types';
+import type { DiagramDocument, DiagramEdgeData, DiagramNodeData, EdgeLineStyle, NodeKind } from './types';
 import './diagram.css';
 
 interface DiagramEditorProps {
@@ -42,6 +42,16 @@ interface DiagramEditorProps {
 
 const DEFAULT_EDGE_TYPE = 'smoothstep';
 const DEFAULT_MARKER_END = { type: MarkerType.ArrowClosed };
+const DEFAULT_EDGE_STROKE_WIDTH = 1;
+const DEFAULT_EDGE_BORDER_RADIUS = 5; // matches getSmoothStepPath's own default
+const DEFAULT_EDGE_COLOR = '#b1b1b7'; // xyflow's own default edge color
+const DEFAULT_EDGE_TEXT_COLOR = '#FFFFFF';
+const DEFAULT_EDGE_FONT_SIZE = 11;
+const EDGE_DASH_ARRAY: Record<EdgeLineStyle, string | undefined> = {
+  solid: undefined,
+  dashed: '8 4',
+  dotted: '1.5 4',
+};
 const MAX_HISTORY = 50;
 const TYPING_HISTORY_THROTTLE_MS = 1000;
 
@@ -240,7 +250,32 @@ function DiagramCanvas({ initialValue, onChange }: DiagramEditorProps) {
 
   const visibleEdges = useMemo(() => {
     const visibleIds = new Set(visibleNodes.map((node) => node.id));
-    return edges.filter((edge) => visibleIds.has(edge.source) && visibleIds.has(edge.target));
+    return edges
+      .filter((edge) => visibleIds.has(edge.source) && visibleIds.has(edge.target))
+      .map((edge) => {
+        const edgeData = edge.data as DiagramEdgeData | undefined;
+        const edgeColor = edgeData?.color ?? DEFAULT_EDGE_COLOR;
+        return {
+          ...edge,
+          style: {
+            ...edge.style,
+            stroke: edgeColor,
+            strokeWidth: edgeData?.strokeWidth ?? DEFAULT_EDGE_STROKE_WIDTH,
+            strokeDasharray: EDGE_DASH_ARRAY[edgeData?.lineStyle ?? 'solid'],
+          },
+          pathOptions: { borderRadius: edgeData?.borderRadius ?? DEFAULT_EDGE_BORDER_RADIUS },
+          markerEnd: { type: MarkerType.ArrowClosed, color: edgeColor },
+          // Label renders as its own small chip — same color as the line, configurable text color.
+          labelBgStyle: { fill: edgeColor },
+          labelStyle: {
+            fill: edgeData?.textColor ?? DEFAULT_EDGE_TEXT_COLOR,
+            fontWeight: 600,
+            fontSize: edgeData?.fontSize ?? DEFAULT_EDGE_FONT_SIZE,
+          },
+          labelBgPadding: [6, 4] as [number, number],
+          labelBgBorderRadius: 4,
+        };
+      });
   }, [edges, visibleNodes]);
 
   const breadcrumbPath = useMemo(() => {
@@ -417,6 +452,19 @@ function DiagramCanvas({ initialValue, onChange }: DiagramEditorProps) {
     [selectedEdgeId, nodes, edges, emitChange, pushHistoryThrottled],
   );
 
+  const updateSelectedEdgeData = useCallback(
+    (patch: Partial<DiagramEdgeData>) => {
+      if (!selectedEdgeId) return;
+      pushHistoryThrottled(nodes, edges);
+      const next = edges.map((edge) =>
+        edge.id === selectedEdgeId ? { ...edge, data: { ...edge.data, ...patch } } : edge,
+      );
+      setEdges(next);
+      emitChange(nodes, next);
+    },
+    [selectedEdgeId, nodes, edges, emitChange, pushHistoryThrottled],
+  );
+
   const getViewportCenter = useCallback(() => {
     const rect = canvasWrapperRef.current?.getBoundingClientRect();
     if (!rect) return { x: 0, y: 0 };
@@ -696,7 +744,9 @@ function DiagramCanvas({ initialValue, onChange }: DiagramEditorProps) {
           <EdgeInspector
             edgeId={selectedEdge.id}
             label={typeof selectedEdge.label === 'string' ? selectedEdge.label : ''}
-            onChange={updateSelectedEdgeLabel}
+            data={(selectedEdge.data as DiagramEdgeData) ?? {}}
+            onLabelChange={updateSelectedEdgeLabel}
+            onDataChange={updateSelectedEdgeData}
             onDelete={deleteSelectedEdge}
             onBringToFront={bringSelectedEdgeToFront}
             onSendToBack={sendSelectedEdgeToBack}