MyFlow 流程圖 JSON 數據後端保存與渲染全流程指南

需求澄清

MyFlow 導出的是流程圖的 **JSON 配置數據**（節點、連線、坐標等元數據），而非圖片。後端處理有兩種典型場景：

場景一：僅保存 JSON 配置，前端復原渲染（推薦）

前端導出

var jsonStr = JSON.stringify(myFlow.save()); // 獲取配置字符串
// 發送給後端保存
$.post('/api/flow/save', { flowData: jsonStr });

後端存儲

直接存入數據庫 TEXT/CLOB/JSON 類型字段，無需解析結構。

前端加載復原

// 後端返回保存的 jsonStr
var savedJson = response.flowData;
// 直接初始化 MyFlow
myFlow.load(savedJson); // 或按文檔調用相應 API

優勢：輕量、可編輯、版本控制友好、支持撤銷/重做。

場景二：後端生成圖片文件（PNG/SVG）

若業務需求是「存圖片供預覽/下載/打印」：

方案 A：前端 Canvas 轉圖片上傳

// MyFlow 內部使用 SVG/VML 繪圖
var svg = document.querySelector('#flow-container svg').outerHTML;
// 使用 canvg 或 html2canvas 將 SVG 轉 Canvas 再到 Blob
var canvas = document.createElement('canvas');
canvg(canvas, svg);
canvas.toBlob(function(blob) {
  var formData = new FormData();
  formData.append('image', blob, 'flow.png');
  $.ajax({ url: '/api/flow/upload-image', data: formData, processData: false, contentType: false });
});

方案 B：後端無頭瀏覽器渲染（Node.js/Puppeteer 或 Java/Headless Chrome）

1. 後端接收 JSON 配置。
2. 動態生成包含 MyFlow 渲染邏輯的 HTML 頁面。
3. Puppeteer 打開頁面，等待渲染完成，截圖保存。

適用：服務端生成報表、郵件附件、無前端環境場景。

關鍵技術點

• MyFlow 使用 SVG（現代瀏覽器）或 VML（IE8-） 繪圖。
• JSON 配置包含節點 {id, type, x, y, text...}、連線 {from, to, type...} 等純數據結構。
• 前端容器 innerHTML 直接是 SVG/VML 代碼，可直接提取。

總結建議

1. 首選方案一：前端負責渲染與交互，後端只存 JSON 字符串，架構最清晰。
2. 若必須生成圖片，**前端轉圖上傳** 實現最簡單，無需後端引入重型渲染依賴。
3. 避免在後端用 Java/Php 直接解析 JSON 繪圖，MyFlow 繪圖邏輯複雜，移植成本極高。