流程圖 (Flowchart) 的基本圖示介紹、範例與實際應用
（本文已搬至 https://www.thingsaboutweb.dev/zh-TW/posts/flowchart-introduction ）
流程圖 (Flowchart) 是一種很萬用的圖解形式，透過幾個簡單的元素，告訴讀者一件事情發生的先後順序，可能的分支等。讓讀者們聚焦在『這整件事情下面會發生什麼，彼此之間的先後關係是什麼』上。
流程圖可以用在事件的回顧、系統功能的規劃，甚至出遊、活動等也都可以用到。
基本圖示
這裡先介紹一下基本的流程圖的元素有哪些：
開始與結束 (Start/End)：用在流程的開始與結束
過程 (Process)： 流程中的一個步驟
已定義流程 (Predefined Process)： 表示這裡的細部流程已經在其他地方有更詳細的定義
延遲 (Delay)： 需要等待的步驟
決策 (Decision)： 決策或是分支點，會從這邊叉出不同的路
初始化 (Preparation / Initialization)： 一個初始化或是準備的步驟
輸入 / 輸出 (Input / Output)： 標記資料的輸入或是輸出
人工操作 (Manual Input)： 表示需要人工參與、操作或輸入
AND / OR： 邏輯上的『與』跟『或』，用來整併流程資訊
文件 / 多文件 (Document / Multiple Document）： 代表文件或是檔案
資料庫 (Database)： 軟體中負責存資料的一種系統
接續點 (Connector / Off-page Connector)：如果當下空間不夠放，則可以放一個接續點，並從另一個空間開始。Connector 是用在同一頁的接續，Off-page Connect 用在不同頁面的接續
箭頭： 流程圖的重點在於每個地方的下一步是什麼，所以箭頭通常只會有一種，就是指向下一步。偶爾需要註解的時候可以用虛線指到一個說明區塊，或是用虛線指到另一個間接參考的圖示。
使用範例
以下列出兩個範例，來看看這些圖示是怎麼被使用的
登入流程
招募流程
實際應用
功能比較完整的繪製圖解用的工具會有內建流程圖的圖示如 draw.io，但通常相對就會比較難上手。一些比較簡單的如 whimsical, excalidraw 則需要自己建立這些圖示庫。
因為個人習慣使用 excalidraw 來製作流程圖，所以文中的圖示都是自己用 excalidraw 畫出來的。如果你也是用 excalidraw，在 library 中有一個我做的 Flow Chart Symbols ，強烈推薦可以試試看。
流程圖用圖解的方式來拆解事情的過程，加上 excalidraw 方便使用的特性，可以很輕易的把事情的架構數位化 / 圖像化，對於個人思考整件事情的過程，找出有問題或需要改善的地方，真的會非常的有幫助。
