diff --git a/docSite/content/zh-cn/docs/development/upgrading/4813.md b/docSite/content/zh-cn/docs/development/upgrading/4813.md
index ba0071ee1..69c43d708 100644
--- a/docSite/content/zh-cn/docs/development/upgrading/4813.md
+++ b/docSite/content/zh-cn/docs/development/upgrading/4813.md
@@ -17,5 +17,6 @@ weight: 811
 6. 优化 - 全文检索语句，减少一轮查询。
 7. 优化 - 修改 findLast 为 [...array].reverse().find，适配旧版浏览器。
 8. 优化 - Markdown 组件自动空格，避免分割 url 中的中文。
-9. 修复 - Dockerfile pnpm install 支持代理。
-10. 修复 - BI 图表生成无法写入文件。
+9. 优化 - 工作流上下文拆分，性能优化。
+10. 修复 - Dockerfile pnpm install 支持代理。
+11. 修复 - BI 图表生成无法写入文件。
diff --git a/packages/web/components/common/Icon/icons/edgeAdd.svg b/packages/web/components/common/Icon/icons/edgeAdd.svg
index cade27beb..2bab3a38f 100644
--- a/packages/web/components/common/Icon/icons/edgeAdd.svg
+++ b/packages/web/components/common/Icon/icons/edgeAdd.svg
@@ -1,3 +1,3 @@
-<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09993 1.21182C6.09993 0.604303 5.60744 0.111816 4.99993 0.111816C4.39242 0.111816 3.89993 0.604303 3.89993 1.21182L3.89993 3.11182H1.9999C1.39239 3.11182 0.899902 3.6043 0.899902 4.21182C0.899902 4.81933 1.39239 5.31182 1.9999 5.31182H3.89993L3.89993 7.21182C3.89993 7.81933 4.39242 8.31182 4.99993 8.31182C5.60744 8.31182 6.09993 7.81933 6.09993 7.21182V5.31182H7.9999C8.60742 5.31182 9.0999 4.81933 9.0999 4.21182C9.0999 3.6043 8.60742 3.11182 7.9999 3.11182H6.09993V1.21182Z" fill="#487FFF"/>
+<svg  viewBox="0 0 10 9"  xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09993 1.21182C6.09993 0.604303 5.60744 0.111816 4.99993 0.111816C4.39242 0.111816 3.89993 0.604303 3.89993 1.21182L3.89993 3.11182H1.9999C1.39239 3.11182 0.899902 3.6043 0.899902 4.21182C0.899902 4.81933 1.39239 5.31182 1.9999 5.31182H3.89993L3.89993 7.21182C3.89993 7.81933 4.39242 8.31182 4.99993 8.31182C5.60744 8.31182 6.09993 7.81933 6.09993 7.21182V5.31182H7.9999C8.60742 5.31182 9.0999 4.81933 9.0999 4.21182C9.0999 3.6043 8.60742 3.11182 7.9999 3.11182H6.09993V1.21182Z" />
 </svg>
diff --git a/projects/app/src/components/Markdown/codeBlock/Iframe.tsx b/projects/app/src/components/Markdown/codeBlock/Iframe.tsx
index 50aff3f61..9a09f5dff 100644
--- a/projects/app/src/components/Markdown/codeBlock/Iframe.tsx
+++ b/projects/app/src/components/Markdown/codeBlock/Iframe.tsx
@@ -1,16 +1,19 @@
-import React, { useEffect, useRef, useCallback, useState } from 'react';
+import React from 'react';
 import { Box } from '@chakra-ui/react';
-import MyIcon from '@fastgpt/web/components/common/Icon';
+import { useMarkdownWidth } from '../hooks';
 
-const MermaidBlock = ({ code }: { code: string }) => {
+const IframeBlock = ({ code }: { code: string }) => {
+  const { width, Ref } = useMarkdownWidth();
   return (
-    <Box w={'100%'}>
+    <Box w={width} ref={Ref}>
       <iframe
         src={code}
+        sandbox="allow-scripts allow-forms allow-popups allow-downloads allow-presentation allow-storage-access-by-user-activation"
+        referrerPolicy="no-referrer"
         style={{
           width: '100%',
           height: '100%',
-          minHeight: '40vh',
+          minHeight: '70vh',
           border: 'none'
         }}
       />
@@ -18,4 +21,4 @@ const MermaidBlock = ({ code }: { code: string }) => {
   );
 };
 
-export default MermaidBlock;
+export default IframeBlock;
diff --git a/projects/app/src/components/Markdown/codeBlock/iframe-html.tsx b/projects/app/src/components/Markdown/codeBlock/iframe-html.tsx
new file mode 100644
index 000000000..0674335fb
--- /dev/null
+++ b/projects/app/src/components/Markdown/codeBlock/iframe-html.tsx
@@ -0,0 +1,25 @@
+import React, { useEffect, useRef, useCallback, useState } from 'react';
+import { Box } from '@chakra-ui/react';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import { useMarkdownWidth } from '../hooks';
+
+const MermaidBlock = ({ code }: { code: string }) => {
+  const { width, Ref } = useMarkdownWidth();
+  return (
+    <Box w={width} ref={Ref}>
+      <iframe
+        src={code}
+        sandbox="allow-scripts allow-forms allow-popups allow-downloads allow-presentation allow-storage-access-by-user-activation"
+        referrerPolicy="no-referrer"
+        style={{
+          width: '100%',
+          height: '100%',
+          minHeight: '70vh',
+          border: 'none'
+        }}
+      />
+    </Box>
+  );
+};
+
+export default MermaidBlock;
diff --git a/projects/app/src/components/Markdown/hooks.ts b/projects/app/src/components/Markdown/hooks.ts
new file mode 100644
index 000000000..754e1971f
--- /dev/null
+++ b/projects/app/src/components/Markdown/hooks.ts
@@ -0,0 +1,34 @@
+import { useScreen } from '@fastgpt/web/hooks/useScreen';
+import { useSystem } from '@fastgpt/web/hooks/useSystem';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export const useMarkdownWidth = () => {
+  const Ref = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(400);
+  const { screenWidth } = useScreen();
+  const { isPc } = useSystem();
+
+  const findMarkdownDom = useCallback(() => {
+    if (!Ref.current) return;
+
+    // 一直找到 parent = markdown 的元素
+    let parent = Ref.current?.parentElement;
+    while (parent && !parent.className.includes('chat-box-card')) {
+      parent = parent.parentElement;
+    }
+
+    const ChatItemDom = parent?.parentElement;
+    const clientWidth = ChatItemDom?.clientWidth ? ChatItemDom.clientWidth - (isPc ? 90 : 60) : 500;
+    setWidth(clientWidth);
+    return parent?.parentElement;
+  }, [isPc]);
+
+  useEffect(() => {
+    findMarkdownDom();
+  }, [findMarkdownDom, screenWidth, Ref.current]);
+
+  return {
+    Ref,
+    width
+  };
+};
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/ButtonEdge.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/ButtonEdge.tsx
index 1d0985403..5eb6edeeb 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/ButtonEdge.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/ButtonEdge.tsx
@@ -157,10 +157,10 @@ const ButtonEdge = (props: EdgeProps) => {
             position={'absolute'}
             transform={`translate(-55%, -50%) translate(${labelX}px,${labelY}px)`}
             pointerEvents={'all'}
-            w={'17px'}
-            h={'17px'}
+            w={'18px'}
+            h={'18px'}
             bg={'white'}
-            borderRadius={'17px'}
+            borderRadius={'18px'}
             cursor={'pointer'}
             zIndex={defaultZIndex + 1000}
             onClick={() => onDelConnect(id)}
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/Container.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/Container.tsx
index 4b5e08f16..aa56dab70 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/Container.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/Container.tsx
@@ -6,7 +6,7 @@ const Container = ({ children, ...props }: BoxProps) => {
   return (
     <Flex
       flexDirection={'column'}
-      mx={4}
+      mx={3}
       p={4}
       position={'relative'}
       bg={'myGray.50'}
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeAnswer.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeAnswer.tsx
index 413caa5c8..fdbaacb75 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeAnswer.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeAnswer.tsx
@@ -16,7 +16,7 @@ const NodeAnswer = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
     const { isTool, commonInputs } = splitToolInputs(inputs, nodeId);
 
     return (
-      <NodeCard minW={'400px'} selected={selected} {...data}>
+      <NodeCard selected={selected} {...data}>
         <Container>
           {isTool && (
             <>
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeCQNode.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeCQNode.tsx
index f7e099411..99e090b69 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeCQNode.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeCQNode.tsx
@@ -99,7 +99,7 @@ const NodeCQNode = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                     nodeId={nodeId}
                     handleId={getHandleId(nodeId, 'source', item.key)}
                     position={Position.Right}
-                    translate={[36, 0]}
+                    translate={[34, 0]}
                   />
                 </Box>
               </Box>
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeIfElse/ListItem.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeIfElse/ListItem.tsx
index d7bd2c673..129406265 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeIfElse/ListItem.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeIfElse/ListItem.tsx
@@ -266,7 +266,7 @@ const ListItem = ({
             nodeId={nodeId}
             handleId={handleId}
             position={Position.Right}
-            translate={[3, 0]}
+            translate={[5, 0]}
           />
         )}
       </Flex>
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeIfElse/index.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeIfElse/index.tsx
index 5cf13619d..b8f020a4b 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeIfElse/index.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeIfElse/index.tsx
@@ -98,7 +98,7 @@ const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
               nodeId={nodeId}
               handleId={elseHandleId}
               position={Position.Right}
-              translate={[20, 0]}
+              translate={[18, 0]}
             />
           </Flex>
         </Container>
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeSystemConfig.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeSystemConfig.tsx
index 382520547..37b231b78 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeSystemConfig.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeSystemConfig.tsx
@@ -52,7 +52,6 @@ const NodeUserGuide = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
     return (
       <>
         <NodeCard
-          minW={'420px'}
           selected={selected}
           menuForbid={{
             debug: true,
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeUserSelect.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeUserSelect.tsx
index 7004cdf92..e3fff3ec3 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeUserSelect.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeUserSelect.tsx
@@ -63,9 +63,8 @@ const NodeUserSelect = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                     {t('common:option') + (i + 1)}
                   </Box>
                 </HStack>
-                <Box position={'relative'}>
+                <Box position={'relative'} mt={1}>
                   <Input
-                    mt={1}
                     defaultValue={item.value}
                     bg={'white'}
                     fontSize={'sm'}
@@ -94,7 +93,7 @@ const NodeUserSelect = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                     nodeId={nodeId}
                     handleId={getHandleId(nodeId, 'source', item.key)}
                     position={Position.Right}
-                    translate={[26, 0]}
+                    translate={[34, 0]}
                   />
                 </Box>
               </Box>
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeWorkflowStart.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeWorkflowStart.tsx
index 28dfda5ab..41ee01117 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeWorkflowStart.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeWorkflowStart.tsx
@@ -65,7 +65,6 @@ const NodeStart = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
   const Render = useMemo(() => {
     return (
       <NodeCard
-        minW={'420px'}
         selected={selected}
         menuForbid={{
           copy: true,
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/ConnectionHandle.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/ConnectionHandle.tsx
index 39c3907b8..2e45ecd17 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/ConnectionHandle.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/ConnectionHandle.tsx
@@ -52,7 +52,7 @@ export const ConnectionSourceHandle = ({
           nodeId={nodeId}
           handleId={handleId}
           position={Position.Right}
-          translate={[2, 0]}
+          translate={[4, 0]}
         />
       );
     })();
@@ -69,7 +69,7 @@ export const ConnectionSourceHandle = ({
           nodeId={nodeId}
           handleId={handleId}
           position={Position.Left}
-          translate={[-6, 0]}
+          translate={[-8, 0]}
         />
       );
     })();
@@ -92,7 +92,7 @@ export const ConnectionSourceHandle = ({
           nodeId={nodeId}
           handleId={handleId}
           position={Position.Top}
-          translate={[0, -2]}
+          translate={[0, -5]}
         />
       );
     })();
@@ -108,7 +108,7 @@ export const ConnectionSourceHandle = ({
           nodeId={nodeId}
           handleId={handleId}
           position={Position.Bottom}
-          translate={[0, 2]}
+          translate={[0, 5]}
         />
       );
     })();
@@ -194,7 +194,7 @@ export const ConnectionTargetHandle = React.memo(function ConnectionTargetHandle
           nodeId={nodeId}
           handleId={handleId}
           position={Position.Left}
-          translate={[-2, 0]}
+          translate={[-4, 0]}
           showHandle={showHandle}
         />
       );
@@ -209,7 +209,7 @@ export const ConnectionTargetHandle = React.memo(function ConnectionTargetHandle
           nodeId={nodeId}
           handleId={handleId}
           position={Position.Right}
-          translate={[2, 0]}
+          translate={[4, 0]}
           showHandle={showHandle}
         />
       );
@@ -224,7 +224,7 @@ export const ConnectionTargetHandle = React.memo(function ConnectionTargetHandle
           nodeId={nodeId}
           handleId={handleId}
           position={Position.Top}
-          translate={[0, -2]}
+          translate={[0, -5]}
           showHandle={showHandle}
         />
       );
@@ -239,7 +239,7 @@ export const ConnectionTargetHandle = React.memo(function ConnectionTargetHandle
           nodeId={nodeId}
           handleId={handleId}
           position={Position.Bottom}
-          translate={[0, 2]}
+          translate={[0, 5]}
           showHandle={showHandle}
         />
       );
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/index.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/index.tsx
index 427f68c79..4ea08cca7 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/index.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/index.tsx
@@ -112,7 +112,15 @@ const MySourceHandle = React.memo(function MySourceHandle({
         position={position}
         isConnectableEnd={false}
       >
-        {showAddIcon && <MyIcon name={'edgeAdd'} pointerEvents={'none'} />}
+        {showAddIcon && (
+          <MyIcon
+            name={'edgeAdd'}
+            color={'primary.500'}
+            pointerEvents={'none'}
+            w={'14px'}
+            h={'14px'}
+          />
+        )}
       </Handle>
     );
   }, [handleId, position, showAddIcon, styles, transform]);
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/style.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/style.tsx
index bdf356bcd..21a9f0332 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/style.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/style.tsx
@@ -1,8 +1,8 @@
 export const primaryColor = '#487FFF';
 export const lowPrimaryColor = '#94B5FF';
 export const handleSize = {
-  width: '18px',
-  height: '18px'
+  width: '20px',
+  height: '20px'
 };
 
 export const sourceCommonStyle = {
@@ -12,16 +12,16 @@ export const sourceCommonStyle = {
 };
 export const handleConnectedStyle = {
   borderColor: lowPrimaryColor,
-  width: '14px',
-  height: '14px'
+  width: '16px',
+  height: '16px'
 };
 export const handleHighLightStyle = {
   borderColor: primaryColor,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  width: '18px',
-  height: '18px'
+  width: '20px',
+  height: '20px'
 };
 
 export default function Dom() {
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx
index 04e71ab57..476a402b5 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx
@@ -150,7 +150,7 @@ const NodeCard = (props: Props) => {
       <Box position={'relative'}>
         {/* debug */}
         {showHeader && (
-          <Box px={4} pt={4}>
+          <Box px={3} pt={4}>
             {/* tool target handle */}
             <ToolTargetHandle show={showToolHandle} nodeId={nodeId} />
 
@@ -667,7 +667,7 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
 
     return !!debugResult && !!statusData ? (
       <>
-        <Flex px={4} bg={statusData.bg} borderTopRadius={'md'} py={3}>
+        <Flex px={3} bg={statusData.bg} borderTopRadius={'md'} py={3}>
           <MyIcon name={statusData.icon as any} w={'16px'} mr={2} />
           <Box color={'myGray.900'} fontWeight={'bold'} flex={'1 0 0'}>
             {statusData.text}
@@ -708,7 +708,7 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
             border={'base'}
           >
             {/* Status header */}
-            <Flex h={'54x'} px={4} py={3} alignItems={'center'}>
+            <Flex h={'54x'} px={3} py={3} alignItems={'center'}>
               <MyIcon mr={1} name={'core/workflow/debugResult'} w={'20px'} color={'primary.600'} />
               <Box fontWeight={'bold'} flex={'1'}>
                 {t('common:core.workflow.debug.Run result')}
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderOutput/Label.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderOutput/Label.tsx
index d2929bc73..2c3b85c0f 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderOutput/Label.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderOutput/Label.tsx
@@ -1,5 +1,5 @@
 import { FlowNodeOutputItemType } from '@fastgpt/global/core/workflow/type/io.d';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useTranslation } from 'next-i18next';
 import { Box, Flex } from '@chakra-ui/react';
 import { FlowNodeOutputTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
@@ -41,7 +41,7 @@ const OutputLabel = ({ nodeId, output }: { nodeId: string; output: FlowNodeOutpu
         <SourceHandle
           nodeId={nodeId}
           handleId={getHandleId(nodeId, 'source', output.key)}
-          translate={[26, 0]}
+          translate={[34, 0]}
           position={Position.Right}
         />
       )}