I can drag and drop items into the canvas

I

src/components/workflows/assets/Workflows.css

@@ -0,0 +1,67 @@
+.wkf-toolbox-item {
+  cursor: grab;
+}
+
+.wkf-toolbox-item:active {
+    cursor: grabbing;
+}
+
+.wkf-canvas {
+  position: relative;
+  min-height: 600px;
+  background-image:
+      linear-gradient(rgba(0,0,0,.1) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+
+.wkf-workflow-component {
+  position: absolute;
+  cursor: move;
+  border: 2px solid transparent;
+  transition: all 0.2s;
+}
+
+.wkf-workflow-component:hover {
+  border-color: #3b82f6;
+  transform: scale(1.02);
+}
+
+.wkf-workflow-component.selected {
+  border-color: #ef4444;
+  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
+}
+
+.wkf-connection-line {
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.wkf-connection-point {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: #3b82f6;
+  border-radius: 50%;
+  cursor: crosshair;
+  border: 2px solid white;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.wkf-output-point {
+  right: -6px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.wkf-input-point {
+  left: -6px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.wkf-connection-point:hover {
+  background: #ef4444;
+  transform: translateY(-50%) scale(1.2);
+}