npm - w-flowchart - Versions diffs - 1.0.0 → 1.0.2 - Mend

w-flowchart 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (435) hide show

package/docs/global.html ADDED Viewed

@@ -0,0 +1,657 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Global - Documentation</title>
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
+    <script src="scripts/nav.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+<input type="checkbox" id="nav-trigger" class="nav-trigger" />
+<label for="nav-trigger" class="navicon-button x">
+  <div class="navicon"></div>
+</label>
+<label for="nav-trigger" class="overlay"></label>
+<nav >
+    <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#WFlowchart">WFlowchart</a></li></ul>
+</nav>
+<div id="main">
+    <h1 class="page-title">Global</h1>
+<section>
+<header>
+        <h2>
+        </h2>
+</header>
+<article>
+        <div class="container-overview">
+<dl class="details">
+</dl>
+        </div>
+        <h3 class="subsection-title">Methods</h3>
+    <h4 class="name" id="WFlowchart"><span class="type-signature type-signature-async">(async) </span>WFlowchart<span class="signature">(inp, opt<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Promise}</span></h4>
+<dl class="details">
+    <dt class="tag-description">Description:</dt>
+    <dd class="tag-description"><ul class="dummy"><li><p>產製流程圖 PNG</p></li></ul></dd>
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="WFlowchart.mjs.html">WFlowchart.mjs</a>, <a href="WFlowchart.mjs.html#line79">line 79</a>
+    </li></ul></dd>
+</dl>
+    <h5 class="h5-examples">Example</h5>
+    <pre class="prettyprint"><code>import fs from 'fs'
+import WFlowchart from 'w-flowchart'
+let inp = {
+    dir: 'TB',
+    nodes: [
+        { id: 'A', label: '開始', cls: 'blue' },
+        { id: 'G', label: '處理群組', cls: 'greenG' },
+        { id: 'B', label: '步驟一', cls: 'green', group: 'G' },
+        { id: 'C', title: '服務', items: ['項目一', '項目二'], cls: 'green', group: 'G' },
+        { id: 'D', label: '判斷?', cls: 'diamond' },
+        { id: 'E', label: '結束', cls: 'orange' },
+    ],
+    edges: [
+        { from: 'A', to: 'B' },
+        { from: 'B', to: 'C', label: '呼叫' },
+        { from: 'C', to: 'D' },
+        { from: 'D', to: 'E', label: '通過' },
+        { from: 'D', to: 'B', kind: 'dashed', label: '退回' },
+    ],
+}
+let buf = await WFlowchart(inp) //預設 mode 'p10'; 可用 WFlowchart(inp, { mode: 'p3' }) 指定產線
+fs.writeFileSync('flowchart.png', buf)
+// => 產出 flowchart.png
+let svg = await WFlowchart(inp, { output: 'svg' }) //輸出 standalone SVG 字串(p9 不支援)
+fs.writeFileSync('flowchart.svg', svg)
+// => 產出 flowchart.svg</code></pre>
+    <h5 class="h5-parameters">Parameters:</h5>
+<table class="params">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Attributes</th>
+        <th>Default</th>
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+                <td class="name"><code>inp</code></td>
+            <td class="type">
+<span class="param-type">Object</span>
+            </td>
+                <td class="attributes">
+                </td>
+                <td class="default">
+                </td>
+            <td class="description last"><p>輸入正規化繪圖數據物件,格式 { dir, nodes, edges },與繪圖引擎無關</p>
+                <h6>Properties</h6>
+<table class="params">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Attributes</th>
+        <th>Default</th>
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+                <td class="name"><code>dir</code></td>
+            <td class="type">
+<span class="param-type">String</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>'TB'</code>
+                </td>
+            <td class="description last"><p>輸入佈局方向字串,可選 'TB'(上而下)或 'LR'(左而右),預設 'TB'</p></td>
+        </tr>
+        <tr>
+                <td class="name"><code>nodes</code></td>
+            <td class="type">
+<span class="param-type">Array</span>
+            </td>
+                <td class="attributes">
+                </td>
+                <td class="default">
+                </td>
+            <td class="description last"><p>輸入節點陣列,每項為一般節點 { id, label, cls, group? } 或富節點 { id, title, items, cls, group? };cls 為色票鍵(見 src/common/palette.mjs),結尾 G/G2 者為群組容器,group 為所屬容器 id(容器可巢狀)</p></td>
+        </tr>
+        <tr>
+                <td class="name"><code>edges</code></td>
+            <td class="type">
+<span class="param-type">Array</span>
+            </td>
+                <td class="attributes">
+                </td>
+                <td class="default">
+                </td>
+            <td class="description last"><p>輸入邊陣列,每項為 { from, to, label?, kind? },kind 給 'dashed' 為虛線</p></td>
+        </tr>
+    </tbody>
+</table>
+            </td>
+        </tr>
+        <tr>
+                <td class="name"><code>opt</code></td>
+            <td class="type">
+<span class="param-type">Object</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>{}</code>
+                </td>
+            <td class="description last"><p>輸入設定物件,原樣傳遞給產線,預設 {}</p>
+                <h6>Properties</h6>
+<table class="params">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Attributes</th>
+        <th>Default</th>
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+                <td class="name"><code>mode</code></td>
+            <td class="type">
+<span class="param-type">String</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>'p10'</code>
+                </td>
+            <td class="description last"><p>輸入產線模式字串,可選 'p1'~'p10',各對應一套繪圖引擎產線(技術概念見各 src/pN/README.md),未指定或非有效字串時預設 'p10'</p></td>
+        </tr>
+        <tr>
+                <td class="name"><code>output</code></td>
+            <td class="type">
+<span class="param-type">String</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>'png'</code>
+                </td>
+            <td class="description last"><p>輸入輸出格式字串,可選 'png'(回傳 PNG Buffer)或 'svg'(回傳 standalone SVG 字串),未指定或非有效字串時預設 'png';svg 支援 p1~p8 與 p10,p9(React Flow 之 HTML DOM 渲染)不支援,給 svg 會拋錯</p></td>
+        </tr>
+    </tbody>
+</table>
+            </td>
+        </tr>
+    </tbody>
+</table>
+<h5 class="h5-returns">Returns:</h5>
+<div class="param-desc">
+    <p>回傳 Promise,resolve 依 opt.output 回傳 PNG 圖之 Buffer 或 SVG 字串,reject 回傳錯誤訊息</p>
+</div>
+<dl class="param-type">
+    <dt>
+        Type
+    </dt>
+    <dd>
+<span class="param-type">Promise</span>
+    </dd>
+</dl>
+</article>
+</section>
+</div>
+<br class="clear">
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Sat Jul 11 2026 16:01:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+</footer>
+<script>prettyPrint();</script>
+<script src="scripts/polyfill.js"></script>
+<script src="scripts/linenumber.js"></script>
+</body>
+</html>

package/docs/index.html CHANGED Viewed

@@ -29,7 +29,7 @@
 <nav >
-    <h2><a href="index.html">Home</a></h2>
+    <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#WFlowchart">WFlowchart</a></li></ul>
 </nav>
@@ -71,7 +71,7 @@
 <br class="clear">
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Fri Jul 10 2026 23:14:38 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Sat Jul 11 2026 16:01:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>