diff --git a/src/views/pages/process/catalog/catalog/catalog-viewprocess.vue b/src/views/pages/process/catalog/catalog/catalog-viewprocess.vue
index e40e174ab8060be5005dc7345068c4acfe696843..161c1f259f84704020881ba03b6fe48461c3f178 100644
--- a/src/views/pages/process/catalog/catalog/catalog-viewprocess.vue
+++ b/src/views/pages/process/catalog/catalog/catalog-viewprocess.vue
@@ -7,6 +7,7 @@
           mode="graph"
           :needMinimap="true"
           :readonly="true"
+          :processName="processName"
         ></FlowEditorToolbar>
       </div>
       <div v-if="isReady" style="height: calc(100vh - 334px)">
@@ -210,7 +211,8 @@ export default {
       selectLeft: [],
       showhandler: [],
       noticeList: [],
-      notifyList: []
+      notifyList: [],
+      processName: '' // 流程名称，用于导出流程图时使用，作为导出文件名
     };
   },
 
@@ -295,10 +297,10 @@ export default {
       };
       this.$api.process.process.getProcess(data).then(res => {
         if (res.Status == 'OK') {
-          let formUuid = res.Return.formUuid;
-          let config = res.Return.config;
-          this.slaList = config.process.slaList;
-          this.canvasNodeList = config.topo.nodes;
+          const { formUuid = '', config = {}, name = '' } = res?.Return || {};
+          this.slaList = config?.process?.slaList || [];
+          this.canvasNodeList = config?.topo?.nodes || [];
+          this.processName = name;
           this.getFormItem(formUuid);
           this.flowData = config;
           this.$nextTick(() => {
diff --git a/src/views/pages/process/flow/flow-edit-new.vue b/src/views/pages/process/flow/flow-edit-new.vue
index 7ae7341a8f2f9ed00c22d1dee5787c5de70fa34e..a7b449c3e8778da4fc887eb29d03a7b288e34d4f 100644
--- a/src/views/pages/process/flow/flow-edit-new.vue
+++ b/src/views/pages/process/flow/flow-edit-new.vue
@@ -71,6 +71,7 @@
             <FlowEditorToolbar
               :selectedNode="currentNode"
               :selectedEdge="currentEdge"
+              :processName="processName"
               :needMinimap="true"
               :graph="graph"
               mode="graph"
diff --git a/src/views/pages/process/flow/floweditor/flow-editor-toolbar.vue b/src/views/pages/process/flow/floweditor/flow-editor-toolbar.vue
index 3bda108835c62cfb6a6e5648a85c67d458bc3860..5dac36e647dfcd24750b5bfbb737230f3a67c2f5 100644
--- a/src/views/pages/process/flow/floweditor/flow-editor-toolbar.vue
+++ b/src/views/pages/process/flow/floweditor/flow-editor-toolbar.vue
@@ -58,6 +58,7 @@
       :title="$t('term.process.seeprocessconfig')"
       @click.stop="openFlow(true)"
     ></div>
+    <div class="action-item tsfont-download" title="导出流程图" @click.stop="exportPng()"></div>
   </div>
 </template>
 <script>
@@ -85,7 +86,8 @@ export default {
       type: String,
       default: ''
     },
-    processTaskId: { type: [Number, String] } // 流程任务id
+    processTaskId: { type: [Number, String] }, // 流程任务id
+    processName: { type: String, default: '流程图' } // 流程名称
   },
   data() {
     return {
@@ -167,6 +169,108 @@ export default {
         }
         window.open(url, '_blank');
       }
+    },
+    exportPng() {
+      const getContentArea = this.graph.getContentArea();
+      this.graph.toPNG(
+        async imgBase64 => {
+          const response = await fetch(imgBase64);
+          const blob = await response.blob();
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = `${this.processName}.png`;
+          a.click();
+          URL.revokeObjectURL(url);
+        },
+        {
+          quality: 1,
+          padding: 100,
+          preserveDimensions: false,
+          stylesheet: `${this.$utils.convertWoff2ToBase64()} 
+         .radius-sm {
+            border-radius: 6px;
+          }
+          .border-radius {
+            border-radius: 6px;
+          }
+          .icon {
+            z-index: 1;
+          }
+          .start,
+          .end {
+            width: 40px;
+            height: 40px;
+            border-radius: 40px;
+          }
+          .start {
+            background-color: #81d5531a;
+          }
+          .end {
+            background-color: #ff625a1a;
+          }
+          .core {
+            border-radius: 18px;
+            width: 18px;
+            height: 18px;
+          }
+          .container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .shadow {
+            box-shadow: 0 1px 4px #0000001a;
+          }
+          [data-shape="automatic"] .container,
+          [data-shape="event"] .container,
+          [data-shape="timer"] .container,
+          [data-shape="createjob"] .container,
+          [data-shape="cientitysync"] .container,
+          [data-shape="dataconversion"] .container  {
+            border-radius: 20px;
+          }
+          `,
+          width: getContentArea.width * 2,
+          height: getContentArea.height * 2,
+          beforeSerialize: graph => {
+            this.convertSpansToSvgText(graph);
+          }
+        }
+      );
+    },
+    convertSpansToSvgText(svg) {
+      // 为保证在导出操作时字体图标能够正常显示，将原本使用 span 标签展示的字体图标，
+      // 转换为 <svg> 包裹 <text> 标签的展示形式
+      const spanList = svg.querySelectorAll('span[class^="tsfont-"]');
+      spanList.forEach(span => {
+        const classList = span.classList;
+        const className = classList.value;
+        const unicodeStr = this.$utils.getUnicodeByClassName(className);
+
+        // 获取样式
+        const style = span.style;
+        const fill = style.color;
+        const fontSize = style.fontSize;
+
+        const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svgElement.setAttribute('width', 16);
+        svgElement.setAttribute('height', 16);
+
+        // 创建 <text> 元素
+        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        text.setAttribute('font-family', 'tsfont');
+        text.setAttribute('font-size', fontSize);
+        text.setAttribute('x', '50%');
+        text.setAttribute('y', '50%');
+        text.setAttribute('text-anchor', 'middle');
+        text.setAttribute('dominant-baseline', 'middle');
+        text.setAttribute('fill', fill);
+        text.textContent = unicodeStr;
+
+        svgElement.appendChild(text);
+        span.replaceWith(svgElement); // 替换span元素为<svg><text></text></svg>
+      });
     }
   },
   filter: {},
diff --git a/src/views/pages/process/task/process-topo-dialog.vue b/src/views/pages/process/task/process-topo-dialog.vue
index d9b4d550911d86bb65fec2af2b36f16adfadc712..3ff00046dcb878547d5223e63b23c74b814ba1cd 100644
--- a/src/views/pages/process/task/process-topo-dialog.vue
+++ b/src/views/pages/process/task/process-topo-dialog.vue
@@ -15,6 +15,7 @@
             :needMinimap="true"
             :flowUuid="flowUuid"
             :processTaskId="processTaskId"
+            :processName="title"
           ></FlowEditorToolbar>
         </div>
         <div style="height: calc(100vh - 334px)">
diff --git a/src/views/pages/process/task/processdetail/workorder/common/processtask-topo-dialog.vue b/src/views/pages/process/task/processdetail/workorder/common/processtask-topo-dialog.vue
index 3a070be0579a7d1db66db4cc855720fa3df5ac93..bf461cde22c4cfe9fe193dcc377a8b14d0974d91 100644
--- a/src/views/pages/process/task/processdetail/workorder/common/processtask-topo-dialog.vue
+++ b/src/views/pages/process/task/processdetail/workorder/common/processtask-topo-dialog.vue
@@ -15,6 +15,7 @@
             :readonly="true"
             :flowUuid="flowUuid"
             :processTaskId="processTaskId"
+            :processName="title"
           ></FlowEditorToolbar>
         </div>
         <div ref="flowBox" style="height: calc(100vh - 334px)">