diff --git a/package.json b/package.json
index b87c3e5bd7..de9eeb3c13 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "@pureadmin/descriptions": "^1.2.1",
     "@pureadmin/table": "^3.1.2",
     "@pureadmin/utils": "^2.4.7",
+    "@vue-flow/background": "^1.3.0",
     "@vue-flow/core": "^1.33.4",
     "@vueuse/core": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fcdd2e532b..f94cdb8c5d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ dependencies:
   '@pureadmin/utils':
     specifier: ^2.4.7
     version: 2.4.7(echarts@5.5.0)(vue@3.4.21)
+  '@vue-flow/background':
+    specifier: ^1.3.0
+    version: 1.3.0(@vue-flow/core@1.33.4)(vue@3.4.21)
   '@vue-flow/core':
     specifier: ^1.33.4
     version: 1.33.4(vue@3.4.21)
@@ -2365,6 +2368,16 @@ packages:
       path-browserify: 1.0.1
     dev: true
 
+  /@vue-flow/background@1.3.0(@vue-flow/core@1.33.4)(vue@3.4.21):
+    resolution: {integrity: sha512-fu/8s9wzSOQIitnSTI10XT3bzTtagh4h8EF2SWwtlDklOZjAaKy75lqv4htHa3wigy/r4LGCOGwLw3Pk88/AxA==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+    dependencies:
+      '@vue-flow/core': 1.33.4(vue@3.4.21)
+      vue: 3.4.21(typescript@5.4.2)
+    dev: false
+
   /@vue-flow/core@1.33.4(vue@3.4.21):
     resolution: {integrity: sha512-ryoamKfQ5pgtdv//Gjpyc4nsawMOwfI2jVzOPvZ92VQs78L4lidiWD7UybqeEkrGw6UPue1CGlzoy/4KlOWcSg==}
     peerDependencies:
diff --git a/src/views/vue-flow/layouting/animationEdge.vue b/src/views/vue-flow/layouting/animationEdge.vue
index 64f8fbf4f3..3164fd6468 100644
--- a/src/views/vue-flow/layouting/animationEdge.vue
+++ b/src/views/vue-flow/layouting/animationEdge.vue
@@ -1,75 +1,138 @@
-<script setup lang="ts">
-import type { EdgeProps } from "@vue-flow/core";
-import { ref, toRef, computed, watch } from "vue";
+<script lang="ts" setup>
+import { computed, nextTick, ref, toRef, watch } from "vue";
 import { TransitionPresets, executeTransition } from "@vueuse/core";
 import {
   BaseEdge,
   EdgeLabelRenderer,
+  Position,
   getSmoothStepPath,
-  useNodesData
+  useNodesData,
+  useVueFlow
 } from "@vue-flow/core";
 
-const props = defineProps<EdgeProps>();
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  source: {
+    type: String,
+    required: true
+  },
+  target: {
+    type: String,
+    required: true
+  },
+  sourceX: {
+    type: Number,
+    required: true
+  },
+  sourceY: {
+    type: Number,
+    required: true
+  },
+  targetX: {
+    type: Number,
+    required: true
+  },
+  targetY: {
+    type: Number,
+    required: true
+  },
+  sourcePosition: {
+    type: String,
+    default: Position.Right
+  },
+  targetPosition: {
+    type: String,
+    default: Position.Left
+  }
+});
+
+const { findEdge } = useVueFlow();
+
+const nodesData = useNodesData([props.target, props.source]);
 
 const edgePoint = ref(0);
 
-const sourceNodeData = useNodesData(() => props.source);
+const edgeRef = ref();
+
+const labelPosition = ref({ x: 0, y: 0 });
+
+const currentLength = ref(0);
+
+const targetNodeData = toRef(() => nodesData.value[0].data);
+
+const sourceNodeData = toRef(() => nodesData.value[1].data);
 
 const isFinished = toRef(() => sourceNodeData.value.isFinished);
 
+const isCancelled = toRef(() => targetNodeData.value.isCancelled);
+
 const isAnimating = ref(false);
 
 const edgeColor = toRef(() => {
-  if (sourceNodeData.value.hasError) {
+  if (targetNodeData.value.hasError) {
     return "#f87171";
   }
 
-  if (sourceNodeData.value.isFinished) {
-    return "#10b981";
+  if (targetNodeData.value.isFinished) {
+    return "#42B983";
   }
 
-  if (sourceNodeData.value.isCancelled) {
+  if (targetNodeData.value.isCancelled || targetNodeData.value.isSkipped) {
     return "#fbbf24";
   }
 
-  if (sourceNodeData.value.isSkipped) {
-    return "#f59e0b";
+  if (targetNodeData.value.isRunning || isAnimating.value) {
+    return "#2563eb";
   }
 
   return "#6b7280";
 });
 
-const edgeRef = ref<InstanceType<typeof BaseEdge>>();
+// @ts-expect-error
+const path = computed(() => getSmoothStepPath(props));
 
-const circlePosition = ref({ x: 0, y: 0 });
+watch(isCancelled, isCancelled => {
+  if (isCancelled) {
+    reset();
+  }
+});
 
-const currentLength = ref(0);
+watch(isAnimating, isAnimating => {
+  const edge = findEdge(props.id);
 
-const path = computed(() => getSmoothStepPath(props));
+  if (edge) {
+    // we set the `isAnimating` flag, so we can wait until the next node gets executed
+    edge.data = {
+      ...edge.data,
+      isAnimating
+    };
+  }
+});
 
 watch(edgePoint, point => {
   const pathEl = edgeRef.value?.pathEl;
 
-  if (!pathEl || point === 0) {
+  if (!pathEl || point === 0 || !isAnimating.value) {
     return;
   }
 
-  const currLength = pathEl.getTotalLength();
+  const nextLength = pathEl.getTotalLength();
 
-  if (currentLength.value !== currLength) {
-    return runAnimation();
+  // if length changed, restart animation
+  if (currentLength.value !== nextLength) {
+    runAnimation();
+    return;
   }
 
-  circlePosition.value = pathEl.getPointAtLength(point);
+  labelPosition.value = pathEl.getPointAtLength(point);
 });
 
-watch(isFinished, async (isFinished, _, onCleanup) => {
+watch(isFinished, isFinished => {
   if (isFinished) {
-    await runAnimation();
-
-    edgePoint.value = 0;
-    currentLength.value = 0;
-    circlePosition.value = { x: 0, y: 0 };
+    runAnimation();
   }
 });
 
@@ -80,44 +143,77 @@ async function runAnimation() {
     return;
   }
 
-  isAnimating.value = true;
-
   const totalLength = pathEl.getTotalLength();
 
+  // if animation restarted, use last edgePoint value to continue from
   const from = edgePoint.value || 0;
 
+  // update initial label position
+  labelPosition.value = pathEl.getPointAtLength(from);
+
+  isAnimating.value = true;
+
+  // update currentLength value, so we can check if the path length changed during animation
   if (currentLength.value !== totalLength) {
     currentLength.value = totalLength;
   }
 
   await executeTransition(edgePoint, from, totalLength, {
-    transition: TransitionPresets.easeInOutCubic
+    transition: TransitionPresets.easeInOutCubic,
+    duration: Math.max(1500, totalLength / 2),
+    abort: () => !isAnimating.value
   });
 
-  isAnimating.value = false;
+  reset();
+}
+
+function reset() {
+  nextTick(() => {
+    edgePoint.value = 0;
+    currentLength.value = 0;
+    labelPosition.value = { x: 0, y: 0 };
+    isAnimating.value = false;
+  });
 }
 </script>
 
 <template>
   <BaseEdge
-    v-bind="$attrs"
     :id="id"
     ref="edgeRef"
     :path="path[0]"
-    :marker-end="markerEnd"
     :style="{ stroke: edgeColor }"
   />
 
   <EdgeLabelRenderer v-if="isAnimating">
     <div
       :style="{
-        position: 'absolute',
-        transform: `translate(-50%, -50%) translate(${circlePosition.x}px,${circlePosition.y}px)`,
-        pointerEvents: 'all'
+        transform: `translate(-50%, -50%) translate(${labelPosition.x}px,${labelPosition.y}px)`
       }"
-      class="nodrag nopan"
+      class="nodrag nopan animated-edge-label"
     >
-      📦
+      <span class="truck">
+        <span class="box">📦</span>
+        🚚
+      </span>
     </div>
   </EdgeLabelRenderer>
 </template>
+
+<style scoped>
+.animated-edge-label {
+  position: absolute;
+  z-index: 100;
+}
+
+.truck {
+  position: relative;
+  display: inline-block;
+  transform: scaleX(-1);
+}
+
+.box {
+  position: absolute;
+  top: -10px;
+}
+</style>
diff --git a/src/views/vue-flow/layouting/icon.vue b/src/views/vue-flow/layouting/icon.vue
new file mode 100644
index 0000000000..5e8c059531
--- /dev/null
+++ b/src/views/vue-flow/layouting/icon.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <svg
+    v-if="name === 'play'"
+    viewBox="0 0 24 24"
+    height="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M8 5v14l11-7z" fill="currentColor" />
+  </svg>
+
+  <svg
+    v-else-if="name === 'stop'"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    height="24"
+  >
+    <path
+      fill="currentColor"
+      d="M8 16h8V8H8zm4 6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22"
+    />
+  </svg>
+
+  <svg
+    v-else-if="name === 'horizontal'"
+    viewBox="0 0 24 24"
+    height="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M2,12 L22,12" stroke="currentColor" stroke-width="2" />
+    <path
+      d="M7,7 L2,12 L7,17"
+      stroke="currentColor"
+      stroke-width="2"
+      fill="none"
+    />
+    <path
+      d="M17,7 L22,12 L17,17"
+      stroke="currentColor"
+      stroke-width="2"
+      fill="none"
+    />
+  </svg>
+
+  <svg
+    v-else-if="name === 'vertical'"
+    viewBox="0 0 24 24"
+    height="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M12,2 L12,22" stroke="currentColor" stroke-width="2" />
+    <path
+      d="M7,7 L12,2 L17,7"
+      stroke="currentColor"
+      stroke-width="2"
+      fill="none"
+    />
+    <path
+      d="M7,17 L12,22 L17,17"
+      stroke="currentColor"
+      stroke-width="2"
+      fill="none"
+    />
+  </svg>
+
+  <svg
+    v-else-if="name === 'shuffle'"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    height="24"
+  >
+    <path
+      fill="currentColor"
+      d="M14 20v-2h2.6l-3.175-3.175L14.85 13.4L18 16.55V14h2v6zm-8.6 0L4 18.6L16.6 6H14V4h6v6h-2V7.4zm3.775-9.425L4 5.4L5.4 4l5.175 5.175z"
+    />
+  </svg>
+</template>
diff --git a/src/views/vue-flow/layouting/index.vue b/src/views/vue-flow/layouting/index.vue
index 1cd416cba8..065d3e7bbe 100644
--- a/src/views/vue-flow/layouting/index.vue
+++ b/src/views/vue-flow/layouting/index.vue
@@ -1,64 +1,50 @@
 <script lang="ts" setup>
 import "@vue-flow/core/dist/style.css";
 import "@vue-flow/core/dist/theme-default.css";
-import dagre from "dagre";
-import { ref, nextTick } from "vue";
+import Icon from "./icon.vue";
+import { nextTick, ref } from "vue";
+import { useLayout } from "./useLayout";
+import { useShuffle } from "./useShuffle";
 import ProcessNode from "./processNode.vue";
-import AnimationEdge from "./animationEdge.vue";
 import { useRunProcess } from "./useRunProcess";
+import AnimationEdge from "./animationEdge.vue";
+import { Background } from "@vue-flow/background";
+import { Panel, VueFlow, useVueFlow } from "@vue-flow/core";
 import { initialEdges, initialNodes } from "./initialElements";
-import {
-  ConnectionMode,
-  Panel,
-  Position,
-  VueFlow,
-  useVueFlow
-} from "@vue-flow/core";
 
 const nodes = ref(initialNodes);
 
 const edges = ref(initialEdges);
 
-const dagreGraph = ref(new dagre.graphlib.Graph());
+const cancelOnError = ref(true);
 
-dagreGraph.value.setDefaultEdgeLabel(() => ({}));
+const shuffle = useShuffle();
 
-const { run, stop, isRunning } = useRunProcess(dagreGraph);
+const { graph, layout, previousDirection } = useLayout();
 
-const { findNode, fitView } = useVueFlow();
+// @ts-expect-error
+const { run, stop, reset, isRunning } = useRunProcess({ graph, cancelOnError });
 
-function handleLayout(direction: "TB" | "LR") {
-  dagreGraph.value = new dagre.graphlib.Graph();
-  dagreGraph.value.setDefaultEdgeLabel(() => ({}));
+const { fitView } = useVueFlow();
 
-  const isHorizontal = direction === "LR";
-  dagreGraph.value.setGraph({ rankdir: direction });
+async function shuffleGraph() {
+  await stop();
 
-  for (const node of nodes.value) {
-    const graphNode = findNode(node.id)!;
+  reset(nodes.value);
 
-    dagreGraph.value.setNode(node.id, {
-      width: graphNode.dimensions.width || 150,
-      height: graphNode.dimensions.height || 50
-    });
-  }
+  edges.value = shuffle(nodes.value);
 
-  for (const edge of edges.value) {
-    dagreGraph.value.setEdge(edge.source, edge.target);
-  }
+  nextTick(() => {
+    layoutGraph(previousDirection.value);
+  });
+}
 
-  dagre.layout(dagreGraph.value);
+async function layoutGraph(direction) {
+  await stop();
 
-  nodes.value = nodes.value.map(node => {
-    const nodeWithPosition = dagreGraph.value.node(node.id);
+  reset(nodes.value);
 
-    return {
-      ...node,
-      targetPosition: isHorizontal ? Position.Left : Position.Top,
-      sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
-      position: { x: nodeWithPosition.x, y: nodeWithPosition.y }
-    };
-  });
+  nodes.value = layout(nodes.value, edges.value, direction);
 
   nextTick(() => {
     fitView();
@@ -68,44 +54,86 @@ function handleLayout(direction: "TB" | "LR") {
 </script>
 
 <template>
-  <div class="layoutflow">
+  <div class="layout-flow">
     <VueFlow
       :nodes="nodes"
       :edges="edges"
-      :connection-mode="ConnectionMode.Loose"
-      @nodes-initialized="handleLayout('LR')"
+      @nodes-initialized="layoutGraph('LR')"
     >
       <template #node-process="props">
-        <ProcessNode v-bind="props" />
+        <ProcessNode
+          :data="props.data"
+          :source-position="props.sourcePosition"
+          :target-position="props.targetPosition"
+        />
       </template>
 
-      <template #edge-animation="props">
-        <AnimationEdge v-bind="props" />
+      <template #edge-animation="edgeProps">
+        <AnimationEdge
+          :id="edgeProps.id"
+          :source="edgeProps.source"
+          :target="edgeProps.target"
+          :source-x="edgeProps.sourceX"
+          :source-y="edgeProps.sourceY"
+          :targetX="edgeProps.targetX"
+          :targetY="edgeProps.targetY"
+          :source-position="edgeProps.sourcePosition"
+          :target-position="edgeProps.targetPosition"
+        />
       </template>
 
-      <Panel class="layout-panel" position="top-left">
-        <button @click="handleLayout('TB')">垂直模式</button>
-        <button @click="handleLayout('LR')">水平模式</button>
-      </Panel>
+      <Background />
 
       <Panel class="process-panel" position="top-right">
-        <button v-if="isRunning" @click="stop">🛑</button>
-        <button v-else @click="run(nodes)">▶️</button>
+        <div class="layout-panel">
+          <button v-if="isRunning" class="stop-btn" title="stop" @click="stop">
+            <Icon name="stop" />
+            <span class="spinner" />
+          </button>
+          <button v-else title="start" @click="run(nodes)">
+            <Icon name="play" />
+          </button>
+
+          <button title="set horizontal layout" @click="layoutGraph('LR')">
+            <Icon name="horizontal" />
+          </button>
+
+          <button title="set vertical layout" @click="layoutGraph('TB')">
+            <Icon name="vertical" />
+          </button>
+
+          <button title="shuffle graph" @click="shuffleGraph">
+            <Icon name="shuffle" />
+          </button>
+        </div>
+
+        <!-- <div class="checkbox-panel">
+          <label>Cancel on error</label>
+          <input v-model="cancelOnError" type="checkbox" />
+        </div> -->
       </Panel>
     </VueFlow>
   </div>
 </template>
 
 <style scoped>
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .main-content {
   margin: 0 !important;
 }
 
-.layoutflow {
+.layout-flow {
   width: 100%;
   height: 100%;
-
-  /* background-color: #1a192b; */
 }
 
 .process-panel,
@@ -114,34 +142,65 @@ function handleLayout(direction: "TB" | "LR") {
   gap: 10px;
 }
 
-.process-panel button,
-.layout-panel button {
-  color: white;
-  cursor: pointer;
+.process-panel {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
   background-color: #2d3748;
-  border: none;
   border-radius: 8px;
   box-shadow: 0 0 10px rgb(0 0 0 / 50%);
 }
 
 .process-panel button {
-  width: 50px;
-  height: 50px;
-  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  font-size: 16px;
+  color: white;
+  cursor: pointer;
+  background-color: #4a5568;
+  border: none;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
 }
 
+/* .checkbox-panel {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+} */
+
 .process-panel button:hover,
 .layout-panel button:hover {
-  background-color: #4b5563;
+  background-color: #2563eb;
   transition: background-color 0.2s;
 }
 
-.process-panel button:disabled {
-  cursor: not-allowed;
-  background-color: #4b5563;
+.process-panel label {
+  font-size: 12px;
+  color: white;
 }
 
-.layout-panel button {
-  padding: 10px;
+.stop-btn svg {
+  display: none;
+}
+
+.stop-btn:hover svg {
+  display: block;
+}
+
+.stop-btn:hover .spinner {
+  display: none;
+}
+
+.spinner {
+  width: 10px;
+  height: 10px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #2563eb;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
 }
 </style>
diff --git a/src/views/vue-flow/layouting/initialElements.ts b/src/views/vue-flow/layouting/initialElements.ts
index 2a84ea4b74..caf927103b 100644
--- a/src/views/vue-flow/layouting/initialElements.ts
+++ b/src/views/vue-flow/layouting/initialElements.ts
@@ -1,81 +1,76 @@
 import type { Edge, Node } from "@vue-flow/core";
 
 const position = { x: 0, y: 0 };
-const type: string = "process";
+const nodeType = "process";
+const edgeType = "animation";
 
 export const initialNodes: Node[] = [
   {
     id: "1",
     position,
-    type
+    type: nodeType
   },
   {
     id: "2",
     position,
-    type
+    type: nodeType
   },
   {
     id: "2a",
     position,
-    type
+    type: nodeType
   },
   {
     id: "2b",
     position,
-    type
+    type: nodeType
   },
   {
     id: "2c",
     position,
-    type
+    type: nodeType
   },
   {
     id: "2d",
     position,
-    type
+    type: nodeType
   },
   {
     id: "3",
     position,
-    type
+    type: nodeType
   },
   {
     id: "4",
     position,
-    type
+    type: nodeType
   },
   {
     id: "5",
     position,
-    type
+    type: nodeType
   },
   {
     id: "6",
     position,
-    type
+    type: nodeType
   },
   {
     id: "7",
     position,
-    type
+    type: nodeType
   }
 ];
 
 export const initialEdges: Edge[] = [
-  { id: "e1-2", source: "1", target: "2", type: "animation", animated: true },
-  { id: "e1-3", source: "1", target: "3", type: "animation", animated: true },
-  { id: "e2-2a", source: "2", target: "2a", type: "animation", animated: true },
-  { id: "e2-2b", source: "2", target: "2b", type: "animation", animated: true },
-  { id: "e2-2c", source: "2", target: "2c", type: "animation", animated: true },
-  {
-    id: "e2c-2d",
-    source: "2c",
-    target: "2d",
-    type: "animation",
-    animated: true
-  },
-  { id: "e3-7", source: "3", target: "4", type: "animation", animated: true },
-  { id: "e4-5", source: "4", target: "5", type: "animation", animated: true },
-  { id: "e5-6", source: "5", target: "6", type: "animation", animated: true },
-  { id: "e5-7", source: "5", target: "7", type: "animation", animated: true }
+  { id: "e1-2", source: "1", target: "2", type: edgeType, animated: true },
+  { id: "e1-3", source: "1", target: "3", type: edgeType, animated: true },
+  { id: "e2-2a", source: "2", target: "2a", type: edgeType, animated: true },
+  { id: "e2-2b", source: "2", target: "2b", type: edgeType, animated: true },
+  { id: "e2-2c", source: "2", target: "2c", type: edgeType, animated: true },
+  { id: "e2c-2d", source: "2c", target: "2d", type: edgeType, animated: true },
+  { id: "e3-7", source: "3", target: "4", type: edgeType, animated: true },
+  { id: "e4-5", source: "4", target: "5", type: edgeType, animated: true },
+  { id: "e5-6", source: "5", target: "6", type: edgeType, animated: true },
+  { id: "e5-7", source: "5", target: "7", type: edgeType, animated: true }
 ];
diff --git a/src/views/vue-flow/layouting/processNode.vue b/src/views/vue-flow/layouting/processNode.vue
index 0ff966ab57..0feb0873ed 100644
--- a/src/views/vue-flow/layouting/processNode.vue
+++ b/src/views/vue-flow/layouting/processNode.vue
@@ -1,9 +1,19 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { toRef } from "vue";
-import type { NodeProps } from "@vue-flow/core";
 import { Handle, useHandleConnections } from "@vue-flow/core";
 
-const props = defineProps<NodeProps>();
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  sourcePosition: {
+    type: String
+  },
+  targetPosition: {
+    type: String
+  }
+});
 
 const sourceConnections = useHandleConnections({
   type: "target"
@@ -19,7 +29,7 @@ const isReceiver = toRef(() => targetConnections.value.length <= 0);
 
 const bgColor = toRef(() => {
   if (isSender.value) {
-    return "#4b5563";
+    return "#2563eb";
   }
 
   if (props.data.hasError) {
@@ -27,7 +37,7 @@ const bgColor = toRef(() => {
   }
 
   if (props.data.isFinished) {
-    return "#10b981";
+    return "#42B983";
   }
 
   if (props.data.isCancelled) {
@@ -58,16 +68,37 @@ const processLabel = toRef(() => {
     return "😎";
   }
 
-  return "📥";
+  return "🏠";
 });
 </script>
 
 <template>
-  <div class="process-node" :style="{ backgroundColor: bgColor }">
-    <Handle v-if="!isSender" type="target" :position="targetPosition" />
-    <Handle v-if="!isReceiver" type="source" :position="sourcePosition" />
-
-    <div v-if="data.isRunning" class="spinner" />
+  <div
+    class="process-node"
+    :style="{
+      backgroundColor: bgColor,
+      boxShadow: data.isRunning ? '0 0 10px rgba(0, 0, 0, 0.5)' : ''
+    }"
+  >
+    <Handle v-if="!isSender" type="target" :position="targetPosition as any">
+      <span
+        v-if="
+          !data.isRunning &&
+          !data.isFinished &&
+          !data.isCancelled &&
+          !data.isSkipped &&
+          !data.hasError
+        "
+        >📥
+      </span>
+    </Handle>
+    <Handle
+      v-if="!isReceiver"
+      type="source"
+      :position="sourcePosition as any"
+    />
+
+    <div v-if="!isSender && data.isRunning" class="spinner" />
     <span v-else>
       {{ processLabel }}
     </span>
@@ -79,31 +110,17 @@ const processLabel = toRef(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: 24px;
+  height: 24px;
   padding: 10px;
-  font-size: 12px;
-  color: white;
-  border: 1px solid #4b5563;
   border-radius: 99px;
 }
 
-.spinner {
-  width: 10px;
-  height: 10px;
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #10b981;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
+.process-node .vue-flow__handle {
+  width: unset;
+  height: unset;
+  font-size: 12px;
+  background: transparent;
+  border: none;
 }
 </style>
diff --git a/src/views/vue-flow/layouting/useLayout.ts b/src/views/vue-flow/layouting/useLayout.ts
new file mode 100644
index 0000000000..93483a5a9c
--- /dev/null
+++ b/src/views/vue-flow/layouting/useLayout.ts
@@ -0,0 +1,52 @@
+import dagre from "dagre";
+import { ref } from "vue";
+import { Position, useVueFlow } from "@vue-flow/core";
+
+export function useLayout() {
+  const { findNode } = useVueFlow();
+
+  const graph = ref(new dagre.graphlib.Graph());
+
+  const previousDirection = ref("LR");
+
+  function layout(nodes, edges, direction) {
+    const dagreGraph = new dagre.graphlib.Graph();
+
+    graph.value = dagreGraph;
+
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+    const isHorizontal = direction === "LR";
+    dagreGraph.setGraph({ rankdir: direction });
+
+    previousDirection.value = direction;
+
+    for (const node of nodes) {
+      const graphNode = findNode(node.id);
+
+      dagreGraph.setNode(node.id, {
+        width: graphNode.dimensions.width || 150,
+        height: graphNode.dimensions.height || 50
+      });
+    }
+
+    for (const edge of edges) {
+      dagreGraph.setEdge(edge.source, edge.target);
+    }
+
+    dagre.layout(dagreGraph);
+
+    return nodes.map(node => {
+      const nodeWithPosition = dagreGraph.node(node.id);
+
+      return {
+        ...node,
+        targetPosition: isHorizontal ? Position.Left : Position.Top,
+        sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
+        position: { x: nodeWithPosition.x, y: nodeWithPosition.y }
+      };
+    });
+  }
+
+  return { graph, layout, previousDirection };
+}
diff --git a/src/views/vue-flow/layouting/useRunProcess.ts b/src/views/vue-flow/layouting/useRunProcess.ts
index a87a923225..9b074e7ca2 100644
--- a/src/views/vue-flow/layouting/useRunProcess.ts
+++ b/src/views/vue-flow/layouting/useRunProcess.ts
@@ -1,24 +1,40 @@
-import type dagre from "dagre";
-import type { Node } from "@vue-flow/core";
+import { ref, toRef, toValue } from "vue";
 import { useVueFlow } from "@vue-flow/core";
-import { type MaybeRefOrGetter, toRef, toValue, ref } from "vue";
 
-export function useRunProcess(
-  dagreGraph: MaybeRefOrGetter<dagre.graphlib.Graph>
-) {
-  const { updateNodeData } = useVueFlow();
+export function useRunProcess({ graph: dagreGraph, cancelOnError = true }) {
+  const { updateNodeData, getConnectedEdges } = useVueFlow();
 
   const graph = toRef(() => toValue(dagreGraph));
 
   const isRunning = ref(false);
-  const executedNodes = new Set<string>();
-  const runningTasks = new Map<string, NodeJS.Timeout>();
 
-  async function runNode(node: { id: string }, isStart = false) {
+  const executedNodes = new Set();
+
+  const runningTasks = new Map();
+
+  const upcomingTasks = new Set();
+
+  async function runNode(node, isStart = false) {
     if (executedNodes.has(node.id)) {
       return;
     }
 
+    upcomingTasks.add(node.id);
+
+    const incomers = getConnectedEdges(node.id).filter(
+      connection => connection.target === node.id
+    );
+
+    await Promise.all(
+      incomers.map(incomer => until(() => !incomer.data.isAnimating))
+    );
+
+    upcomingTasks.clear();
+
+    if (!isRunning.value) {
+      return;
+    }
+
     executedNodes.add(node.id);
 
     updateNodeData(node.id, {
@@ -29,32 +45,36 @@ export function useRunProcess(
     });
 
     const delay = Math.floor(Math.random() * 2000) + 1000;
-    return new Promise<void>(resolve => {
+
+    return new Promise(resolve => {
       const timeout = setTimeout(
         async () => {
-          const children = graph.value.successors(
-            node.id
-          ) as unknown as string[];
+          const children = graph.value.successors(node.id);
 
           const willThrowError = Math.random() < 0.15;
 
-          if (willThrowError) {
+          if (!isStart && willThrowError) {
             updateNodeData(node.id, { isRunning: false, hasError: true });
 
-            await skipDescendants(node.id);
-            runningTasks.delete(node.id);
+            if (toValue(cancelOnError)) {
+              await skipDescendants(node.id);
+              runningTasks.delete(node.id);
 
-            resolve();
-            return;
+              // @ts-expect-error
+              resolve();
+              return;
+            }
           }
 
           updateNodeData(node.id, { isRunning: false, isFinished: true });
+
           runningTasks.delete(node.id);
 
           if (children.length > 0) {
             await Promise.all(children.map(id => runNode({ id })));
           }
 
+          // @ts-expect-error
           resolve();
         },
         isStart ? 0 : delay
@@ -64,7 +84,7 @@ export function useRunProcess(
     });
   }
 
-  async function run(nodes: Node[]) {
+  async function run(nodes) {
     if (isRunning.value) {
       return;
     }
@@ -82,7 +102,7 @@ export function useRunProcess(
     clear();
   }
 
-  function reset(nodes: Node[]) {
+  function reset(nodes) {
     clear();
 
     for (const node of nodes) {
@@ -96,8 +116,8 @@ export function useRunProcess(
     }
   }
 
-  async function skipDescendants(nodeId: string) {
-    const children = graph.value.successors(nodeId) as unknown as string[];
+  async function skipDescendants(nodeId) {
+    const children = graph.value.successors(nodeId);
 
     for (const child of children) {
       updateNodeData(child, { isRunning: false, isSkipped: true });
@@ -105,9 +125,23 @@ export function useRunProcess(
     }
   }
 
-  function stop() {
+  async function stop() {
     isRunning.value = false;
 
+    for (const nodeId of upcomingTasks) {
+      clearTimeout(runningTasks.get(nodeId));
+      runningTasks.delete(nodeId);
+      // @ts-expect-error
+      updateNodeData(nodeId, {
+        isRunning: false,
+        isFinished: false,
+        hasError: false,
+        isSkipped: false,
+        isCancelled: true
+      });
+      await skipDescendants(nodeId);
+    }
+
     for (const [nodeId, task] of runningTasks) {
       clearTimeout(task);
       runningTasks.delete(nodeId);
@@ -118,10 +152,11 @@ export function useRunProcess(
         isSkipped: false,
         isCancelled: true
       });
-      skipDescendants(nodeId);
+      await skipDescendants(nodeId);
     }
 
     executedNodes.clear();
+    upcomingTasks.clear();
   }
 
   function clear() {
@@ -132,3 +167,15 @@ export function useRunProcess(
 
   return { run, stop, reset, isRunning };
 }
+
+async function until(condition) {
+  return new Promise(resolve => {
+    const interval = setInterval(() => {
+      if (condition()) {
+        clearInterval(interval);
+        // @ts-expect-error
+        resolve();
+      }
+    }, 100);
+  });
+}
diff --git a/src/views/vue-flow/layouting/useShuffle.ts b/src/views/vue-flow/layouting/useShuffle.ts
new file mode 100644
index 0000000000..d2505080a9
--- /dev/null
+++ b/src/views/vue-flow/layouting/useShuffle.ts
@@ -0,0 +1,50 @@
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+}
+
+function generatePossibleEdges(nodes) {
+  const possibleEdges = [];
+
+  for (const sourceNode of nodes) {
+    for (const targetNode of nodes) {
+      if (sourceNode.id !== targetNode.id) {
+        const edgeId = `e${sourceNode.id}-${targetNode.id}`;
+        possibleEdges.push({
+          id: edgeId,
+          source: sourceNode.id,
+          target: targetNode.id,
+          type: "animation",
+          animated: true
+        });
+      }
+    }
+  }
+
+  return possibleEdges;
+}
+
+export function useShuffle() {
+  return nodes => {
+    const possibleEdges = generatePossibleEdges(nodes);
+    shuffleArray(possibleEdges);
+
+    const usedNodes = new Set();
+    const newEdges = [];
+
+    for (const edge of possibleEdges) {
+      if (
+        !usedNodes.has(edge.target) &&
+        (usedNodes.size === 0 || usedNodes.has(edge.source))
+      ) {
+        newEdges.push(edge);
+        usedNodes.add(edge.source);
+        usedNodes.add(edge.target);
+      }
+    }
+
+    return newEdges;
+  };
+}