diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
index b0bc0fe7c1..79c9da7033 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
@@ -54,7 +54,6 @@ const JSP = function () {
     isClick: false
   }
 }
-
 /**
  * dag init
  */
@@ -199,7 +198,9 @@ JSP.prototype.jsonHandle = function ({ largeJson, locations }) {
       isAttachment: this.config.isAttachment,
       taskType: v.type,
       runFlag: v.runFlag,
-      nodenumber: locations[v.id].nodenumber
+      nodenumber: locations[v.id].nodenumber,
+      successNode: v.conditionResult.successNode[0],
+      failedNode: v.conditionResult.failedNode[0]
     }))
 
     // contextmenu event
@@ -745,13 +746,29 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) {
         sourceId = v.endPointSourceId
         targetId = v.endPointTargetId
       }
-
-      this.JspInstance.connect({
-        source: sourceId,
-        target: targetId,
-        type: 'basic',
-        paintStyle: { strokeWidth: 2, stroke: '#2d8cf0' }
-      })
+      
+      if($(`#${sourceId}`).attr('data-tasks-type') === 'CONDITIONS' && $(`#${sourceId}`).attr('data-successnode') === $(`#${targetId}`).find('.name-p').text()) {
+        this.JspInstance.connect({
+          source: sourceId,
+          target: targetId,
+          type: 'basic',
+          paintStyle: { strokeWidth: 2, stroke: '#4caf50' }
+        })
+      } else if($(`#${sourceId}`).attr('data-tasks-type') === 'CONDITIONS' && $(`#${sourceId}`).attr('data-failednode') === $(`#${targetId}`).find('.name-p').text()) {
+        this.JspInstance.connect({
+          source: sourceId,
+          target: targetId,
+          type: 'basic',
+          paintStyle: { strokeWidth: 2, stroke: '#f14343' }
+        })
+      } else {
+        this.JspInstance.connect({
+          source: sourceId,
+          target: targetId,
+          type: 'basic',
+          paintStyle: { strokeWidth: 2, stroke: '#2d8cf0' }
+        })
+      }
     })
   })
 
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
index e44363911b..84b01a5248 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
@@ -43,9 +43,9 @@ const rtBantpl = () => {
 /**
  * return node html
  */
-const rtTasksTpl = ({ id, name, x, y, targetarr, isAttachment, taskType, runFlag, nodenumber }) => {
+const rtTasksTpl = ({ id, name, x, y, targetarr, isAttachment, taskType, runFlag, nodenumber, successNode, failedNode }) => {
   let tpl = ''
-  tpl += `<div class="w jtk-draggable jtk-droppable jtk-endpoint-anchor jtk-connected ${isAttachment ? 'jtk-ep' : ''}" data-targetarr="${targetarr || ''}" data-nodenumber="${nodenumber || 0}" data-tasks-type="${taskType}" id="${id}" style="left: ${x}px; top: ${y}px;">`
+  tpl += `<div class="w jtk-draggable jtk-droppable jtk-endpoint-anchor jtk-connected ${isAttachment ? 'jtk-ep' : ''}" data-targetarr="${targetarr || ''}" data-successNode="${successNode || ''}" data-failedNode="${failedNode || ''}" data-nodenumber="${nodenumber || 0}" data-tasks-type="${taskType}" id="${id}" style="left: ${x}px; top: ${y}px;">`
   tpl += '<div>'
   tpl += '<div class="state-p"></div>'
   tpl += `<div class="icos icos-${taskType}"></div>`