add

src/nodes/custom/CustomNode.tsx

@@ -0,0 +1,83 @@
+// CustomNode.tsx
+import React, { memo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+
+interface NodeProps {
+  data: {
+    label: string;
+  };
+  isConnectable: boolean;
+}
+
+const CustomNode: React.FC<NodeProps> = ({ data, isConnectable }) => {
+  return (
+    <>
+      <Handle
+        type="target"
+        position={Position.Top}
+        onConnect={(params) => console.log('handle onConnect', params)}
+        isConnectable={isConnectable}
+      />
+      <div
+        style={{
+          width: 275,
+          padding: 10,
+          border: '1px solid #1a192b',
+          background: '#fff',
+        }}
+      >
+        {data.label}
+      </div>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="yes"
+        style={{ bottom: 0, left: 45, background: '#555' }}
+        isConnectable={isConnectable}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          left: 30,
+          bottom: -14,
+          background: '#000',
+          color: '#fff',
+          fontSize: 11,
+          paddingLeft: 5,
+          paddingRight: 5,
+          paddingTop: 3,
+          paddingBottom: 3,
+          borderRadius: 5,
+        }}
+      >
+        Yes
+      </div>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="no"
+        style={{ bottom: 0, left: 240, background: '#555' }}
+        isConnectable={isConnectable}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          right: 25,
+          bottom: -10,
+          background: '#000',
+          color: '#fff',
+          paddingLeft: 5,
+          paddingRight: 5,
+          paddingTop: 3,
+          paddingBottom: 3,
+          fontSize: 11,
+          borderRadius: 5,
+        }}
+      >
+        No
+      </div>
+    </>
+  );
+};
+
+export default memo(CustomNode);