diff --git a/package.json b/package.json
index db0abf11fbc08e219de65c1b0e489eb721c8da98..cf1244b9c587f72e09c0f8fc7712c27a0ae6c45c 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@computing/opendesign-icons": "file:lib\\opendesign-icons-1.0.3.tgz",
     "@computing/opendesign2": "file:lib\\opendesign2-2.0.11.tgz",
+    "@dagrejs/dagre": "1.1.2",
     "axios": "1.7.9",
     "babel-loader": "^9.2.1",
     "codemirror": "^6.0.1",
diff --git a/src/assets/images/optimize.png b/src/assets/images/optimize.png
new file mode 100644
index 0000000000000000000000000000000000000000..88e11108d0461300d803debf22a43b6cc57523a5
Binary files /dev/null and b/src/assets/images/optimize.png differ
diff --git a/src/views/createapp/components/CustomControl.vue b/src/views/createapp/components/CustomControl.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5d4b54629417d9c63c7e89d0613c410548d756f9
--- /dev/null
+++ b/src/views/createapp/components/CustomControl.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="controlBox">
+    <div class="controlSearch"><IconSearch /></div>
+    <div class="controlScaleNumber">
+      {{ `${zommChangeValue * 100}%` }}
+    </div>
+    <el-dropdown placement="top" @visible-change="handleVisibleChange" popper-class="controlChange" class="controlBtn">
+      <span class="el-dropdown-link">
+        <IconChevronDown v-if="!dropDownVisible" />
+        <IconChevronUp v-else />
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item
+            class="reduce"
+            @click="handleSacl(zommChangeValue <= 0.5 ? zommChangeValue : zommChangeValue - 0.1)"
+            >缩小</el-dropdown-item
+          >
+          <el-dropdown-item
+            class="amplify"
+            @click="handleSacl(zommChangeValue >= 2 ? zommChangeValue : zommChangeValue + 0.1)"
+            >放大</el-dropdown-item
+          >
+          <el-dropdown-item class="adaptive" @click="handleSacl(1)">自适应</el-dropdown-item>
+          <el-dropdown-item class="scaleOther scaleHalf" divided @click="handleSacl(0.5)">缩放到50%</el-dropdown-item>
+          <el-dropdown-item class="scaleOther" @click="handleSacl(1)">缩放到100%</el-dropdown-item>
+          <el-dropdown-item class="scaleOther" @click="handleSacl(1.5)">缩放到150%</el-dropdown-item>
+          <el-dropdown-item class="scaleTwice" @click="handleSacl(2)">缩放到200%</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+    <div class="dividerBox"></div>
+    <div class="optimize" @click="layoutGraph('LR')">
+      <img src="@/assets/images/optimize.png" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { IconChevronDown, IconChevronUp, IconSearch } from '@computing/opendesign-icons';
+interface ControlProps {
+  handleChangeZoom: any;
+  flowZoom: number;
+  layoutGraph: any;
+}
+const props = withDefaults(defineProps<ControlProps>(), {});
+const zommChangeValue = ref(1);
+const dropDownVisible = ref(false);
+const handleSacl = zoomValue => {
+  zommChangeValue.value = zoomValue;
+  props.handleChangeZoom(zoomValue);
+};
+const handleVisibleChange = visible => {
+  dropDownVisible.value = visible;
+};
+
+watch(
+  () => props.flowZoom,
+  () => {
+    zommChangeValue.value = props.flowZoom;
+  },
+);
+</script>
+
+<style lang="scss">
+.controlBox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 144px;
+  position: absolute;
+  bottom: 24px;
+  left: 24px;
+  z-index: 999;
+  display: flex;
+  padding: 12px 16px;
+  border-radius: 8px;
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+  background: var(--o-bg-color-base);
+  .controlSearch {
+    width: 16px;
+    height: 16px;
+  }
+  .el-dropdown-link {
+    width: 16px;
+    height: 16px;
+  }
+
+  .dividerBox {
+    width: 1px;
+    height: 16px;
+    background: var(--o-border-color-light);
+  }
+
+  .optimize {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    img {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+.controlChange {
+  width: 120px;
+  height: 177px;
+  border: unset !important;
+  border-radius: 8px !important;
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1) !important;
+  background: var(--o-bg-color-base) !important;
+  margin-left: -34px;
+  margin-bottom: 6px;
+  .el-dropdown-menu__item {
+    height: 16px;
+    padding-left: 16px !important;
+    min-height: unset !important;
+    font-size: 12px;
+    line-height: 16px;
+    color: var(--o-text-color-secondary);
+  }
+
+  .reduce {
+    margin-top: 4px;
+  }
+  .reduce,
+  .amplify,
+  .scaleOther {
+    margin-bottom: 8px;
+  }
+
+  .scaleTwice {
+    margin-bottom: 4px;
+  }
+
+  .scaleHalf {
+    margin-top: 4px !important;
+  }
+  .el-dropdown-menu__item--divided {
+    margin: 4px 0 !important;
+  }
+}
+
+.controlBtn {
+  width: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--o-text-color-secondary) !important;
+
+  .el-dropdown-link:focus-visible {
+    outline: unset !important;
+  }
+
+  .el-dropdown-link,
+  .o-dropdown-link {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    color: var(--o-text-color-secondary) !important;
+  }
+}
+.controlBtn:focus-visible {
+  outline: unset !important;
+}
+</style>
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index 896d3bbb11f7592d6a4d097ca1a74baebb43cfe9..0e20d77d40d1b368badcf62d94340ba572fe53ed 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import './workFlowStyle.scss';
-import { ref } from 'vue';
+import { nextTick, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ElTooltip } from 'element-plus';
 import { VueFlow, useVueFlow, Panel } from '@vue-flow/core';
@@ -8,11 +8,12 @@ import { Background } from '@vue-flow/background';
 import { MiniMap } from '@vue-flow/minimap';
 import CustomEdge from './workFlowConfig/CustomEdge.vue';
 import CustomNode from './workFlowConfig/CustomNode.vue';
+import CustomControl from './CustomControl.vue';
 import CustomSaENode from './workFlowConfig/CustomSaENode.vue';
 import useDragAndDrop from './workFlowConfig/useDnD';
 import WorkFlowDialog from './workFlowConfig/workFlowDialog.vue';
+import { useLayout } from './workFlowConfig/useLayout';
 import { IconSearch, IconCaretRight, IconCaretDown, IconPlusCircle } from '@computing/opendesign-icons';
-
 const { t } = useI18n();
 const copilotAside = ref<HTMLElement>();
 const isCopilotAsideVisible = ref(true);
@@ -23,6 +24,7 @@ const workFlowItem = ref();
 const isAddWorkFlow = ref(false);
 const editData = ref();
 const dialogType = ref('');
+const flowZoom = ref(1);
 function hanleAsideVisible(): void {
   if (!copilotAside.value) return;
   if (isCopilotAsideVisible.value) {
@@ -32,7 +34,9 @@ function hanleAsideVisible(): void {
   }
 }
 
-const { onInit, onConnect, addEdges, updateNode, getNodes, getEdges, findNode, removeNodes } = useVueFlow();
+const { onConnect, addEdges, getNodes, getEdges, findNode, removeNodes, setViewport, getViewport, fitView } =
+  useVueFlow();
+const {  layout } = useLayout();
 
 const { onDragOver, onDrop, onDragLeave, isDragOver, onDragStart } = useDragAndDrop();
 // 这里是初始化的开始结束的节点
@@ -58,7 +62,7 @@ const nodes = ref([
       target: 'target',
     },
     position: { x: 600, y: 160 },
-  },
+  } 
 ]);
 // 开始的边默认为空数组【当然回显时应该有值】
 const edges = ref([]);
@@ -95,6 +99,14 @@ const nodeStancesList = ref([
   },
 ]);
 
+const handleChangeZoom = zoomValue => {
+  setViewport({
+    zoom: zoomValue,
+    x: 0,
+    y: 0,
+  });
+};
+
 onConnect(e => {
   addEdges({
     ...e,
@@ -120,6 +132,20 @@ const delNode = id => {
     node ? removeNodes(node) : '';
   }
 };
+
+const handleZommOnScroll = () => {
+  const zoomObj = getViewport();
+  flowZoom.value = Number(zoomObj.zoom.toFixed(1));
+};
+
+async function layoutGraph(direction) {
+
+  nodes.value = layout(nodes.value, edges.value, direction);
+
+  nextTick(() => {
+    fitView();
+  });
+}
 </script>
 <template>
   <div class="workFlowContainer" @drop="onDrop">
@@ -180,9 +206,11 @@ const delNode = id => {
         class="my-diagram-class"
         @dragover="onDragOver"
         @dragleave="onDragLeave"
+        @paneScroll="handleZommOnScroll"
       >
         <Background pattern-color="#aaa" :gap="8" />
-        <MiniMap />
+        <MiniMap :width="220" mask-color="#f4f6fa" :mask-stroke-width="250" />
+        <CustomControl :handleChangeZoom="handleChangeZoom" :flowZoom="flowZoom" :layoutGraph="layoutGraph" />
         <!-- 自定义节点 -->
         <template #node-custom="customNodeProps">
           <CustomNode v-bind="customNodeProps" @delNode="delNode"></CustomNode>
diff --git a/src/views/createapp/components/workFlowConfig/useLayout.js b/src/views/createapp/components/workFlowConfig/useLayout.js
new file mode 100644
index 0000000000000000000000000000000000000000..1dd933ac0d73c746995c96fa9f3346ace6f44e19
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/useLayout.js
@@ -0,0 +1,62 @@
+import dagre from '@dagrejs/dagre';
+import { Position, useVueFlow } from '@vue-flow/core';
+import { ref } from 'vue';
+
+/**
+ * Composable to run the layout algorithm on the graph.
+ * It uses the `dagre` library to calculate the layout of the nodes and edges.
+ *
+ * @see https://github.com/dagrejs/dagre/wiki
+ */
+export function useLayout() {
+  const { findNode } = useVueFlow();
+
+  const graph = ref(new dagre.graphlib.Graph());
+
+  function layout(nodes, edges, direction) {
+    // we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
+    const dagreGraph = new dagre.graphlib.Graph();
+
+    graph.value = dagreGraph;
+
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+    const isHorizontal = direction === 'LR';
+    dagreGraph.setGraph({ rankdir: direction });
+
+    for (const node of nodes) {
+      // if you need width+height of nodes for your layout, you can use the dimensions property of the internal node (`GraphNode` type)
+      const graphNode = findNode(node.id);
+
+      if (!graphNode) {
+        console.error(`Node with id ${node.id} not found in the graph`);
+        continue;
+      }
+
+      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);
+
+    // set nodes with updated positions
+    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 };
+}
diff --git a/src/views/createapp/components/workFlowStyle.scss b/src/views/createapp/components/workFlowStyle.scss
index 4a5e3afdb6b962a0987e2e8350374758329508b4..258318f5b3321109f8a89a379d2b9442ff3fc6fd 100644
--- a/src/views/createapp/components/workFlowStyle.scss
+++ b/src/views/createapp/components/workFlowStyle.scss
@@ -129,6 +129,20 @@
   .vue-flow__minimap {
     transform-origin: bottom right;
     background-color: var(--o-bg-color-base);
+    bottom: 57px;
+    margin-left: 24px;
+    border-radius: 8px;
+    width: 144px;
+    height: 96px;
+    svg {
+      width: 144px;
+      height: 96px;
+      border-radius: 8px;
+      path {
+        padding: 10px;
+        height: 100px !important;
+      }
+    }
   }
 
   .vue-flow__panel.right {