流程圖製作工具

實測範例：第 21 個節點與雙向箭頭

頁面載入時已經內建 2 個節點（1 個流程、1 個決策）並用箭頭連好，方便直接體驗；持續按「新增流程」到第 21 個節點時，畫布不會新增節點，狀態列文字會改成「最多可建立 20 個節點。」，不會跳出錯誤訊息框，很容易被忽略——如果按了新增卻沒有新節點出現，先看狀態列文字，而不是重新整理頁面重來。

從節點 A 連到節點 B 之後，切到連線模式再從 B 連回 A，工具允許建立第二條反方向箭頭（狀態列顯示「已選取箭頭」而不是拒絕），但兩條箭頭畫在同一條線段上，視覺上幾乎完全重疊；需要表達雙向關係時，建議直接在節點文字裡註明方向，而不是依賴兩條重疊的箭頭。

• 節點文字用瀏覽器原生的「輸入提示框」（window.prompt）編輯，雙擊節點會跳出這個提示框。
• 匯出 PNG 時會暫時隱藏目前選取的橘色外框與虛線連線提示，輸出圖片不含編輯用的視覺標記。

只有兩種節點形狀，以及跟繪圖板的分工

這個工具只提供矩形（流程）與菱形（決策）兩種節點，沒有橢圓形的起訖點、沒有泳道，也沒有純文字標籤節點；如果流程需要區分「開始/結束」跟一般步驟，目前只能靠文字內容區分，不能靠形狀區分。

驗證方法：畫完後先用「選取/移動」模式逐一點擊每個節點確認文字正確，再匯出 PNG 並放大檢查箭頭方向，尤其節點彼此靠得很近時，箭頭的起點與終點容易讓人誤判方向。

如果需要的是自由手繪的草圖或簽名，而不是有方向的步驟圖，改用本站的線上繪圖板；兩個工具都匯出 PNG，但繪圖板沒有節點與箭頭的概念，畫完就是單純的筆跡像素，沒有可雙擊編輯的文字。

如何使用

1. 按新增流程或新增決策，在畫布上放入節點。
2. 雙擊節點修改文字，拖曳節點調整位置。
3. 切換到連線模式，先點來源節點，再點目標節點建立箭頭。
4. 選取節點或箭頭後可刪除，完成後匯出 PNG。

常見使用情境

• 整理工作流程、審核步驟、客服回覆或課堂流程。
• 快速畫出是否判斷、分支流程與簡單系統邏輯。
• 把流程圖匯出成 PNG 放入簡報、文件或任務說明。

適合誰使用

• 需要整理審核流程或作業步驟的職員
• 製作課堂決策樹或流程示意圖的老師
• 想快速畫出是否判斷邏輯的產品或支援人員

實際案例

注意事項

• 節點上限是 20 個；達到上限後再按新增，畫布不會新增節點，只會更新狀態文字，不會跳出錯誤視窗。
• 兩個節點之間可以同時存在方向相反的兩條箭頭，畫面上會幾乎完全重疊，難以分辨。
• 節點文字用瀏覽器原生的輸入提示框編輯，不是直接在畫布上打字。