什麼是流程圖製作器？

透過拖放操作建立流程圖，支援判斷菱形、處理方塊、輸入/輸出平行四邊形、文件形狀和連接線。完成後可匯出為 PNG、SVG 或 PDF。

畫布提供流程矩形、判斷菱形、起訖膠囊形、輸入/輸出平行四邊形和文件形狀。它們會自動吸附到位,節點移動時連線也跟著走。雙擊節點改名稱,從一個節點的小點拖到另一個就能連線,改色或清空畫布都只要一鍵。畫完後可匯出透明背景的 SVG 用在簡報、任意縮放等級的 PNG,或適合列印的 PDF。

使用方法

1. 第一步 — 從工具列將形狀節點（處理框、判斷框、起始/結束框）拖曳至畫布。
2. 第二步 — 從一個連接點拖曳至另一個以連接節點。雙擊節點可編輯文字標籤。
3. 第三步 — 調整版面配置後，將流程圖匯出為 PNG、SVG 或 PDF，可用於簡報、列印或技術文件。

何時使用

• 寫程式碼之前,先把後端請求流程(含成功和失敗分支)整理成圖。
• 梳理客服升級路徑,讓新進員工第一天就能看懂。
• 設計文件裡用文字講不清楚時,直接畫一張演算法流程圖。

結果

一位產品經理繪製使用者註冊流程：開始 → 註冊 → 電子郵件已驗證？（判斷）→ 是 → 進入儀表板 / 否 → 重寄驗證信 → 返回驗證步驟。

常見問題

流程矩形和判斷菱形有什麼差別?

矩形代表動作或步驟(寄信、更新紀錄)。菱形代表是/否或分歧條件,會把流程分成兩條路徑。膠囊形則標示整個流程的開始和結束。遵循這些慣例,流程圖才好讀。

兩個圖形要怎麼連起來?

把游標移到節點上,邊緣會出現小連接點。從一個連接點按住拖到另一個圖形的連接點,放開即可產生箭頭。之後還可以拖動箭頭中點重新走線,避開其他節點。

可以幫箭頭加文字嗎,不只方框?

可以。雙擊箭頭中點會出現文字輸入框。最常用於判斷菱形的兩條出線標「是」「否」,或在狀態轉移上寫條件,例如「status=200」或「重試次數用完」。

為什麼建議匯出 SVG 而不是 PNG?

SVG 在任何縮放下都清晰,以後想在 Figma、Illustrator 或 Inkscape 改字改色都能直接編輯。PNG 是固定解析度,但貼到 Confluence、Notion、PowerPoint 時相容性更穩定。

畫布能容納多少節點而不卡頓?

React Flow 在幾百個節點以內都還流暢。再多,平拖和縮放在中低階筆電上就會變慢。圖一旦大到那個程度,建議拆成上層總覽,再為每個子系統單獨畫詳圖,以連結串接。

相關工具