w-flowchart 1.0.0

package/docs/styles/prettify.css

@@ -0,0 +1,80 @@
+.pln {
+  color: #ddd;
+}
+
+/* string content */
+.str {
+  color: #61ce3c;
+}
+
+/* a keyword */
+.kwd {
+  color: #fbde2d;
+}
+
+/* a comment */
+.com {
+  color: #aeaeae;
+}
+
+/* a type name */
+.typ {
+  color: #8da6ce;
+}
+
+/* a literal value */
+.lit {
+  color: #fbde2d;
+}
+
+/* punctuation */
+.pun {
+  color: #ddd;
+}
+
+/* lisp open bracket */
+.opn {
+  color: #000000;
+}
+
+/* lisp close bracket */
+.clo {
+  color: #000000;
+}
+
+/* a markup tag name */
+.tag {
+  color: #8da6ce;
+}
+
+/* a markup attribute name */
+.atn {
+  color: #fbde2d;
+}
+
+/* a markup attribute value */
+.atv {
+  color: #ddd;
+}
+
+/* a declaration */
+.dec {
+  color: #EF5050;
+}
+
+/* a variable name */
+.var {
+  color: #c82829;
+}
+
+/* a function name */
+.fun {
+  color: #4271ae;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-bottom: 2px;
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "w-flowchart",
+  "version": "1.0.0",
+  "main": "dist/w-flowchart.umd.js",
+  "dependencies": {
+    "@antv/g6": "^5.1.1",
+    "@dagrejs/dagre": "^1.1.8",
+    "@joint/core": "^4.3.0",
+    "@logicflow/core": "^2.2.4",
+    "@mermaid-js/layout-elk": "^0.2.2",
+    "@terrastruct/d2": "0.1.33",
+    "@xyflow/react": "^12.11.2",
+    "cytoscape": "^3.34.0",
+    "cytoscape-dagre": "^4.0.0",
+    "dagre": "^0.8.5",
+    "elkjs": "^0.11.1",
+    "graphre": "^0.1.3",
+    "lodash-es": "^4.18.1",
+    "mermaid10": "npm:mermaid@^10.9.6",
+    "mermaid11": "npm:mermaid@^11.16.0",
+    "nomnoml": "^1.7.0",
+    "playwright": "^1.61.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sharp": "0.35.3",
+    "wsemi": "^1.8.64"
+  },
+  "devDependencies": {
+    "pixelmatch": "^7.2.0",
+    "pngjs": "^7.0.0",
+    "w-package-tools": "^1.1.10"
+  },
+  "scripts": {
+    "test": "mocha --parallel --timeout 60000",
+    "deploy": "gh-pages -d docs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yuda-lyu/w-flowchart.git"
+  },
+  "keywords": [
+    "package",
+    "tool",
+    "flowchart",
+    "nodejs"
+  ],
+  "author": "yuda-lyu(semisphere)",
+  "license": "MIT"
+}

package/script.txt

@@ -0,0 +1,17 @@
+#node toolg/addVersion.mjs
+node toolg/modifyReadme.mjs
+
+node toolg/cleanFolder.mjs
+./node_modules/.bin/jsdoc -c .jsdoc
+
+node toolg/gDistRollup.mjs
+
+git add .  -A
+git commit -m 'modify: '
+git push origin master:master
+
+npm run deploy
+
+#npm test
+
+#npm publish

package/src/common/derive.mjs

@@ -0,0 +1,7 @@
+// rich 節點(title+items)→ 自動衍生 label「標題(item1/item2)」給 p1~p9 當回退(p10 用 title+items 分層渲染)。純 label 節點不受影響。
+//   括號/分隔符用半形, 英文數據亦通用。
+export function deriveLabels(d) {
+    d.nodes.forEach(n => {
+        if (n.title && n.label == null) n.label = n.title + (n.items && n.items.length ? ' (' + n.items.join('/') + ')' : '')
+    }); return d
+}

package/src/common/palette.mjs

@@ -0,0 +1,34 @@
+// 標準語意色票:類別(cls)→ 顏色/形狀。所有產線(pN)共用同一套色, 確保 10 套出圖視覺一致。
+//   一般節點為 box; diamond 為決策菱形; cls 結尾為 G / G2 者為「群組容器」(較淺填色, 標題置頂)。
+export const PALETTE = {
+    // 一般節點
+    blue: { fill: '#eef4fb', stroke: '#3f6fb0', text: '#1c2b36', shape: 'box' },
+    green: { fill: '#eaf4ef', stroke: '#348a5c', text: '#1c2b36', shape: 'box' },
+    orange: { fill: '#fcf0e2', stroke: '#c46e1a', text: '#1c2b36', shape: 'box' },
+    purple: { fill: '#f4f0fa', stroke: '#8163ad', text: '#23303a', shape: 'box' },
+    red: { fill: '#fbecea', stroke: '#c0392b', text: '#23303a', shape: 'box' },
+    done: { fill: '#eaf4ef', stroke: '#256046', text: '#256046', shape: 'box' },
+    // 決策(菱形)
+    diamond: { fill: '#fcf0e2', stroke: '#c46e1a', text: '#23303a', shape: 'diamond' },
+    // 群組容器(較淺填色, group:true)
+    blueG: { fill: '#f5f9fe', stroke: '#3f6fb0', text: '#3f6fb0', group: true },
+    blueG2: { fill: '#eef4fb', stroke: '#3f6fb0', text: '#3f6fb0', group: true },
+    greenG: { fill: '#f0f7f3', stroke: '#348a5c', text: '#348a5c', group: true },
+    greenG2: { fill: '#eaf4ef', stroke: '#348a5c', text: '#348a5c', group: true },
+    orangeG: { fill: '#fdf6ec', stroke: '#c46e1a', text: '#c46e1a', group: true },
+    purpleG: { fill: '#faf7fd', stroke: '#8163ad', text: '#8163ad', group: true },
+}
+
+// 邊樣式
+//   textBg 一律「透明」(不可用不透明白底遮線, 否則轉折線會看似中斷);
+//   文字清晰度改以「白色光暈/描邊」達成(halo): 各產線以該庫機制實作
+//   (SVG paint-order:stroke + stroke:white / canvas strokeText / CSS text-shadow), 全域一致。
+export const EDGE = { line: '#44505a', text: '#4a5560', textBg: 'transparent', haloColor: '#ffffff', haloWidth: 3.5 }
+
+// 字型(中文)
+export const FONT = '\'Microsoft JhengHei\', sans-serif'
+
+// 工具:判斷 cls 是否為群組容器
+export const isGroupCls = cls => /G2?$/.test(cls || '')
+// 工具:取某 cls 之色票(查無則回 blue)
+export const colorOf = cls => PALETTE[cls] || PALETTE.blue

package/src/common/pkg.mjs

@@ -0,0 +1,31 @@
+// 本機套件檔案定位與讀取: 供各產線把繪圖庫由 CDN 改為 node_modules 內聯注入(斷網環境可用)。
+//   以 fs 實體路徑向上逐層找 node_modules/<rel>, 不走 require.resolve(不受套件 exports 白名單限制),
+//   亦相容本套件被安裝後 node_modules 被 hoist 至上層的情況。
+import fs from 'fs'
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+
+const __dir = dirname(fileURLToPath(import.meta.url))
+
+// rel 例: 'mermaid10/dist/mermaid.min.js' → 回傳實體絕對路徑
+export function pkgFile(rel) {
+    let dir = __dir
+    for (let i = 0; i < 10; i++) {
+        const fp = join(dir, 'node_modules', rel)
+        if (fs.existsSync(fp)) return fp
+        const up = dirname(dir)
+        if (up === dir) break
+        dir = up
+    }
+    throw new Error('找不到本機套件檔案 node_modules/' + rel)
+}
+
+// 讀取套件 JS 內容供 <script> 內聯(轉義 </script> 避免提早關閉標籤)
+export function pkgScript(rel) {
+    return fs.readFileSync(pkgFile(rel), 'utf8').replace(/<\/script/gi, '<\\/script')
+}
+
+// 讀取套件文字內容(CSS 等)
+export function pkgText(rel) {
+    return fs.readFileSync(pkgFile(rel), 'utf8')
+}

package/src/p1/README.md

@@ -0,0 +1,65 @@
+# p1 — mermaid@10 dagre 產線
+
+## 技術核心
+
+- **繪圖庫**: mermaid 第 10 版系列（package.json 以 npm alias `mermaid10` 安裝，與 p2 之第 11 版系列並存），透過 `common/pkg.mjs` 的 `pkgScript('mermaid10/dist/mermaid.min.js')` 讀取本機 `node_modules` 內容並內聯注入 `<script>` 標籤，於 Playwright 開啟的 Chromium 頁面內執行；不經 CDN，斷網環境亦可運作。
+- **渲染方式**: `genFig()` 為每張圖建立獨立的 Playwright `page`（`browser.newPage()`），避免 mermaid 內部 render id 衝突。將 `mermaidHtml()` 產生的 HTML 字串以 `page.setContent()` 注入，等待 `document.title === 'DONE'` 確認渲染完成（或 `FAIL` 時拋出錯誤），再以 `page.waitForFunction` 超時 30 秒防呆。
+- **截圖目標**: `page.locator('#box svg').screenshot()`，只截 SVG 元素本身，不含外層 `div#box` 的 padding 背景。
+- **解析度**: `deviceScaleFactor: 4`，Chromium 以 4 倍畫素密度渲染 SVG 向量圖，輸出 PNG 清晰度極高，適合印刷品質報告。
+- **字型**: HTML `<body>` 及 mermaid `themeVariables.fontFamily` 均指定 `'微軟正黑體','Microsoft JhengHei',sans-serif`；截圖前以 `page.evaluate(() => document.fonts.ready)` 確保字型載入完成。
+
+## 產製原理（資料驅動）
+
+`translate(data)` 將標準數據的 `{ dir, nodes, edges }` 轉為 mermaid flowchart DSL 字串，流程如下：
+
+### 節點形狀與色票
+
+- `cls === 'diamond'` → `id{"label"}`（菱形決策節點）
+- 其他所有 cls → `id["label"]`（矩形方框）
+- 色票由 `PALETTE[cls] || PALETTE.blue` 取得，每個出現過的 cls 各產生一行 `classDef`：
+  - 群組容器（`isGroupCls` 判斷，即 cls 結尾為 `G` 或 `G2`）：`stroke-width:1.8px`
+  - diamond：`stroke-width:1.6px`
+  - 其他一般節點：`stroke-width:1.5px`
+- 最終以 `class id1,id2,... cls` 批次指派，每個 cls 一行。
+
+### 群組容器（subgraph）與巢狀
+
+- `isGroupCls(nd.cls)` 為 `true` 的節點視為群組容器，輸出為 `subgraph id["label"]`。
+- 拓樸分析：
+  - **頂層容器**：自身 `group` 欄位為空（無父容器）的容器。
+  - **巢狀容器**：自身有 `group` 欄位（屬於某父容器）的容器，遞迴嵌入父容器 subgraph 內。
+  - **獨立節點**：`!isGroupCls` 且無 `group` 欄位，直接輸出在 flowchart 頂層。
+- `renderSubgraph(gid, indent)` 遞迴處理，支援二層巢狀（例如 DET 群組在 CORE 群組內）。
+
+### 邊與虛線
+
+- `ed.kind === 'dashed'` → `-..->`（虛線箭頭）
+- 其他 → `-->`（實線箭頭）
+- 有 `ed.label` 時插入 `|"label"|` 語法。
+- 跨容器邊（from/to 分屬不同 subgraph）直接以一般 edge 語法處理，mermaid dagre 自行解決跨容器連線路由。
+
+### 流向（dir）
+
+- `data.dir` 直接對應 mermaid `flowchart <dir>`，例如 `TB`（上到下）或 `LR`（左到右），無任何轉換。
+
+### 對外介面
+
+- 產線唯一輸出入口為 `genPng(data, opt)`，`data` 為正規化繪圖數據 `{ dir, nodes, edges }`，回傳 `Promise<Buffer>`（PNG）；`genPng` 自帶瀏覽器生命週期（`chromium.launch()` → 渲染 → `browser.close()`），呼叫端不需自行管理 Playwright。
+- 統一由 `src/WFlowchart.mjs` 依 `mode === 'p1'` 呼叫，不提供批次流程或落地寫檔行為，是否寫檔、寫至何處由呼叫端決定。
+
+## 自動化機制
+
+p1 的版面自動化完全委由 **mermaid dagre** 引擎處理，產線本身不計算任何節點座標、間距或畫布尺寸：
+
+- **零逐圖魔術數字**：`translate()` 不依圖的節點數或標籤長度調整任何數值；所有佈局由 dagre 演算法依拓樸自動推算。
+- **邊線樣式強制覆蓋**：mermaid `themeCSS` 設定 `.flowchart-link`、`.edgePaths .path` 的 stroke 為 `#44505a`、stroke-width `2.5px`、箭頭 fill/stroke `#44505a`，確保 theme:base 預設邊線色不干擾統一視覺。渲染完成後再以 `page.evaluate()` 對 DOM 補強一次 `!important` inline style（雙層覆蓋，防 mermaid 版本差異導致 themeCSS 失效）。
+- **cluster（subgraph）框線**：DOM 後處理統一設 `.cluster rect` 等元素 stroke `#777777`、stroke-width `1.5px`。
+- **獨立 page 防衝突**：每張圖開新 `page`，`mermaid.render('g', ...)` 的固定 id `g` 不會因先前渲染殘留而出錯。
+
+## 已知限制 / 回退
+
+- **線性鏈被拉長**：dagre 對長鏈節點（如單一主幹多節點）會垂直拉伸畫布，輸出圖比例偏高。
+- **跨容器邊路由不可控**：mermaid 對跨 subgraph 的邊路由由 dagre 自動決定，邊可能繞行或重疊，無法手動指定路徑。
+- **同標籤平行邊重疊**：若兩條邊 from/to 相同但 label 不同，mermaid 可能渲染為重疊線段，視覺難以區分。
+- **subgraph 標題色不受 classDef 控制**：subgraph 標題文字顏色由 mermaid 主題決定，`classDef` 的 `color` 屬性僅影響節點內文字，容器標題需透過 `themeVariables` 或 CSS 覆蓋，現行產線未特別處理。
+- **無自動裁切/縮放**：截圖對象為 `#box svg`，SVG 本身大小由 dagre 決定，若圖形極大則 PNG 尺寸亦大，無自動縮放至固定畫布。

package/src/p1/gen.mjs

@@ -0,0 +1,203 @@
+// p1 — mermaid@10 dagre 產線 adapter(資料驅動)
+//   genPng(data): 正規化繪圖數據 → translate → mermaid flowchart DSL → Playwright 渲染 → 回傳 PNG Buffer
+//   自動排版: mermaid dagre 自行排版, 無任何逐圖魔術數字。
+import { chromium } from 'playwright'
+import { PALETTE, isGroupCls } from '../common/palette.mjs'
+import { pkgScript } from '../common/pkg.mjs'
+
+// mermaid@10 由本機 node_modules 內聯注入(取代 CDN, 斷網環境可用)
+const MERMAID_JS = pkgScript('mermaid10/dist/mermaid.min.js')
+
+// 把標準節點 label 轉成 mermaid 節點形狀語法
+//   diamond → {label}  / 其餘 → ["label"]
+function nodeShape(nd) {
+    if (nd.cls === 'diamond') return `${nd.id}{"${nd.label}"}`
+    return `${nd.id}["${nd.label}"]`
+}
+
+// 正規化數據 → mermaid flowchart DSL 字串
+// 流程:
+//   1. 收集所有出現的 cls → 產生 classDef 區塊(依 palette 取色)
+//   2. 分析群組包含關係(支援二層巢狀, 如 DET 在 CORE 內)
+//   3. 輸出 flowchart <dir>
+//      a. 先宣告無 group 的非容器節點
+//      b. 頂層 subgraph → 直接子節點 → 巢狀 subgraph → 巢狀子節點 → end → end
+//      c. edges(dashed 用 -.->, 有 label 用 |".."|)
+//      d. classDef + class 指派
+function translate(data) {
+    const { dir, nodes, edges } = data
+
+    // 索引: id → node
+    const byId = {}
+    for (const nd of nodes) byId[nd.id] = nd
+
+    // 群組容器 id set
+    const groupIds = new Set(nodes.filter(nd => isGroupCls(nd.cls)).map(nd => nd.id))
+
+    // 收集所有出現的 cls
+    const clsSet = new Set(nodes.map(nd => nd.cls))
+
+    // classDef 行: 每個 cls 對應 palette 色票
+    const classDefLines = []
+    for (const cls of clsSet) {
+        const p = PALETTE[cls] || PALETTE.blue
+        if (isGroupCls(cls)) {
+            // 容器: text-valign top, bold 不在 classDef 裡控制; 只設填色/框色/字色
+            classDefLines.push(`  classDef ${cls} fill:${p.fill},stroke:${p.stroke},stroke-width:1.8px,color:${p.text}`)
+        } else if (cls === 'diamond') {
+            classDefLines.push(`  classDef ${cls} fill:${p.fill},stroke:${p.stroke},stroke-width:1.6px,color:${p.text}`)
+        } else {
+            classDefLines.push(`  classDef ${cls} fill:${p.fill},stroke:${p.stroke},stroke-width:1.5px,color:${p.text}`)
+        }
+    }
+
+    // class 指派行: 每個 cls 一行, 收集該 cls 的所有節點 id
+    const clsToIds = {}
+    for (const nd of nodes) {
+        if (!clsToIds[nd.cls]) clsToIds[nd.cls] = []
+        clsToIds[nd.cls].push(nd.id)
+    }
+    const classLines = []
+    for (const [cls, ids] of Object.entries(clsToIds)) {
+        classLines.push(`  class ${ids.join(',')} ${cls}`)
+    }
+
+    // 拓樸: 哪些節點直接屬於哪個容器(含巢狀)
+    // topLevel 容器: 自身無 group 的容器
+    // nested 容器: 自身有 group 的容器(巢狀放在父容器 subgraph 內)
+    const topGroupIds = nodes.filter(nd => isGroupCls(nd.cls) && !nd.group).map(nd => nd.id)
+    // 獨立節點(非容器、無 group): 直接輸出在 flowchart 頂層
+    const standaloneNodes = nodes.filter(nd => !isGroupCls(nd.cls) && !nd.group)
+
+    // 建立 subgraph 內容產生器(支援巢狀)
+    function renderSubgraph(gid, indent) {
+        const g = byId[gid]
+        const lines = []
+        lines.push(`${indent}subgraph ${gid}["${g.label}"]`)
+        // 直接子節點(非容器)
+        const directChildren = nodes.filter(nd => nd.group === gid && !isGroupCls(nd.cls))
+        for (const nd of directChildren) {
+            lines.push(`${indent}  ${nodeShape(nd)}`)
+        }
+        // 巢狀容器(容器的 group === gid)
+        const nestedGroups = nodes.filter(nd => isGroupCls(nd.cls) && nd.group === gid)
+        for (const ng of nestedGroups) {
+            lines.push(...renderSubgraph(ng.id, indent + '  '))
+        }
+        lines.push(`${indent}end`)
+        return lines
+    }
+
+    // edges DSL
+    const edgeLines = []
+    for (const ed of edges) {
+        const arrow = ed.kind === 'dashed' ? '-..->' : '-->'
+        const lbl = ed.label ? `|"${ed.label}"| ` : ''
+        edgeLines.push(`  ${ed.from} ${arrow} ${lbl}${ed.to}`)
+    }
+
+    // 組裝 DSL
+    const lines = [`flowchart ${dir}`]
+    // 1. 獨立節點
+    for (const nd of standaloneNodes) {
+        lines.push(`  ${nodeShape(nd)}`)
+    }
+    // 2. 頂層 subgraph
+    for (const gid of topGroupIds) {
+        lines.push(...renderSubgraph(gid, '  '))
+    }
+    // 3. edges
+    lines.push(...edgeLines)
+    // 4. classDef + class
+    lines.push(...classDefLines)
+    lines.push(...classLines)
+
+    return lines.join('\n')
+}
+
+// mermaid@10 CDN HTML 外殼: 渲染 DSL → SVG 注入 #box, 截 #box svg
+// 沿用舊版完整邏輯(themeCSS 覆蓋邊線色/寬/箭頭, 截圖前確保字型載入)
+// 修正 A: 邊標籤白底→透明; 文字加白色光暈(paint-order:stroke + stroke:#fff/stroke-width:3.5px)
+// 修正 B: 英數識別字不攔腰斷(word-break:normal; overflow-wrap:break-word)
+function mermaidHtml(code) {
+    return `<!doctype html><html lang="zh-Hant"><head><meta charset="utf-8">
+<script>${MERMAID_JS}</script>
+</head><body style="margin:0;background:#fff;font-family:'微軟正黑體','Microsoft JhengHei',sans-serif">
+<div id="box" style="display:inline-block;padding:24px"></div>
+<script>
+mermaid.initialize({ startOnLoad:false, theme:'base', themeVariables:{ fontFamily:"'Microsoft JhengHei','微軟正黑體',sans-serif", fontSize:'17px', primaryColor:'#eef4fb', primaryBorderColor:'#3f6fb0', lineColor:'#44505a', primaryTextColor:'#1c2b36' }, themeCSS: '.flowchart-link{stroke:#44505a !important;stroke-width:2.5px !important;} .edgePaths .path{stroke:#44505a !important;stroke-width:2.5px !important;} .marker,.marker path{fill:#44505a !important;stroke:#44505a !important;} .edgeLabel .label{background:transparent !important;} .edgeLabel{background:transparent !important;} .edgeLabel rect{fill:transparent !important;opacity:0 !important;} .label foreignObject{overflow:visible;} .cluster-label text,.cluster-label span,.cluster-label div,.edgeLabel span{font-family:"Microsoft JhengHei","微軟正黑體",sans-serif !important;}' });
+(async () => {
+    try {
+        const { svg } = await mermaid.render('g', ${JSON.stringify(code)})
+        document.getElementById('box').innerHTML = svg
+        const DK = '#333333', W = '3px'
+        document.querySelectorAll('#box .edgePaths path, #box .edgePath path, #box path.flowchart-link, #box g.edgePaths path').forEach((p) => { p.style.setProperty('stroke', DK, 'important'); p.style.setProperty('stroke-width', W, 'important') })
+        document.querySelectorAll('#box marker path, #box .marker, #box .marker path').forEach((m) => { m.style.setProperty('fill', DK, 'important'); m.style.setProperty('stroke', DK, 'important') })
+        document.querySelectorAll('#box .node rect, #box .node polygon, #box .node circle, #box .node path').forEach((n) => { n.style.setProperty('stroke-width', '2px', 'important') })
+        document.querySelectorAll('#box .cluster rect, #box .cluster polygon, #box .cluster path').forEach((c) => { c.style.setProperty('stroke', '#777777', 'important'); c.style.setProperty('stroke-width', '1.5px', 'important') })
+        // 修正 A: 邊標籤背景透明 + 白色光暈(透過 foreignObject 內 span 的 CSS)
+        document.querySelectorAll('#box .edgeLabel rect, #box .edgeLabel .label').forEach((el) => {
+            el.style.setProperty('fill', 'transparent', 'important')
+            el.style.setProperty('background', 'transparent', 'important')
+            el.style.setProperty('opacity', '1', 'important')
+        })
+        document.querySelectorAll('#box .edgeLabel foreignObject').forEach((fo) => {
+            fo.style.setProperty('overflow', 'visible', 'important')
+        })
+        document.querySelectorAll('#box .edgeLabel span, #box .edgeLabel .edgeLabel').forEach((sp) => {
+            sp.style.setProperty('background', 'transparent', 'important')
+            sp.style.setProperty('color', '#4a5560', 'important')
+            // 字型覆蓋: 邊標籤 span 可能繼承系統字型, 強制指定
+            sp.style.setProperty('font-family', "'Microsoft JhengHei', '微軟正黑體', sans-serif", 'important')
+            // 白色光暈: CSS text-shadow 多向
+            sp.style.setProperty('text-shadow', '-1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff, 0 -2px 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 2px 0 0 #fff', 'important')
+            // 修正 B: 英數識別字不攔腰斷
+            sp.style.setProperty('word-break', 'normal', 'important')
+            sp.style.setProperty('overflow-wrap', 'break-word', 'important')
+        })
+        // 字型覆蓋: cluster(subgraph)標題文字 — mermaid@10 的 .cluster-label text/span 不繼承 fontFamily themeVariable
+        document.querySelectorAll('#box .cluster-label text, #box .cluster-label span, #box .cluster-label div').forEach((el) => {
+            el.style.setProperty('font-family', "'Microsoft JhengHei', '微軟正黑體', sans-serif", 'important')
+        })
+        document.title = 'DONE'
+    }
+    catch (e) {
+        document.title = 'FAIL'
+        console.log('mmErr', e.message)
+    }
+})()
+</script></body></html>`
+}
+
+// 單張渲染: 每張用新 page(避免 mermaid render id 衝突), deviceScaleFactor:4(向量圖放大提高清晰度)
+//   fpOut 省略時不寫檔; 皆回傳 PNG Buffer
+async function genFig(browser, code, fpOut) {
+    const page = await browser.newPage({ deviceScaleFactor: 4 })
+    try {
+        await page.setContent(mermaidHtml(code), { waitUntil: 'load' })
+        await page.waitForFunction(() => document.title === 'DONE' || document.title === 'FAIL', { timeout: 30000 })
+        const title = await page.title()
+        if (title !== 'DONE') {
+            const msg = await page.evaluate(() => { const el = document.getElementById('box'); return el ? el.innerText : '' })
+            throw new Error(`mermaid render failed for ${fpOut || '(buffer)'}: ${msg}`)
+        }
+        await page.evaluate(() => document.fonts.ready)
+        return await page.locator('#box svg').screenshot(fpOut ? { path: fpOut } : {})
+    }
+    finally {
+        await page.close()
+    }
+}
+
+// 單張渲染 → PNG Buffer(供 WFlowchart 統一入口呼叫; 自帶瀏覽器生命週期)
+async function genPng(data, opt = {}) {
+    const browser = await chromium.launch()
+    try {
+        return await genFig(browser, translate(data), null)
+    }
+    finally {
+        await browser.close()
+    }
+}
+
+export { genPng }

package/src/p10/README.md

@@ -0,0 +1,31 @@
+# p10 — ELK 直用 + 自寫 SVG 渲染器 產線
+
+p1~p9 為現成繪圖套件;**p10 是唯一「自寫 SVG 渲染器」產線**:用 elkjs 只負責「算佈局」,座標拿到後由本產線**自行繪製 SVG**,版面與樣式完全可控。
+
+## 技術核心
+
+- **佈局引擎**:`elkjs`(Eclipse Layout Kernel 的 JS 版,`elk.bundled.js` UMD 主執行緒、免 worker),由本機 `node_modules` 讀出後於 `gen.mjs` 模組載入時以 `common/pkg.mjs` 的 `pkgScript` 內聯注入 `PAGE_HTML`(取代 CDN,斷網環境可用),於 Playwright headless 頁內執行。`new ELK().layout(graph)` 回傳各節點/容器之座標尺寸與各邊之 sections(轉折點)。
+- **渲染**:本產線**自行把 ELK 結果組成 SVG 字串**(rect / polygon 菱形 / path 折線 + 箭頭 / foreignObject 文字),插入頁面後對 `#stage svg` 截圖。`deviceScaleFactor:2`。中文以 `foreignObject` 內 div 渲染(瀏覽器原生量字、不爆框)。
+- **呼叫入口**:`export async function genPng(data, opt = {})` 為唯一對外介面,回傳 `Promise<Buffer>`(PNG);由 `src/WFlowchart.mjs` 之 `GENS.p10` 統一調用(`mode: 'p10'`)。`data` 為正規化繪圖數據 `{ dir, nodes, edges }`;`opt` 保留擴充,目前原樣接收但未使用。`gen.mjs` 另外 `export function translate` 與 `export const PAGE_HTML`,供 `test/`(19 案結構不變量 + 快照回歸測試)重用真實管線(不複製渲染器)。
+
+## 產製原理(資料驅動)
+
+`translate(data)` 把標準數據轉成 ELK 圖 + 渲染:
+- **節點**:量測標籤(`#meas` 隱形 div)得寬高 → ELK node width/height;`diamond` 類別畫 polygon 菱形(尺寸放大以內含標籤),其餘畫圓角 rect;色彩依 `colorOf(cls)`。
+- **群組/巢狀容器**:群組為 ELK 的 child node、其成員為該 node 的 `children`(支援多層巢狀);`elk.padding` 上方留標題空間;`hierarchyHandling:INCLUDE_CHILDREN` 確保**跨容器邊不會把成員拉出容器**。渲染時容器 rect 墊底(深度小先畫)+ 標題置頂粗體。
+- **邊**:依 source/target 之最近共同祖先容器(LCA)宣告(無共同容器則掛於 root)——ELK 對「宣告於某容器的邊」回傳之 section 座標相對該容器,故渲染時需對位;ELK 以 `edgeRouting:ORTHOGONAL` 算**正交直角路由**,輸出 sections 轉折點 → 本產線繪 polyline + 自繪三角箭頭。座標依邊所在容器之絕對位移還原。
+- **流向**:`dir` → ELK `elk.direction`(TB→DOWN、LR→RIGHT)。
+
+## 自動化機制
+
+- **巢狀容器零逃逸**:ELK `INCLUDE_CHILDREN` 是本產線相對 maxGraph/vis 的關鍵優勢——群組成員一律待在容器內,容器自動依成員撐大(含多層巢狀)。
+- **正交直角邊路由**:現成 10 套皆無;由 ELK 演算、本產線自繪。
+- **字型全覆蓋**:所有 SVG 文字(節點/容器標題/邊標籤)走 `foreignObject` + `font-family:Microsoft JhengHei`,無遺漏、不爆框。
+- **邊標籤白光暈**:邊標籤 div 以多向 `text-shadow` 白光暈(`EDGE.haloColor/haloWidth`),透明底、不遮線。
+- **菱形標籤置中**:菱形以 polygon 畫、標籤 foreignObject 置中於外接框,天然置中(優於 vis 需 vadjust 硬調)。
+- 版面間距為通用常數(`elk.spacing.*`),尺寸由內容自然決定,無逐圖魔術數字。
+
+## 已知限制
+
+- **循環(回邊)起點**:ELK 的斷環點不一定讓「流程起點」落在最上(如作業流程的「退回」迴圈),屬版面取捨、非錯誤(可調 ELK cycle-breaking 選項)。
+- **線性長鏈**:純線性流程(如批次)會被拉得較高(與 dagre 系一致)。