流程圖是一種很萬用的圖解形式,透過幾個簡單的元素,告訴讀者一件事情發生的先後順序,可能的分支等。讓讀者們聚焦在『這整件事情下面會發生什麼,彼此之間的先後關係是什麼』上。
流程圖可以用在事件的回顧、系統功能的規劃,甚至出遊、活動等也都可以用到。
基本圖示
這裡先介紹一下基本的流程圖的元素有哪些:
開始與結束 (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 方便使用的特性,可以很輕易的把事情的架構數位化 / 圖像化,對於個人思考整件事情的過程,找出有問題或需要改善的地方,真的會非常的有幫助。