什麼是流程圖？
以由上而下的圖形與連線表示工作或程式流程的圖表。可視化處理順序、條件分支與重複流程，有助於整理與說明處理方式。
流程圖模擬器
流程圖模擬器
建立含變數、運算、分支與迴圈的流程圖，並在執行時追蹤數值變化。
完全在瀏覽器中執行
自動儲存
JSON 匯入與匯出
不會執行任意 JavaScript
建議使用電腦
建議使用電腦：以滑鼠操作較適合放置、連接與編輯節點。
執行模式：無法編輯。此處會顯示變數實際值與輸出。選擇「結束執行」即可返回編輯模式。
EDITOR
流程圖
100%
放置節點以建立流程
目前執行步驟
—0 步驟
開始執行後，這裡會顯示目前的處理內容。
Delete：刪除選取項目Ctrl+Z UndoCtrl+Y RedoCtrl+S：儲存按兩下：設定
HOW TO USE
建立流程、執行並確認數值變化
從左側新增節點，並將輸出端連接至下一個節點。可在右側的「設定」中編輯處理、條件與顯示運算式。
為什麼需要？ 只排列圖形無法確認條件分支的方向、變數的變化或迴圈是否結束。實際執行即可確認流程是否依照預期順序進行。
適用情境 可用於程式設計前整理流程、課堂或說明時確認步驟、檢查分支與迴圈，以及在實作前找出錯誤。
- 開啟右側的「變數」，並新增數值、字串或布林變數
- 從開始連接至結束，並為每個判斷節點新增 Yes / No 兩個分支
- 選擇「單步執行」以查看目前節點和變數變化
- 完成的流程可儲存為 JSON，多個版本可在「開啟」中管理
運算式會以受限制的安全語言計算。不會執行任意 JavaScript，也不會將流程圖或變數傳送至瀏覽器外。
GUIDE
流程圖基礎與操作方式
流程圖以圖形與連線呈現處理順序和條件分支。此工具可以直接執行您建立的流程。
各圖形的用途
- 端點（開始／結束）
- 表示流程的開始與結束。
設定方式：從左側清單新增開始或結束端點，也可以在右側設定中變更端點類型。
範例：開始 → 處理 → 結束 - 處理
- 表示要執行的處理，例如指定變數或進行計算。
設定方式：在右側設定中輸入顯示名稱與處理運算式，每行撰寫一個指定式。
範例：顯示名稱「遞增計數」與處理運算式count = count + 1 - 判斷
- 判斷條件式，並分成 Yes 與 No 兩個方向。
設定方式：在右側設定中輸入條件式，並分別連接 Yes 與 No 輸出。
範例：條件式score >= 70。若為真則前往 Yes，若為假則前往 No。 - 顯示
- 將計算結果或訊息新增至右側的「輸出」。
設定方式：在右側設定中輸入顯示名稱與輸出運算式。
範例：輸出運算式"count=" + count - 迴圈開始
- 條件為真時進入迴圈本體，為假時則前往迴圈之後。
設定方式：在右側設定中輸入條件式，並指定相對應的迴圈結束。
範例：條件式count < 5。若為真則進入本體，若為假則前往迴圈之後。 - 迴圈結束
- 在迴圈本體結尾會返回相對應的迴圈開始。開始條件為假時，則前往迴圈之後的處理。
設定方式：在右側設定中選取相對應的迴圈開始。
範例：將它放在 count 遞增處理之後，並在 count 小於 5 時重複。
圖形配置方式
一般建立步驟
- 將左側節點清單中的圖形拖放至中央畫布。
- 依處理順序從開始到結束放置圖形，並拖曳節點調整位置。
- 按一下節點開啟選單，再選擇「編輯處理」以設定名稱或運算式。
各圖形的配置與設定
端點（開始／結束）
配置：在流程開頭放置一個開始端點，並在結尾放置結束端點。
連接：從開始端點只連接一條 OUT 至下一個節點，結束端點僅連接 IN，不提供 OUT。
處理
設定：選擇「編輯處理」輸入顯示名稱與處理運算式，每行一個指定式。
連接：將前一個節點連至 IN，並將一條 OUT 連至下一個節點。範例：count = count + 1
判斷
設定：輸入條件式，結果應為 true 或 false 。
連接：將下方的 Yes 與 No 分別連接至各一個節點。範例：score >= 70
顯示
設定：輸入顯示名稱與輸出運算式。執行時，結果會新增至右側的「輸出」。
連接：將前一個節點連至 IN，並將一條 OUT 連至下一個節點。範例："count=" + count
迴圈開始
設定：輸入條件式，並與相同顏色和編號的迴圈結束配對。
連接：OUT 只連接一條至迴圈本體開頭。條件為 false 時會自動移至迴圈之後。
迴圈結束
設定：在右側設定中選取相對應的迴圈開始，並將此節點放在迴圈本體結尾。
連接：OUT 只連接一條至迴圈之後的處理。不要直接連回迴圈開始，執行時會自動返回。
連接方式與規則
- 按下「連接模式」，或從節點選單選擇「開始連接」。
- 按一下來源節點下方的 OUT，或判斷節點的 Yes / No。
- 按一下目標節點上方的 IN 即可完成連接。
- 一般 OUT 只能連接一條線，IN 可接受多個節點的連線。
- 將同一個 OUT 連接至其他節點時，舊連線會自動取代。
- 若要刪除連線，請選取連線並按下 Delete。
- 拖曳節點調整位置，避免連線交叉。
處理 A
處理 B
每個 OUT 只能輸出一條連線。改連至其他節點時，舊連線會被取代。
處理 A
處理 B
處理 C
多個 OUT 可連接至同一節點的 IN，適合將分支後的流程合併。
只有判斷節點需要分別連接 Yes 與 No。請在設定中配對迴圈開始與結束，不要直接連接兩者。
右側面板說明
- 輸出
- 依執行順序顯示已執行之顯示節點的結果。分支中未經過的節點不會新增結果。
注意：執行前會顯示「尚無輸出」，執行時會自動開啟「輸出」面板。 - 變數
- 設定變數名稱、類型與初始值。執行時可查看目前的實際值。
- 歷史記錄
- 逐步查看經過的節點、條件判斷與變數變化。
- 設定
- 編輯所選節點的顯示名稱、處理、條件或輸出運算式。
查看輸出方式
- 在顯示節點設定中輸入輸出運算式。範例：
"count=" + count - 使用「單步執行」或「連續執行」前進至顯示節點。
- 執行顯示節點時，運算結果會新增至「輸出」。
- 若顯示節點在迴圈中執行多次，每次結果都會依序新增。
- 若要從頭查看輸出，請在編輯模式按下「清除」後再執行。
範例：變數 count 為 1 時，顯示運算式 "count=" + count 的輸出為 count=1 。
執行期間無法編輯，右側會顯示變數實際值與輸出。選擇「結束執行」即可返回編輯模式。
操作方式
只執行目前節點。
依設定速度自動執行。
暫停連續執行。
結束執行模式並返回編輯。
選擇連續執行速度。
- 將左側節點清單中的圖形拖放至中央畫布。
- 拖曳畫布上的節點調整位置。
- 按一下節點開啟選單，再選擇「編輯處理」以變更內容。
- 按一下連線選取，再按 Delete 即可刪除。
- 「單步執行」會逐一執行節點；「連續執行」會自動執行。按下「結束執行」可停止。
- 專案會自動儲存於此裝置，也可另存為 JSON 備份。
條件式可用的算術運算與範例
| 類型 | 符號 | 範例 | 說明 |
|---|---|---|---|
| 加法 | + | score + 10 | score 加 10 |
| 減法 | - | count - 1 | count 減 1 |
| 乘法 | * | price * quantity | price 乘以 quantity |
| 除法 | / | total / 2 | total 除以 2 |
| 餘數 | % | count % 2 == 0 | 判斷是否為偶數 |
比較與邏輯運算子
| 類型 | 符號 | 範例 | 說明 |
|---|---|---|---|
| 等於 | == | score == 70 | score 等於 70 |
| 不等於 | != | score != 0 | score 不等於 0 |
| 大於 | > | score > 70 | score 大於 70 |
| 大於或等於 | >= | score >= 70 | score 大於或等於 70 |
| 小於 | < | count < 5 | count 小於 5 |
| 小於或等於 | <= | count <= 5 | count 小於或等於 5 |
| 且 | && | score >= 70 && count < 5 | 左右條件皆為真 |
| 或 | || | score < 0 || score > 100 | 其中一個條件為真 |
| 否定 | ! | !isFinished | 反轉布林值 |
= 是處理中指定值的符號，而== 是在條件中比較值的符號。!isFinished 使用isFinished 請將它登記為布林變數。複雜條件請用括號組合，例如 (score + bonus) >= 70 。
執行錯誤的處理方式
錯誤訊息 無法執行的原因會顯示在執行按鈕下方。畫布也會標示有問題的節點，請依照訊息逐項修正。
- 若為結構錯誤，請確認訊息中的節點名稱與連線內容。
- 按一下節點並選擇「編輯處理」，修正處理、條件或輸出運算式。
- 若缺少連線，請將輸出端連接至目標輸入端。
- 執行中發生錯誤時，選擇「結束執行」返回編輯模式，修正後再用「單步執行」確認。
確認連線與結構
- 只使用一個開始節點，並從開始連接至結束。
- 除判斷與結束節點外，每個節點都應有一條後續連線。
- 每個判斷節點都要各連接一條 Yes 與 No。
- 以相同編號配對迴圈開始與結束。
確認運算式與值
- 每行撰寫一個指定式，並先登記要使用的變數。
- 請勿混用數值、字串與布林類型。
- 判斷與迴圈條件式的結果必須為
true或false。 - 確認是否除以 0，以及括號或字串是否未關閉。