diff --git a/src/components/monaco/MonacoEditor.vue b/src/components/monaco/MonacoEditor.vue
index 4ad8e47f3770bd7b01aff68a3f381ec3c93fa369..b87843a5d6333e88038b54ced45e0aea20e3bdb1 100644
--- a/src/components/monaco/MonacoEditor.vue
+++ b/src/components/monaco/MonacoEditor.vue
@@ -116,6 +116,7 @@ onMounted(() => {
   left: unset !important;
   height: 1px !important;
   opacity: 0;
+  margin-top: 20px;
 }
 </style>
 <style scoped>
diff --git a/src/views/createapp/components/codeMirror/mirrorTextArea.vue b/src/views/createapp/components/codeMirror/mirrorTextArea.vue
index ca684c42397499843751d590ef58ef25e66918be..0a504442ef8d773b083c0559d75b5661dd20d351 100644
--- a/src/views/createapp/components/codeMirror/mirrorTextArea.vue
+++ b/src/views/createapp/components/codeMirror/mirrorTextArea.vue
@@ -50,7 +50,7 @@ const updateFunc = () => {
   });
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .v-codemirror {
   height: 100%;
   width: 100%;
diff --git a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
index a6403855693fe4b15924ca775e1163a444ccfc9d..84999b1f46b5708fca560bb64c6917480cf4d8c3 100644
--- a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
+++ b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
@@ -29,10 +29,18 @@
                 </el-icon>
                 <span>{{ item.title }}</span>
               </template>
+              <div class="yamlMonacoEditor" v-if="item.type && index === 1">
+                <MonacoEditor
+                  :yamlContent="item.yamlCode"
+                  placeholder="Code goes here..."
+                  :handleQueryYamlValue="handleChange"
+                  :readOnly="false"
+                />
+              </div>
               <MirrorText
-                v-if="item.type"
+                v-else-if="item.type && index !== 1"
                 ref="textarea"
-                :class="{ outputYaml: index !== 1 }"
+                class="outputYaml"
                 v-model:updateVal="item.yamlCode"
                 :yamlCode="item.yamlCode"
                 :disabled="item.disabled"
@@ -92,6 +100,7 @@ import MirrorText from '../codeMirror/mirrorTextArea.vue';
 import { IconCaretRight } from '@computing/opendesign-icons';
 import yaml from 'js-yaml';
 import { ElMessage } from 'element-plus';
+import MonacoEditor from 'src/components/monaco/MonacoEditor.vue';
 const visible = ref(true);
 const yamlInputCode = ref();
 const yamlOutputCode = ref();
@@ -166,6 +175,11 @@ watch(
   },
   { deep: true, immediate: true },
 );
+
+const handleChange = (payload) => {
+  yamlExpress.value[1].yamlCode = payload;
+};
+
 const closeDrawer = () => {
   emits('closeDrawer');
 };
@@ -190,6 +204,9 @@ const updateNodeYaml = () => {
 </script>
 
 <style lang="scss">
+.yamlMonacoEditor{
+  height:500px;
+}
 .flowDrawer.el-drawer {
   padding: 0px;
   background-color: var(--o-bg-color-base);