Light hero background

流程圖的基本圖示介紹、範例與實際應用

June 10, 2024

流程圖是一種很萬用的圖解形式,透過幾個簡單的元素,告訴讀者一件事情發生的先後順序,可能的分支等。讓讀者們聚焦在『這整件事情下面會發生什麼,彼此之間的先後關係是什麼』上。

流程圖可以用在事件的回顧、系統功能的規劃,甚至出遊、活動等也都可以用到。

流程圖圖示

基本圖示

這裡先介紹一下基本的流程圖的元素有哪些:

開始與結束 (Start/End): 用在流程的開始與結束

開始與結束 (Start/End) 圖示

過程 (Process): 流程中的一個步驟

過程 (Process) 圖示

已定義流程 (Predefined Process): 表示這裡的細部流程已經在其他地方有更詳細的定義

已定義流程 (Predefined Process) 圖示

延遲 (Delay): 需要等待的步驟

延遲 (Delay) 圖示

決策 (Decision): 決策或是分支點,會從這邊叉出不同的路

決策 (Decision) 圖示

初始化 (Preparation / Initialization): 一個初始化或是準備的步驟

初始化 (Preparation / Initialization) 圖示

輸入 / 輸出 (Input / Output): 標記資料的輸入或是輸出

輸入 / 輸出 (Input / Output) 圖示

人工操作 (Manual Input): 表示需要人工參與、操作或輸入

人工操作 (Manual Input) 圖示

AND / OR: 邏輯上的『與』跟『或』,用來整併流程資訊

AND / OR 圖示

文件 / 多文件 (Document / Multiple Document): 代表文件或是檔案

文件 / 多文件 (Document / Multiple Document) 圖示

資料庫 (Database): 軟體中負責存資料的一種系統

資料庫 (Database) 圖示

接續點 (Connector / Off-page Connector):如果當下空間不夠放,則可以放一個接續點,並從另一個空間開始。Connector 是用在同一頁的接續,Off-page Connect 用在不同頁面的接續

接續點 (Connector / Off-page Connector) 圖示

箭頭: 流程圖的重點在於每個地方的下一步是什麼,所以箭頭通常只會有一種,就是指向下一步。偶爾需要註解的時候可以用虛線指到一個說明區塊,或是用虛線指到另一個間接參考的圖示。

箭頭圖示

使用範例

以下列出兩個範例,來看看這些圖示是怎麼被使用的

登入流程

範例:登入流程

招募流程

範例:招募流程

實際應用

功能比較完整的繪製圖解用的工具會有內建流程圖的圖示如 draw.io,但通常相對就會比較難上手。一些比較簡單的如 whimsical, excalidraw 則需要自己建立這些圖示庫。

因為個人習慣使用 excalidraw 來製作流程圖,所以文中的圖示都是自己用 excalidraw 畫出來的。如果你也是用 excalidraw,在 library 中有一個我做的 Flow Chart Symbols ,強烈推薦可以試試看。

流程圖用圖解的方式來拆解事情的過程,加上 excalidraw 方便使用的特性,可以很輕易的把事情的架構數位化 / 圖像化,對於個人思考整件事情的過程,找出有問題或需要改善的地方,真的會非常的有幫助。