w-flowchart 1.0.0

package/test/data//347/263/273/347/265/261/351/227/234/350/201/257/345/234/226.json

@@ -0,0 +1,117 @@
+{
+  "dir": "LR",
+  "nodes": [
+    {
+      "id": "APP",
+      "label": "應用系統",
+      "cls": "purpleG"
+    },
+    {
+      "id": "a1",
+      "label": "GIS2D",
+      "cls": "purple",
+      "group": "APP"
+    },
+    {
+      "id": "a2",
+      "label": "GIS3D",
+      "cls": "purple",
+      "group": "APP"
+    },
+    {
+      "id": "a3",
+      "label": "需求管理",
+      "cls": "purple",
+      "group": "APP"
+    },
+    {
+      "id": "a4",
+      "label": "知識管理",
+      "cls": "purple",
+      "group": "APP"
+    },
+    {
+      "id": "a5",
+      "label": "特徵事件作用",
+      "cls": "purple",
+      "group": "APP"
+    },
+    {
+      "id": "a6",
+      "label": "評估模式流程",
+      "cls": "purple",
+      "group": "APP"
+    },
+    {
+      "id": "a7",
+      "label": "源項",
+      "cls": "purple",
+      "group": "APP"
+    },
+    {
+      "id": "API",
+      "label": "API 管理系統",
+      "cls": "blue"
+    },
+    {
+      "id": "PDM",
+      "label": "計畫資料管理系統",
+      "cls": "blue"
+    },
+    {
+      "id": "BAT",
+      "label": "批次上傳系統",
+      "cls": "orange"
+    },
+    {
+      "id": "AUTH",
+      "label": "單一登入＋權限管理",
+      "cls": "red"
+    },
+    {
+      "id": "URLC",
+      "label": "輔助網址控制系統",
+      "cls": "orange"
+    }
+  ],
+  "edges": [
+    {
+      "from": "APP",
+      "to": "API",
+      "label": "取用詮釋資料"
+    },
+    {
+      "from": "API",
+      "to": "PDM"
+    },
+    {
+      "from": "BAT",
+      "to": "PDM",
+      "label": "匯入"
+    },
+    {
+      "from": "AUTH",
+      "to": "APP",
+      "label": "共用驗證",
+      "kind": "dashed"
+    },
+    {
+      "from": "AUTH",
+      "to": "PDM",
+      "label": "共用驗證",
+      "kind": "dashed"
+    },
+    {
+      "from": "AUTH",
+      "to": "API",
+      "label": "共用驗證",
+      "kind": "dashed"
+    },
+    {
+      "from": "URLC",
+      "to": "APP",
+      "label": "跨系統調閱",
+      "kind": "dashed"
+    }
+  ]
+}

package/test/data//347/267/232/344/270/212/347/225/253/351/235/242/351/227/234/350/201/257/345/234/226.json

@@ -0,0 +1,162 @@
+{
+  "dir": "LR",
+  "nodes": [
+    {
+      "id": "L",
+      "title": "登入",
+      "items": [
+        "SSO"
+      ],
+      "cls": "red"
+    },
+    {
+      "id": "M",
+      "title": "主畫面",
+      "items": [
+        "選單"
+      ],
+      "cls": "blue"
+    },
+    {
+      "id": "p0",
+      "label": "主要資訊",
+      "cls": "purple"
+    },
+    {
+      "id": "p1",
+      "label": "計畫資料管理",
+      "cls": "purple"
+    },
+    {
+      "id": "p2",
+      "label": "輔助參考文獻",
+      "cls": "purple"
+    },
+    {
+      "id": "p3",
+      "label": "需求管理",
+      "cls": "purple"
+    },
+    {
+      "id": "p4",
+      "label": "知識管理",
+      "cls": "purple"
+    },
+    {
+      "id": "p5",
+      "label": "特徵事件作用",
+      "cls": "purple"
+    },
+    {
+      "id": "p6",
+      "label": "評估模式流程",
+      "cls": "purple"
+    },
+    {
+      "id": "p7",
+      "label": "源項",
+      "cls": "purple"
+    },
+    {
+      "id": "p8",
+      "label": "GIS2D",
+      "cls": "purple"
+    },
+    {
+      "id": "p9",
+      "label": "GIS3D",
+      "cls": "purple"
+    },
+    {
+      "id": "p10",
+      "label": "模板下載",
+      "cls": "purple"
+    },
+    {
+      "id": "p11",
+      "label": "輔助工具",
+      "cls": "purple"
+    },
+    {
+      "id": "p12",
+      "label": "批次上傳",
+      "cls": "purple"
+    },
+    {
+      "id": "p13",
+      "label": "API 管理",
+      "cls": "purple"
+    },
+    {
+      "id": "p14",
+      "label": "後台管理",
+      "cls": "purple"
+    }
+  ],
+  "edges": [
+    {
+      "from": "L",
+      "to": "M"
+    },
+    {
+      "from": "M",
+      "to": "p0"
+    },
+    {
+      "from": "M",
+      "to": "p1"
+    },
+    {
+      "from": "M",
+      "to": "p2"
+    },
+    {
+      "from": "M",
+      "to": "p3"
+    },
+    {
+      "from": "M",
+      "to": "p4"
+    },
+    {
+      "from": "M",
+      "to": "p5"
+    },
+    {
+      "from": "M",
+      "to": "p6"
+    },
+    {
+      "from": "M",
+      "to": "p7"
+    },
+    {
+      "from": "M",
+      "to": "p8"
+    },
+    {
+      "from": "M",
+      "to": "p9"
+    },
+    {
+      "from": "M",
+      "to": "p10"
+    },
+    {
+      "from": "M",
+      "to": "p11"
+    },
+    {
+      "from": "M",
+      "to": "p12"
+    },
+    {
+      "from": "M",
+      "to": "p13"
+    },
+    {
+      "from": "M",
+      "to": "p14"
+    }
+  ]
+}

package/test/figures.mjs

@@ -0,0 +1,10 @@
+// 9 張真圖正規化數據索引(供回歸測試): 讀 test/data/*.json, 衍生 rich 節點 label
+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 = ['系統架構圖', '系統關聯圖', '作業流程圖', '線上畫面關聯圖', '程式分層架構圖', '程式元件組成圖', '後端服務組成圖', '批次上傳處理流程圖', '前端架構與資料流圖']
+
+export const FIGURES = KEYS.map(key => ({ key, data: deriveLabels(JSON.parse(fs.readFileSync(resolve(__dir, 'data', key + '.json'), 'utf8'))) }))

package/test/lib.mjs

@@ -0,0 +1,116 @@
+// p10 測試共用 — 重用 gen.mjs 之「真實」管線(translate + PAGE_HTML + window.renderFig), 不複製渲染器(複製會與 production 分叉, 失去測試意義)。
+//   openStage(): 啟一個 headless 舞台頁(elkjs + renderFig 就緒)
+//   renderCase(page, data): 跑單案真實管線 → { spec, res(含 geom 幾何), svg(字串), png(Buffer) }
+//   runInvariants(spec, geom): 對「任何正確 p10 輸出皆須成立」之結構不變量做斷言(spec 翻譯, 非現狀指紋)
+import { chromium } from 'playwright'
+import { translate, PAGE_HTML } from '../src/p10/gen.mjs'
+
+export { translate }
+
+export async function openStage() {
+    const browser = await chromium.launch()
+    const page = await browser.newPage({ deviceScaleFactor: 2 })
+    const errs = []
+    page.on('pageerror', e => errs.push(e.message))
+    page.on('console', m => {
+        if (m.type() === 'error') errs.push('c:' + m.text().slice(0, 200))
+    })
+    await page.setContent(PAGE_HTML, { waitUntil: 'load' })
+    await page.waitForFunction(() => window.__ready, { timeout: 60000 }).catch(() => {})
+    await page.evaluate(() => document.fonts && document.fonts.ready)
+    return { browser, page, errs }
+}
+
+// 跑單一案例之真實管線 → { spec, res, svg, png }
+export async function renderCase(page, data) {
+    const spec = translate(data)
+    const res = await page.evaluate(s => window.renderFig(s), spec)
+    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)
+    const png = await page.locator('#stage svg').screenshot()
+    return { spec, res, svg, png }
+}
+
+// 幾何便捷查詢
+export function helpers(geom) {
+    return {
+        node: id => geom.nodes.find(n => n.id === id),
+        group: id => geom.groups.find(g => g.id === id),
+    }
+}
+
+const within = (c, p, tol) => c.x >= p.x - tol && c.y >= p.y - tol && c.x + c.w <= p.x + p.w + tol && c.y + c.h <= p.y + p.h + tol
+const overlap = (a, b, tol) => a.x < b.x + b.w - tol && b.x < a.x + a.w - tol && a.y < b.y + b.h - tol && b.y < a.y + a.h - tol
+const near = (p, box, tol) => p.x >= box.x - tol && p.x <= box.x + box.w + tol && p.y >= box.y - tol && p.y <= box.y + box.h + tol
+
+// 通用結構不變量(對所有案例 + 9 真圖皆套用)。每項對應「正確 p10 輸出必成立」之一句 spec, 非「跟上次一樣」之指紋。
+//   回 [{ name, pass, detail }]
+export function runInvariants(spec, geom) {
+    const out = []
+    const bbox = {}; geom.groups.forEach(g => bbox[g.id] = g); geom.nodes.forEach(n => bbox[n.id] = n)
+
+    // 1) 存在性: 每個邏輯節點/群組都被畫出(重構不可漏掉元素)
+    {
+        const gNodes = new Set(geom.nodes.map(n => n.id)); const gGroups = new Set(geom.groups.map(g => g.id))
+        const missN = spec.nodes.filter(n => !gNodes.has(n.id)).map(n => n.id)
+        const missG = spec.groups.filter(g => !gGroups.has(g.id)).map(g => g.id)
+        out.push({ name: '存在性: 節點/群組無遺漏', pass: !missN.length && !missG.length, detail: (missN.length || missG.length) ? `缺節點[${missN}] 缺群組[${missG}]` : `${geom.nodes.length} 節點 / ${geom.groups.length} 群組` })
+    }
+
+    // 2) 包含: 有父者其外框 ⊆ 父外框(容器須包住成員, ELK INCLUDE_CHILDREN 合約)
+    {
+        const bad = []
+        ;[...geom.groups, ...geom.nodes].forEach(c => {
+            if (c.parent && bbox[c.parent] && !within(c, bbox[c.parent], 1.5)) bad.push(c.id + '⊄' + c.parent)
+        })
+        out.push({ name: '包含: 成員不逃出容器', pass: !bad.length, detail: bad.length ? bad.slice(0, 4).join(', ') : '全部成員在容器內' })
+    }
+
+    // 3) 標題不溢出: 每個容器標題寬 ≤ 容器寬(2-pass padding 撐寬機制之合約)
+    {
+        const bad = geom.groups.filter(g => g.labelW > g.w + 2).map(g => `${g.id}(標題${g.labelW}>框${g.w})`)
+        out.push({ name: '標題不溢出容器', pass: !bad.length, detail: bad.length ? bad.slice(0, 4).join(', ') : '全部標題在框內' })
+    }
+
+    // 4) 不重疊: 同一父之葉節點互不重疊(佈局健全性)
+    {
+        const byParent = {}; geom.nodes.forEach(n => {
+            (byParent[n.parent || '_root'] = byParent[n.parent || '_root'] || []).push(n)
+        })
+        const bad = []
+        Object.values(byParent).forEach(arr => {
+            for (let i = 0; i < arr.length; i++) for (let j = i + 1; j < arr.length; j++) if (overlap(arr[i], arr[j], 1.5)) bad.push(arr[i].id + '∩' + arr[j].id)
+        })
+        out.push({ name: '不重疊: 同層節點分離', pass: !bad.length, detail: bad.length ? bad.slice(0, 4).join(', ') : '節點無重疊' })
+    }
+
+    // 5) items 框: 標題+items 節點須有標題列(headH>0)且本體高於標題列
+    {
+        const its = geom.nodes.filter(n => n.kind === 'items')
+        const bad = its.filter(n => !(n.headH > 0 && n.h > n.headH + 4)).map(n => `${n.id}(h=${n.h} headH=${n.headH})`)
+        out.push({ name: 'items 框: 標題列+本體完整', pass: !bad.length, detail: its.length ? (bad.length ? bad.join(', ') : `${its.length} 個 items 框正常`) : '(無 items 框)' })
+    }
+
+    // 6) 邊: 每條邏輯邊都有路由(≥1 段, ≥2 點), 且兩端點落在來源/目標節點邊界(LCA 容器座標正確 → 不會跑到左上角)
+    {
+        const idset = new Set(geom.edges.map(e => e.id))
+        const missing = spec.edges.filter(e => !idset.has(e.id)).map(e => e.id)
+        const noRoute = []; const offTarget = []
+        spec.edges.forEach(se => {
+            const ge = geom.edges.find(e => e.id === se.id); if (!ge) return
+            const seg = ge.segs && ge.segs.find(s => s.length >= 2)
+            if (!seg) {
+                noRoute.push(se.id); return
+            }
+            const s0 = seg[0]; const s1 = seg[seg.length - 1]
+            const src = bbox[se.from]; const tgt = bbox[se.to]
+            if (src && tgt && !(near(s0, src, 6) && near(s1, tgt, 6))) offTarget.push(`${se.id}(${se.from}→${se.to})`)
+        })
+        const pass = !missing.length && !noRoute.length && !offTarget.length
+        out.push({ name: '邊: 皆有路由且兩端接節點', pass, detail: pass ? `${geom.edges.length} 條邊正常` : `缺[${missing}] 無路由[${noRoute}] 端點脫離[${offTarget.slice(0, 4)}]` })
+    }
+
+    return out
+}

package/test/p10.test.mjs

@@ -0,0 +1,89 @@
+// p10 渲染回歸(mocha) — 10 合成案 + 9 真圖, 兩層把關:
+//   A. 結構不變量(spec 翻譯, 硬失敗): 存在性/包含/標題不溢出/不重疊/items框/邊路由
+//   B. 快照基準(回歸偵測): SVG 逐字比對 + PNG 像素(pixelmatch includeAA:false, 容差 MAXDIFF)
+// 用法:
+//   npm test                                                            全部測試
+//   npx mocha "test/p10.test.mjs" --timeout 60000           只跑本回歸
+//   npx mocha "test/p10.test.mjs" --timeout 60000 --grep fold   只跑名稱含 fold 之案
+//   重建基準(確認變動為預期後才做): 設環境變數 UPDATE_BASELINE=1 再跑
+import assert from 'assert'
+import fs from 'fs'
+import { fileURLToPath } from 'url'
+import { dirname, resolve } from 'path'
+import pixelmatch from 'pixelmatch'
+import { PNG } from 'pngjs'
+import { openStage, renderCase, runInvariants, helpers } from './lib.mjs'
+import { CASES } from './cases.mjs'
+import { FIGURES } from './figures.mjs'
+
+const __dir = dirname(fileURLToPath(import.meta.url))
+const SNAP = resolve(__dir, 'pics')
+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 f of FIGURES) items.push({ name: f.key, data: f.data, kind: '真圖' })
+
+// PNG 像素比對(反鋸齒容差): 回 { same, detail }
+function pngCompare(baseBuf, curBuf, diffPath) {
+    const a = PNG.sync.read(baseBuf), b = PNG.sync.read(curBuf)
+    if (a.width !== b.width || a.height !== b.height) return { same: false, detail: `尺寸 ${a.width}x${a.height} → ${b.width}x${b.height}` }
+    const diff = new PNG({ width: a.width, height: a.height })
+    const n = pixelmatch(a.data, b.data, diff.data, a.width, a.height, { includeAA: false, threshold: 0.1 })
+    if (n > MAXDIFF) { fs.writeFileSync(diffPath, PNG.sync.write(diff)); return { same: false, detail: `${n} 像素差 (>${MAXDIFF}) → ${diffPath}` } }
+    return { same: true, detail: `${n} 像素差` }
+}
+
+describe('p10 渲染回歸(結構不變量 + 快照基準)', function() {
+    let browser = null
+    let page = null
+
+    before(async function() {
+        this.timeout(120000)
+        fs.mkdirSync(SNAP, { recursive: true })
+        const s = await openStage()
+        browser = s.browser
+        page = s.page
+    })
+
+    after(async function() {
+        if (browser) await browser.close()
+    })
+
+    for (const tc of items) {
+        it(`[${tc.kind}] ${tc.name}`, async function() {
+            const r = await renderCase(page, tc.data)
+            assert.ok(r.res && r.res.ok, '渲染失敗: ' + (r.res && r.res.err))
+            const geom = r.res.geom
+            const h = helpers(geom)
+
+            // A. 不變量 + 案例專屬斷言 + 比例期望
+            const checks = runInvariants(r.spec, geom)
+            if (tc.check) checks.push(...tc.check(r.spec, geom, h).filter(Boolean))
+            if (tc.expect) {
+                const R = geom.H / geom.W
+                if (tc.expect.ratioMax != null) checks.push({ name: `比例 H/W ≤ ${tc.expect.ratioMax}`, pass: R <= tc.expect.ratioMax + 0.02, detail: `R=${R.toFixed(3)}` })
+                if (tc.expect.ratioMin != null) checks.push({ name: `比例 H/W ≥ ${tc.expect.ratioMin}`, pass: R >= tc.expect.ratioMin - 0.02, detail: `R=${R.toFixed(3)}` })
+            }
+            const failed = checks.filter(c => !c.pass)
+            assert.ok(!failed.length, '不變量失敗: ' + failed.map(c => `${c.name}(${c.detail || ''})`).join('; '))
+
+            // B. 快照基準(無基準或 UPDATE_BASELINE=1 時建立/重建)
+            const svgP = resolve(SNAP, tc.name + '.svg')
+            const pngP = resolve(SNAP, tc.name + '.png')
+            if (UPDATE || !fs.existsSync(svgP)) fs.writeFileSync(svgP, r.svg)
+            else {
+                const base = fs.readFileSync(svgP, 'utf8')
+                if (base !== r.svg) fs.writeFileSync(resolve(SNAP, tc.name + '.new.svg'), r.svg)
+                assert.ok(base === r.svg, `SVG 與基準不同(長 ${base.length}→${r.svg.length}; 已輸出 ${tc.name}.new.svg, 確認為預期後以 UPDATE_BASELINE=1 重建)`)
+            }
+            if (UPDATE || !fs.existsSync(pngP)) fs.writeFileSync(pngP, r.png)
+            else {
+                const c = pngCompare(fs.readFileSync(pngP), r.png, resolve(SNAP, tc.name + '.diff.png'))
+                assert.ok(c.same, `PNG 與基準不同: ${c.detail}(確認為預期後以 UPDATE_BASELINE=1 重建)`)
+            }
+        })
+    }
+})

package/test/pics/cycle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="147" height="497" viewBox="-18 -18 147 497" style="background:#fff"><path d="M 49.66666666666667 48 L 49.66666666666667 82" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 49.66666666666667 82 L 53.66666666666667 73 L 45.66666666666667 73 Z" fill="#44505a"></path><path d="M 58.33333333333333 118 L 58.33333333333333 144 L 66 144 L 66 214 L 70 214 L 70 240" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 70 240 L 74 231 L 66 231 Z" fill="#44505a"></path><path d="M 55.5 327 L 55.5 413" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 55.5 413 L 59.5 404 L 51.5 404 Z" fill="#44505a"></path><foreignObject x="28.5" y="361" 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 41 240 L 41 118" fill="none" stroke="#44505a" stroke-width="2" stroke-dasharray="6 4"></path><path d="M 41 118 L 37 127 L 45 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="23.666666666666668" y="12" width="52" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="23.666666666666668" 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></foreignObject><rect x="23.666666666666668" y="82" width="52" height="36" rx="7" fill="#eaf4ef" stroke="#348a5c" stroke-width="1.6"></rect><foreignObject x="23.666666666666668" 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></foreignObject><polygon points="55.5,240 99,283.5 55.5,327 12,283.5" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.8"></polygon><foreignObject x="12" y="240" 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></foreignObject><rect x="29.5" y="413" width="52" height="36" rx="7" fill="#eaf4ef" stroke="#256046" stroke-width="1.6"></rect><foreignObject x="29.5" y="413" 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></foreignObject></svg>

package/test/pics/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">第一層</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">第二層</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">第三層</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></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></foreignObject></svg>

package/test/pics/diamond.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="197" height="357" viewBox="-18 -18 197 357" 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 41 169 L 41 273" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 41 273 L 45 264 L 37 264 Z" fill="#44505a"></path><foreignObject x="26" 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 70 169 L 70 195 L 123 195 L 123 273" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 123 273 L 127 264 L 119 264 Z" fill="#44505a"></path><foreignObject x="126" 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><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></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></foreignObject><rect x="15" y="273" width="52" height="36" rx="7" fill="#eaf4ef" stroke="#348a5c" stroke-width="1.6"></rect><foreignObject x="15" 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></foreignObject><rect x="97" y="273" width="52" height="36" rx="7" fill="#fbecea" stroke="#c0392b" stroke-width="1.6"></rect><foreignObject x="97" 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:#23303a;line-height:1.4;padding:0 4px;box-sizing:border-box">退回</div></foreignObject></svg>

package/test/pics/edges-mix.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="222" height="324" viewBox="-18 -18 222 324" style="background:#fff"><path d="M 64 48 L 64 152" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 64 152 L 68 143 L 60 143 Z" fill="#44505a"></path><foreignObject x="12" y="100" width="56" 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 81.33333333333334 48 L 81.33333333333334 74 L 121 74 L 121 214 L 86 214 L 86 240" fill="none" stroke="#44505a" stroke-width="2" stroke-dasharray="6 4"></path><path d="M 86 240 L 90 231 L 82 231 Z" fill="#44505a"></path><foreignObject x="124" y="100" width="56" 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 64 188 L 64 240" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 64 240 L 68 231 L 60 231 Z" fill="#44505a"></path><rect x="46.66666666666667" y="12" width="52" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="46.66666666666667" 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></foreignObject><rect x="31" y="152" width="66" height="36" rx="7" fill="#eaf4ef" stroke="#348a5c" stroke-width="1.6"></rect><foreignObject x="31" y="152" 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></foreignObject><rect x="42" y="240" width="66" height="36" rx="7" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.6"></rect><foreignObject x="42" y="240" 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></foreignObject></svg>

package/test/pics/english.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="284" height="375" viewBox="-18 -18 284 375" style="background:#fff"><path d="M 124 48 L 124 134" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 124 134 L 128 125 L 120 125 Z" fill="#44505a"></path><foreignObject x="83" y="82" width="45" 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">HTTPS</div></foreignObject><path d="M 124 237 L 124 271" fill="none" stroke="#44505a" stroke-width="2" stroke-dasharray="6 4"></path><path d="M 124 271 L 128 262 L 120 262 Z" fill="#44505a"></path><rect x="70.5" y="12" width="107" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="70.5" y="12" width="107" 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">API Gateway</div></foreignObject><rect x="45.5" y="134" width="157" height="103" rx="7" fill="#eaf4ef"></rect><path d="M 52.5 134 H 195.5 A 7 7 0 0 1 202.5 141 V 166 H 45.5 V 141 A 7 7 0 0 1 52.5 134 Z" fill="#cde3d7"></path><rect x="45.5" y="134" width="157" height="103" rx="7" fill="none" stroke="#348a5c" stroke-width="1.6"></rect><line x1="45.5" y1="166" x2="202.5" y2="166" stroke="#348a5c" stroke-width="1"></line><foreignObject x="45.5" y="134" width="157" height="32"><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-weight:bold;font-size:14px;color:#1c2b36">Auth Service</div></foreignObject><foreignObject x="45.5" y="166" width="157" height="71"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="font-size:13px;line-height:1.55;padding:6px 9px 4px;text-align:left;color:#1c2b36"><div style="white-space:nowrap">•&nbsp;login/logout</div><div style="white-space:nowrap">•&nbsp;token refresh (JWT)</div><div style="white-space:nowrap">•&nbsp;session mgmt</div></div></foreignObject><rect x="12" y="271" width="224" height="56" rx="7" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.6"></rect><foreignObject x="12" y="271" width="224" height="56"><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">InternationalizationConfigurationManager</div></foreignObject></svg>

package/test/pics/flat-tb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="126" height="236" viewBox="-18 -18 126 236" style="background:#fff"><path d="M 45 48 L 45 82" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 45 82 L 49 73 L 41 73 Z" fill="#44505a"></path><path d="M 45 118 L 45 152" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 45 152 L 49 143 L 41 143 Z" fill="#44505a"></path><rect x="12" y="12" width="66" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="12" y="12" 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">節點 A</div></foreignObject><rect x="12.5" y="82" width="65" height="36" rx="7" fill="#eaf4ef" stroke="#348a5c" stroke-width="1.6"></rect><foreignObject x="12.5" y="82" width="65" 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">節點 B</div></foreignObject><rect x="12.5" y="152" width="65" height="36" rx="7" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.6"></rect><foreignObject x="12.5" y="152" width="65" 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">節點 C</div></foreignObject></svg>

package/test/pics/fold-tall.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="384" height="304" viewBox="-18 -18 384 304" style="background:#fff"><rect x="12" y="12" width="324" height="244" rx="8" fill="#f5f9fe" fill-opacity="0.38" stroke="#3f6fb0" stroke-width="2"></rect><foreignObject x="117" y="17" width="114" 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">垂直長鏈容器</div></foreignObject><path d="M 69 100 L 69 130" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 69 130 L 73 121 L 65 121 Z" fill="#44505a"></path><path d="M 69 166 L 69 196" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 69 196 L 73 187 L 65 187 Z" fill="#44505a"></path><path d="M 69 232 L 69 250 L 121 250 L 121 46 L 174 46 L 174 64" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 174 64 L 178 55 L 170 55 Z" fill="#44505a"></path><path d="M 174 100 L 174 130" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 174 130 L 178 121 L 170 121 Z" fill="#44505a"></path><path d="M 174 166 L 174 196" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 174 196 L 178 187 L 170 187 Z" fill="#44505a"></path><path d="M 174 232 L 174 250 L 226 250 L 226 46 L 279 46 L 279 64" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 279 64 L 283 55 L 275 55 Z" fill="#44505a"></path><rect x="37" y="64" width="64" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="37" y="64" width="64" 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">步驟 1</div></foreignObject><rect x="37" y="130" width="64" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="37" y="130" width="64" 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">步驟 2</div></foreignObject><rect x="37" y="196" width="64" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="37" y="196" width="64" 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">步驟 3</div></foreignObject><rect x="142" y="64" width="64" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="142" y="64" width="64" 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">步驟 4</div></foreignObject><rect x="142" y="130" width="64" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="142" y="130" width="64" 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">步驟 5</div></foreignObject><rect x="142" y="196" width="64" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="142" y="196" width="64" 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">步驟 6</div></foreignObject><rect x="247" y="64" width="64" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="247" y="64" width="64" 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">步驟 7</div></foreignObject></svg>

package/test/pics/fold-wide.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="360" height="306" viewBox="-18 -18 360 306" style="background:#fff"><rect x="12" y="12" width="300" height="246" rx="8" fill="#fdf6ec" fill-opacity="0.38" stroke="#c46e1a" stroke-width="2"></rect><foreignObject x="105" y="17" width="114" 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">水平長鏈容器</div></foreignObject><path d="M 100 72 L 130 72" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 130 72 L 121 68 L 121 76 Z" fill="#44505a"></path><path d="M 194 72 L 224 72" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 224 72 L 215 68 L 215 76 Z" fill="#44505a"></path><path d="M 288 72 L 306 72 L 306 110 L 18 110 L 18 149 L 36 149" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 36 149 L 27 145 L 27 153 Z" fill="#44505a"></path><path d="M 100 149 L 130 149" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 130 149 L 121 145 L 121 153 Z" fill="#44505a"></path><path d="M 194 149 L 224 149" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 224 149 L 215 145 L 215 153 Z" fill="#44505a"></path><path d="M 288 149 L 306 149 L 306 187 L 18 187 L 18 226 L 36 226" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 36 226 L 27 222 L 27 230 Z" fill="#44505a"></path><rect x="36" y="54" width="64" height="36" rx="7" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.6"></rect><foreignObject x="36" y="54" width="64" 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">階段 1</div></foreignObject><rect x="130" y="54" width="64" height="36" rx="7" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.6"></rect><foreignObject x="130" y="54" width="64" 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">階段 2</div></foreignObject><rect x="224" y="54" width="64" height="36" rx="7" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.6"></rect><foreignObject x="224" y="54" width="64" 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">階段 3</div></foreignObject><rect x="36" y="131" width="64" height="36" rx="7" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.6"></rect><foreignObject x="36" y="131" width="64" 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">階段 4</div></foreignObject><rect x="130" y="131" width="64" height="36" rx="7" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.6"></rect><foreignObject x="130" y="131" width="64" 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">階段 5</div></foreignObject><rect x="224" y="131" width="64" height="36" rx="7" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.6"></rect><foreignObject x="224" y="131" width="64" 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">階段 6</div></foreignObject><rect x="36" y="208" width="64" height="36" rx="7" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.6"></rect><foreignObject x="36" y="208" width="64" 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">階段 7</div></foreignObject></svg>

package/test/pics/group-edge.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="223" height="366" viewBox="-18 -18 223 366" style="background:#fff"><rect x="79.5" y="12" width="85" height="92" rx="8" fill="#f5f9fe" fill-opacity="0.38" stroke="#3f6fb0" stroke-width="2"></rect><foreignObject x="80" y="17" width="84" 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">來源群組</div></foreignObject><rect x="24" y="226" width="84" height="92" rx="8" fill="#fdf6ec" fill-opacity="0.38" stroke="#c46e1a" stroke-width="2"></rect><foreignObject x="24" y="231" width="84" 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">目標群組</div></foreignObject><path d="M 122 104 L 122 200 L 80 200 L 80 226" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 80 226 L 84 217 L 76 217 Z" fill="#44505a"></path><foreignObject x="125" y="147" width="56" 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 52 174 L 52 226" fill="none" stroke="#44505a" stroke-width="2" stroke-dasharray="6 4"></path><path d="M 52 226 L 56 217 L 48 217 Z" fill="#44505a"></path><rect x="106.5" y="54" width="31" height="36" rx="7" fill="#eef4fb" stroke="#3f6fb0" stroke-width="1.6"></rect><foreignObject x="106.5" y="54" width="31" 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">x</div></foreignObject><rect x="50" y="268" width="32" height="36" rx="7" fill="#fcf0e2" stroke="#c46e1a" stroke-width="1.6"></rect><foreignObject x="50" y="268" width="32" 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">y</div></foreignObject><rect x="12" y="138" width="80" height="36" rx="7" fill="#eaf4ef" stroke="#348a5c" stroke-width="1.6"></rect><foreignObject x="12" 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></foreignObject></svg>

package/test/pics/items-node.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="152" height="352" viewBox="-18 -18 152 352" style="background:#fff"><path d="M 58 155 L 58 241" fill="none" stroke="#44505a" stroke-width="2"></path><path d="M 58 241 L 62 232 L 54 232 Z" fill="#44505a"></path><foreignObject x="31" y="189" 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="18.5" y="12" width="79" height="143" rx="7" fill="#fcf0e2"></rect><path d="M 25.5 12 H 90.5 A 7 7 0 0 1 97.5 19 V 44 H 18.5 V 19 A 7 7 0 0 1 25.5 12 Z" fill="#f3dbc2"></path><rect x="18.5" y="12" width="79" height="143" rx="7" fill="none" stroke="#c46e1a" stroke-width="1.6"></rect><line x1="18.5" y1="44" x2="97.5" y2="44" stroke="#c46e1a" stroke-width="1"></line><foreignObject x="18.5" y="12" width="79" height="32"><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-weight:bold;font-size:14px;color:#1c2b36">服務 X</div></foreignObject><foreignObject x="18.5" y="44" width="79" height="111"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="font-size:13px;line-height:1.55;padding:6px 9px 4px;text-align:left;color:#1c2b36"><div style="white-space:nowrap">•&nbsp;項目一</div><div style="white-space:nowrap">•&nbsp;項目二</div><div style="white-space:nowrap">•&nbsp;項目三</div><div style="white-space:nowrap">•&nbsp;項目四</div><div style="white-space:nowrap">•&nbsp;項目五</div></div></foreignObject><rect x="12" y="241" width="92" height="63" rx="7" fill="#fcf0e2"></rect><path d="M 19 241 H 97 A 7 7 0 0 1 104 248 V 273 H 12 V 248 A 7 7 0 0 1 19 241 Z" fill="#f3dbc2"></path><rect x="12" y="241" width="92" height="63" rx="7" fill="none" stroke="#c46e1a" stroke-width="1.6"></rect><line x1="12" y1="273" x2="104" y2="273" stroke="#c46e1a" stroke-width="1"></line><foreignObject x="12" y="241" width="92" height="32"><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-weight:bold;font-size:14px;color:#1c2b36">服務 Y</div></foreignObject><foreignObject x="12" y="273" width="92" height="31"><div xmlns="http://www.w3.org/1999/xhtml" class="lbl" style="font-size:13px;line-height:1.55;padding:6px 9px 4px;text-align:left;color:#1c2b36"><div style="white-space:nowrap">•&nbsp;只有一項</div></div></foreignObject></svg>