w-flowchart 1.0.0 → 1.0.2

package/test/data//351/233/273/345/225/206/345/271/263/345/217/260/346/236/266/346/247/213/345/234/226.json

@@ -0,0 +1,134 @@
+{
+  "dir": "TB",
+  "nodes": [
+    {
+      "id": "FE",
+      "label": "前台層",
+      "cls": "blueG"
+    },
+    {
+      "id": "SV",
+      "label": "服務層",
+      "cls": "greenG"
+    },
+    {
+      "id": "DB",
+      "label": "資料層",
+      "cls": "orangeG"
+    },
+    {
+      "id": "fe1",
+      "label": "網頁前端",
+      "cls": "blue",
+      "group": "FE"
+    },
+    {
+      "id": "fe2",
+      "label": "行動應用",
+      "cls": "blue",
+      "group": "FE"
+    },
+    {
+      "id": "fe3",
+      "title": "前端共用元件",
+      "items": [
+        "元件庫",
+        "狀態管理",
+        "路由設定"
+      ],
+      "cls": "blue",
+      "group": "FE"
+    },
+    {
+      "id": "sv1",
+      "label": "API 閘道",
+      "cls": "green",
+      "group": "SV"
+    },
+    {
+      "id": "sv2",
+      "title": "訂單服務",
+      "items": [
+        "訂單建立",
+        "訂單查詢",
+        "退款處理"
+      ],
+      "cls": "green",
+      "group": "SV"
+    },
+    {
+      "id": "sv3",
+      "title": "會員服務",
+      "items": [
+        "註冊登入",
+        "權限驗證"
+      ],
+      "cls": "green",
+      "group": "SV"
+    },
+    {
+      "id": "sv4",
+      "label": "通知服務",
+      "cls": "green",
+      "group": "SV"
+    },
+    {
+      "id": "db1",
+      "label": "主要資料庫",
+      "cls": "orange",
+      "group": "DB"
+    },
+    {
+      "id": "db2",
+      "label": "快取",
+      "cls": "orange",
+      "group": "DB"
+    },
+    {
+      "id": "db3",
+      "label": "訊息佇列",
+      "cls": "orange",
+      "group": "DB"
+    }
+  ],
+  "edges": [
+    {
+      "from": "FE",
+      "to": "SV",
+      "label": "前台請求"
+    },
+    {
+      "from": "SV",
+      "to": "DB",
+      "label": "資料存取"
+    },
+    {
+      "from": "fe1",
+      "to": "sv1",
+      "label": "呼叫 API"
+    },
+    {
+      "from": "fe2",
+      "to": "sv1",
+      "label": "呼叫 API"
+    },
+    {
+      "from": "sv2",
+      "to": "db1"
+    },
+    {
+      "from": "sv3",
+      "to": "db1"
+    },
+    {
+      "from": "sv2",
+      "to": "db2",
+      "label": "快取查詢",
+      "kind": "dashed"
+    },
+    {
+      "from": "sv4",
+      "to": "db3"
+    }
+  ]
+}

package/test/data//351/240/201/351/235/242/345/260/216/350/246/275/351/227/234/350/201/257/345/234/226.json

@@ -0,0 +1,178 @@
+{
+  "dir": "TB",
+  "nodes": [
+    {
+      "id": "SITE",
+      "label": "入口網站",
+      "cls": "purpleG"
+    },
+    {
+      "id": "SEC_A",
+      "label": "商品瀏覽區",
+      "cls": "blueG2",
+      "group": "SITE"
+    },
+    {
+      "id": "SEC_B",
+      "label": "會員專區",
+      "cls": "greenG2",
+      "group": "SITE"
+    },
+    {
+      "id": "SEC_C",
+      "label": "購物流程",
+      "cls": "orangeG",
+      "group": "SITE"
+    },
+    {
+      "id": "a1",
+      "label": "首頁",
+      "cls": "blue",
+      "group": "SEC_A"
+    },
+    {
+      "id": "a2",
+      "label": "分類列表",
+      "cls": "blue",
+      "group": "SEC_A"
+    },
+    {
+      "id": "a3",
+      "label": "商品清單",
+      "cls": "blue",
+      "group": "SEC_A"
+    },
+    {
+      "id": "a4",
+      "label": "商品詳情",
+      "cls": "blue",
+      "group": "SEC_A"
+    },
+    {
+      "id": "b1",
+      "label": "登入頁",
+      "cls": "green",
+      "group": "SEC_B"
+    },
+    {
+      "id": "b2",
+      "label": "註冊頁",
+      "cls": "green",
+      "group": "SEC_B"
+    },
+    {
+      "id": "b3",
+      "label": "會員中心",
+      "cls": "green",
+      "group": "SEC_B"
+    },
+    {
+      "id": "b4",
+      "label": "訂單紀錄",
+      "cls": "green",
+      "group": "SEC_B"
+    },
+    {
+      "id": "c1",
+      "label": "購物車",
+      "cls": "orange",
+      "group": "SEC_C"
+    },
+    {
+      "id": "c2",
+      "label": "結帳頁",
+      "cls": "orange",
+      "group": "SEC_C"
+    },
+    {
+      "id": "c3",
+      "label": "付款頁",
+      "cls": "orange",
+      "group": "SEC_C"
+    },
+    {
+      "id": "c4",
+      "label": "完成頁",
+      "cls": "orange",
+      "group": "SEC_C"
+    },
+    {
+      "id": "d1",
+      "label": "客服頁",
+      "cls": "purple"
+    },
+    {
+      "id": "d2",
+      "label": "常見問題",
+      "cls": "purple"
+    }
+  ],
+  "edges": [
+    {
+      "from": "a1",
+      "to": "a2",
+      "label": "點擊"
+    },
+    {
+      "from": "a2",
+      "to": "a3",
+      "label": "點擊"
+    },
+    {
+      "from": "a3",
+      "to": "a4",
+      "label": "點擊"
+    },
+    {
+      "from": "b1",
+      "to": "b2",
+      "label": "點擊"
+    },
+    {
+      "from": "b1",
+      "to": "b3",
+      "label": "登入成功"
+    },
+    {
+      "from": "b3",
+      "to": "b4",
+      "label": "點擊"
+    },
+    {
+      "from": "c1",
+      "to": "c2",
+      "label": "點擊"
+    },
+    {
+      "from": "c2",
+      "to": "c3",
+      "label": "點擊"
+    },
+    {
+      "from": "c3",
+      "to": "c4",
+      "label": "付款完成"
+    },
+    {
+      "from": "a4",
+      "to": "d1",
+      "label": "點擊"
+    },
+    {
+      "from": "b1",
+      "to": "d1",
+      "label": "忘記密碼",
+      "kind": "dashed"
+    },
+    {
+      "from": "c1",
+      "to": "d1",
+      "label": "需要協助"
+    },
+    {
+      "from": "d1",
+      "to": "d2",
+      "label": "點擊"
+    }
+  ]
+}

package/test/figures.mjs

@@ -1,10 +1,11 @@
-// 9 張真圖正規化數據索引(供回歸測試): 讀 test/data/*.json, 衍生 rich 節點 label
+// 12 張範例圖正規化數據索引(供回歸測試): 讀 test/data/*.json, 衍生 rich 節點 label
+//   數據皆為泛用虛構情境(架構類/流程類/關聯組成類), 結構覆蓋: 巢狀容器/富節點/菱形循環/LR與TB/群組邊/A4折排/align
 import fs from 'fs'
 import { fileURLToPath } from 'url'
 import { dirname, resolve } from 'path'
 import { deriveLabels } from '../src/common/derive.mjs'
 
 const __dir = dirname(fileURLToPath(import.meta.url))
-const KEYS = ['系統架構圖', '系統關聯圖', '作業流程圖', '線上畫面關聯圖', '程式分層架構圖', '程式元件組成圖', '後端服務組成圖', '批次上傳處理流程圖', '前端架構與資料流圖']
+const KEYS = ['電商平台架構圖', '微服務叢集架構圖', '物聯網平台架構圖', '系統分層架構圖', '訂單處理流程圖', '會員註冊流程圖', '資料清洗流程圖', '工單處理流程圖', '模組組成圖', '頁面導覽關聯圖', '資料流向圖', '權限角色關聯圖']
 
 export const FIGURES = KEYS.map(key => ({ key, data: deriveLabels(JSON.parse(fs.readFileSync(resolve(__dir, 'data', key + '.json'), 'utf8'))) }))

package/test/lib.mjs

@@ -28,7 +28,9 @@ export async function renderCase(page, data) {
     if (!res.ok) return { spec, res, svg: null, png: null }
     await page.evaluate(() => document.fonts && document.fonts.ready)
     await page.waitForTimeout(120)
-    const svg = await page.evaluate(() => document.getElementById('stage').innerHTML)
+    // innerHTML 為 HTML 序列化, 會把 U+00A0 輸出成具名實體  (XML 未定義, 存成獨立 .svg 檔用瀏覽器直開會解析失敗)
+    // → 正規化回數字實體  , 使基準檔為合法 standalone SVG
+    const svg = (await page.evaluate(() => document.getElementById('stage').innerHTML)).replace(/ /g, ' ')
     const png = await page.locator('#stage svg').screenshot()
     return { spec, res, svg, png }
 }

package/test/p1.test.mjs

@@ -0,0 +1,5 @@
+// p1 渲染回歸(mocha) — 與 p10 相同測試輸入之 PNG 快照基準(共用邏輯見 snapshot.mjs)
+import { definePngSuite } from './snapshot.mjs'
+import { genPng } from '../src/p1/gen.mjs'
+
+definePngSuite('p1', genPng)

package/test/p10.test.mjs

@@ -14,16 +14,18 @@ import pixelmatch from 'pixelmatch'
 import { PNG } from 'pngjs'
 import { openStage, renderCase, runInvariants, helpers } from './lib.mjs'
 import { CASES } from './cases.mjs'
+import { DIAMOND_CASES } from './cases-diamond.mjs'
 import { FIGURES } from './figures.mjs'
 
 const __dir = dirname(fileURLToPath(import.meta.url))
-const SNAP = resolve(__dir, 'pics')
+const SNAP = resolve(__dir, 'pics', 'p10')
 const MAXDIFF = 60   // PNG 容許之反鋸齒雜訊像素上限(真 regression 量級遠超此)
 const UPDATE = process.env.UPDATE_BASELINE === '1' || process.env.UPDATE_BASELINE === 'true'
 
-// 待測清單: 合成案 + 9 真圖(真圖為最重要之回歸案)
+// 待測清單: 合成案 + 菱形進出組合案 + 範例圖
 const items = []
 for (const c of CASES) items.push({ name: c.name, data: c.data, check: c.check, expect: c.expect, kind: '合成' })
+for (const c of DIAMOND_CASES) items.push({ name: c.name, data: c.data, check: c.check, kind: '菱形' })
 for (const f of FIGURES) items.push({ name: f.key, data: f.data, kind: '真圖' })
 
 // PNG 像素比對(反鋸齒容差): 回 { same, detail }
@@ -86,4 +88,54 @@ describe('p10 渲染回歸(結構不變量 + 快照基準)', function() {
             }
         })
     }
+
+    // 菱形進出組合規則之單元驗證: 直接對頁內繪製函式(window.__dia)驅動 13 種組合,
+    // 不受 ELK 佈局埠序限制(其中「同半側」類組合乾淨合成圖排不出來, 僅能在此層驗證; 見 cases-diamond.mjs 檔頭)。
+    it('菱形 13 種進出組合規則(單元驗證)', async function() {
+        const fails = await page.evaluate(() => {
+            const { diamondSlantMid, diamondInAnchor, routeOutFromVertex, routeInToAnchor } = window.__dia
+            const box = { x: 0, y: 0, w: 100, h: 100 }
+            const bottom = { ax: 'y', sg: 1, v: { x: 50, y: 100 } }
+            const near = (p, q) => Math.abs(p.x - q.x) <= 0.5 && Math.abs(p.y - q.y) <= 0.5
+            const mL = diamondSlantMid(box, bottom, -1)
+            const mR = diamondSlantMid(box, bottom, 1)
+            const v = bottom.v
+            // 合成路徑: 出=自底邊 x 下行轉出; 進=自下方沿 x 直上進入底邊
+            const mkOut = (x) => [{ x, y: 100 }, { x, y: 160 }, { x: x + 25, y: 160 }, { x: x + 25, y: 300 }]
+            const mkIn = (x) => [{ x: x + 40, y: 300 }, { x: x + 40, y: 160 }, { x, y: 160 }, { x, y: 100 }]
+            const out = []
+            function run(name, outXs, inXs, expectIn) {
+                const hasOut = outXs.length > 0
+                outXs.forEach((x, i) => {
+                    const p = mkOut(x)
+                    routeOutFromVertex(p, { ax: 'y', sg: 1, v: { x: 50, y: 100 } })
+                    if (!near(p[0], v)) out.push(`${name} 出${i} 未自頂點 (${p[0].x},${p[0].y})`)
+                })
+                inXs.forEach((x, i) => {
+                    const p = mkIn(x)
+                    const a = diamondInAnchor(box, bottom, hasOut, p[p.length - 1])
+                    routeInToAnchor(p, bottom, a)
+                    const e = p[p.length - 1], want = expectIn[i]
+                    if (!near(e, want)) out.push(`${name} 進${i} 錨點 (${e.x.toFixed(1)},${e.y.toFixed(1)}) ≠ (${want.x},${want.y})`)
+                })
+            }
+            run('1進', [], [30], [v])
+            run('1出', [30], [], [])
+            run('2進(同半側)', [], [20, 35], [v, v])
+            run('2進(不同半側)', [], [30, 70], [v, v])
+            run('2出(同半側)', [20, 35], [], [])
+            run('2出(不同半側)', [30, 70], [], [])
+            run('1進1出', [30], [70], [mR])
+            run('2進1出(進同半側)', [45], [60, 80], [mR, mR])
+            run('2進1出(進不同半側)', [45], [20, 80], [mL, mR])
+            run('1進2出(出同半側)', [20, 35], [70], [mR])
+            run('1進2出(出不同半側)', [20, 80], [45], [mL])
+            run('2進2出(進同,出同)', [20, 35], [60, 80], [mR, mR])
+            run('2進2出(進不同,出同)', [20, 35], [10, 80], [mL, mR])
+            run('2進2出(進同,出不同)', [20, 80], [55, 70], [mR, mR])
+            run('2進2出(進不同,出不同)', [20, 80], [40, 60], [mL, mR])
+            return out
+        })
+        assert.deepStrictEqual(fails, [], '規則單元驗證失敗:\n' + fails.join('\n'))
+    })
 })

package/test/p2.test.mjs

@@ -0,0 +1,5 @@
+// p2 渲染回歸(mocha) — 與 p10 相同測試輸入之 PNG 快照基準(共用邏輯見 snapshot.mjs)
+import { definePngSuite } from './snapshot.mjs'
+import { genPng } from '../src/p2/gen.mjs'
+
+definePngSuite('p2', genPng)

package/test/p3.test.mjs

@@ -0,0 +1,5 @@
+// p3 渲染回歸(mocha) — 與 p10 相同測試輸入之 PNG 快照基準(共用邏輯見 snapshot.mjs)
+import { definePngSuite } from './snapshot.mjs'
+import { genPng } from '../src/p3/gen.mjs'
+
+definePngSuite('p3', genPng)

package/test/p4.test.mjs

@@ -0,0 +1,5 @@
+// p4 渲染回歸(mocha) — 與 p10 相同測試輸入之 PNG 快照基準(共用邏輯見 snapshot.mjs)
+import { definePngSuite } from './snapshot.mjs'
+import { genPng } from '../src/p4/gen.mjs'
+
+definePngSuite('p4', genPng)

package/test/p5.test.mjs

@@ -0,0 +1,6 @@
+// p5 渲染回歸(mocha) — 與 p10 相同測試輸入之 PNG 快照基準(共用邏輯見 snapshot.mjs)
+//   D2 WASM+dagre 對 18-20 節點圖單張可達 20-40s, 平行執行下再受 CPU 競爭 → 放寬單案逾時
+import { definePngSuite } from './snapshot.mjs'
+import { genPng } from '../src/p5/gen.mjs'
+
+definePngSuite('p5', genPng, { timeout: 180000 })

package/test/p6.test.mjs

@@ -0,0 +1,5 @@
+// p6 渲染回歸(mocha) — 與 p10 相同測試輸入之 PNG 快照基準(共用邏輯見 snapshot.mjs)
+import { definePngSuite } from './snapshot.mjs'
+import { genPng } from '../src/p6/gen.mjs'
+
+definePngSuite('p6', genPng)

package/test/p7.test.mjs

@@ -0,0 +1,5 @@
+// p7 渲染回歸(mocha) — 與 p10 相同測試輸入之 PNG 快照基準(共用邏輯見 snapshot.mjs)
+import { definePngSuite } from './snapshot.mjs'
+import { genPng } from '../src/p7/gen.mjs'
+
+definePngSuite('p7', genPng)

package/test/p8.test.mjs

@@ -0,0 +1,5 @@
+// p8 渲染回歸(mocha) — 與 p10 相同測試輸入之 PNG 快照基準(共用邏輯見 snapshot.mjs)
+import { definePngSuite } from './snapshot.mjs'
+import { genPng } from '../src/p8/gen.mjs'
+
+definePngSuite('p8', genPng)

package/test/p9.test.mjs

@@ -0,0 +1,5 @@
+// p9 渲染回歸(mocha) — 與 p10 相同測試輸入之 PNG 快照基準(共用邏輯見 snapshot.mjs)
+import { definePngSuite } from './snapshot.mjs'
+import { genPng } from '../src/p9/gen.mjs'
+
+definePngSuite('p9', genPng)

package/test/pics/p10/cycle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="147" height="479" viewBox="-18 -18 147 479" style="background:#fff"><path d="M 55.5 48 L 55.5 82" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 55.5 82 L 59.5 73 L 51.5 73 Z" fill="#44505a"></path><path d="M 64.16666666666666 118 L 64.16666666666666 144 L 77.25 144 L 77.25 243.75" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 77.25 243.75 L 81.25 234.75 L 73.25 234.75 Z" fill="#44505a"></path><path d="M 55.5 309 L 55.5 395" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 55.5 395 L 59.5 386 L 51.5 386 Z" fill="#44505a"></path><foreignObject x="28.5" y="343" width="31" height="22"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="font-size:12.5px;color:#4a5560;text-shadow:0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff;white-space:nowrap">通過</div></foreignObject><path d="M 55.5 222 L 55.5 144 L 46.83333333333333 144 L 46.83333333333333 118" fill="none" stroke="#44505a" stroke-width="2" stroke-dasharray="6 4"></path><path d="M 46.83333333333333 118 L 42.83333333333333 127 L 50.83333333333333 127 Z" fill="#44505a"></path><foreignObject x="14" y="170" width="31" height="22"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="font-size:12.5px;color:#4a5560;text-shadow:0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff;white-space:nowrap">退回</div></foreignObject><rect x="29.5" y="12" width="52" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="29.5" y="12" width="52" height="36"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#1c2b36;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">開始</div></div></foreignObject><rect x="29.5" y="82" width="52" height="36" rx="7" fill="#eaf4ef" stroke="#348a5c" stroke-width="1.6"></rect><foreignObject x="29.5" y="82" width="52" height="36"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#1c2b36;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">處理</div></div></foreignObject><polygon points="55.5,222 99,265.5 55.5,309 12,265.5" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.8"></polygon><foreignObject x="12" y="222" width="87" height="87"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#23303a;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">審核?</div></div></foreignObject><rect x="29.5" y="395" width="52" height="36" rx="7" fill="#eaf4ef" stroke="#256046" stroke-width="1.6"></rect><foreignObject x="29.5" y="395" width="52" height="36"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#256046;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">完成</div></div></foreignObject></svg>

package/test/pics/p10/deep-nest.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="224" height="419" viewBox="-18 -18 224 419" style="background:#fff"><rect x="12" y="12" width="164" height="226" rx="8" fill="#f5f9fe" fill-opacity="0.38" stroke="#3f6fb0" stroke-width="2"></rect><foreignObject x="59.5" y="17" width="69" height="33"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="text-align:center;font-weight:bold;font-size:15px;color:#3f6fb0;line-height:1.3;overflow-wrap:break-word;word-break:normal">第一層</div></foreignObject><rect x="26" y="54" width="136" height="159" rx="8" fill="#f0f7f3" fill-opacity="0.38" stroke="#348a5c" stroke-width="2"></rect><foreignObject x="59.5" y="59" width="69" height="33"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="text-align:center;font-weight:bold;font-size:15px;color:#348a5c;line-height:1.3;overflow-wrap:break-word;word-break:normal">第二層</div></foreignObject><rect x="40" y="96" width="108" height="92" rx="8" fill="#fdf6ec" fill-opacity="0.38" stroke="#c46e1a" stroke-width="2"></rect><foreignObject x="59.5" y="101" width="69" height="33"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="text-align:center;font-weight:bold;font-size:15px;color:#c46e1a;line-height:1.3;overflow-wrap:break-word;word-break:normal">第三層</div></foreignObject><path d="M 94 174 L 94 335" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 94 335 L 98 326 L 90 326 Z" fill="#44505a"></path><foreignObject x="54" y="283" width="44" height="22"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="font-size:12.5px;color:#4a5560;text-shadow:0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff;white-space:nowrap">跨三層</div></foreignObject><rect x="54" y="138" width="80" height="36" rx="7" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.6"></rect><foreignObject x="54" y="138" width="80" height="36"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#1c2b36;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">最深節點</div></div></foreignObject><rect x="54" y="335" width="80" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="54" y="335" width="80" height="36"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#1c2b36;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">頂層節點</div></div></foreignObject></svg>

package/test/pics/p10/dia-1in-1out.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="166" height="445" viewBox="-18 -18 166 445" style="background:#fff"><path d="M 64.5 48 L 64.5 82" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 64.5 82 L 68.5 73 L 60.5 73 Z" fill="#44505a"></path><path d="M 64.5 169 L 64.5 195 L 90 195 L 90 273" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 90 273 L 94 264 L 86 264 Z" fill="#44505a"></path><foreignObject x="93" y="221" width="31" height="22"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="font-size:12.5px;color:#4a5560;text-shadow:0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff;white-space:nowrap">通過</div></foreignObject><path d="M 90 309 L 90 335 L 77.83333333333334 335 L 77.83333333333334 361" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 77.83333333333334 361 L 81.83333333333334 352 L 73.83333333333334 352 Z" fill="#44505a"></path><path d="M 51.166666666666664 361 L 51.166666666666664 335 L 39 335 L 39 195 L 42.75 195 L 42.75 147.25" fill="none" stroke="#44505a" stroke-width="2" stroke-dasharray="6 4"></path><path d="M 42.75 147.25 L 38.75 156.25 L 46.75 156.25 Z" fill="#44505a"></path><foreignObject x="12" y="221" width="31" height="22"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="font-size:12.5px;color:#4a5560;text-shadow:0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff;white-space:nowrap">退回</div></foreignObject><rect x="38.5" y="12" width="52" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="38.5" y="12" width="52" height="36"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#1c2b36;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">開始</div></div></foreignObject><polygon points="64.5,82 108,125.5 64.5,169 21,125.5" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.8"></polygon><foreignObject x="21" y="82" width="87" height="87"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#23303a;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">判斷?</div></div></foreignObject><rect x="64" y="273" width="52" height="36" rx="7" fill="#eaf4ef" stroke="#348a5c" stroke-width="1.6"></rect><foreignObject x="64" y="273" width="52" height="36"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#1c2b36;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">結果</div></div></foreignObject><rect x="24.5" y="361" width="80" height="36" rx="7" fill="#fbecea" stroke="#c0392b" stroke-width="1.6"></rect><foreignObject x="24.5" y="361" width="80" height="36"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#23303a;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">回饋來源</div></div></foreignObject></svg>

package/test/pics/p10/dia-1in-2out.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="241" height="445" viewBox="-18 -18 241 445" style="background:#fff"><path d="M 102 48 L 102 82" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 102 82 L 106 73 L 98 73 Z" fill="#44505a"></path><path d="M 102 169 L 102 195 L 160 195 L 160 273" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 160 273 L 164 264 L 156 264 Z" fill="#44505a"></path><foreignObject x="145" y="221" width="19" height="22"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="font-size:12.5px;color:#4a5560;text-shadow:0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff;white-space:nowrap">是</div></foreignObject><path d="M 102 169 L 102 195 L 45 195 L 45 273" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 45 273 L 49 264 L 41 264 Z" fill="#44505a"></path><foreignObject x="30" y="221" width="19" height="22"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="font-size:12.5px;color:#4a5560;text-shadow:0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff;white-space:nowrap">否</div></foreignObject><path d="M 160 309 L 160 335 L 144.33333333333334 335 L 144.33333333333334 361" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 144.33333333333334 361 L 148.33333333333334 352 L 140.33333333333334 352 Z" fill="#44505a"></path><path d="M 117.66666666666667 361 L 117.66666666666667 335 L 123.75 335 L 123.75 147.25" fill="none" stroke="#44505a" stroke-width="2" stroke-dasharray="6 4"></path><path d="M 123.75 147.25 L 119.75 156.25 L 127.75 156.25 Z" fill="#44505a"></path><rect x="76" y="12" width="52" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="76" y="12" width="52" height="36"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#1c2b36;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">開始</div></div></foreignObject><polygon points="102,82 145.5,125.5 102,169 58.5,125.5" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.8"></polygon><foreignObject x="58.5" y="82" width="87" height="87"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#23303a;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">判斷?</div></div></foreignObject><rect x="127" y="273" width="66" height="36" rx="7" fill="#eaf4ef" stroke="#348a5c" stroke-width="1.6"></rect><foreignObject x="127" y="273" width="66" height="36"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#1c2b36;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">結果一</div></div></foreignObject><rect x="12" y="273" width="66" height="36" rx="7" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.6"></rect><foreignObject x="12" y="273" width="66" height="36"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#1c2b36;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">結果二</div></div></foreignObject><rect x="91" y="361" width="80" height="36" rx="7" fill="#fbecea" stroke="#c0392b" stroke-width="1.6"></rect><foreignObject x="91" y="361" width="80" height="36"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#23303a;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">回饋來源</div></div></foreignObject></svg>

package/test/pics/p10/dia-1in.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="147" height="217" viewBox="-18 -18 147 217" style="background:#fff"><path d="M 55.5 48 L 55.5 82" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 55.5 82 L 59.5 73 L 51.5 73 Z" fill="#44505a"></path><rect x="29.5" y="12" width="52" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="29.5" y="12" width="52" height="36"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#1c2b36;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">來源</div></div></foreignObject><polygon points="55.5,82 99,125.5 55.5,169 12,125.5" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.8"></polygon><foreignObject x="12" y="82" width="87" height="87"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#23303a;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">判斷?</div></div></foreignObject></svg>

package/test/pics/p10/dia-1out.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="147" height="287" viewBox="-18 -18 147 287" style="background:#fff"><path d="M 55.5 48 L 55.5 82" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 55.5 82 L 59.5 73 L 51.5 73 Z" fill="#44505a"></path><path d="M 55.5 169 L 55.5 203" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 55.5 203 L 59.5 194 L 51.5 194 Z" fill="#44505a"></path><rect x="29.5" y="12" width="52" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="29.5" y="12" width="52" height="36"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#1c2b36;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">開始</div></div></foreignObject><polygon points="55.5,82 99,125.5 55.5,169 12,125.5" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.8"></polygon><foreignObject x="12" y="82" width="87" height="87"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#23303a;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">判斷?</div></div></foreignObject><rect x="29.5" y="203" width="52" height="36" rx="7" fill="#eaf4ef" stroke="#348a5c" stroke-width="1.6"></rect><foreignObject x="29.5" y="203" width="52" height="36"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#1c2b36;line-height:1.4;padding:0 4px;box-sizing:border-box"><div style="width:100%;min-width:0;overflow-wrap:break-word;word-break:normal">結果</div></div></foreignObject></svg>