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

fin
Jun 10, 2024

--

常見的流程圖圖示

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

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

基本圖示

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

開始與結束 (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,我已經把這些圖示畫好了,放在這裡,有使用 excalidraw 的直接點擊連結即可開始使用。(已開 PR,等被放入 public library 後應該就更容易存取)

https://excalidraw.com/?addLibrary=https%3A%2F%2Fraw.githubusercontent.com%2Fexcalidraw%2Fexcalidraw-libraries%2Ffinfin-flow-chart-symbols-1717806157297%2Flibraries%2Ffinfin%2Fflow-chart-symbols.excalidrawlib%3Fraw%3Dtrue

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

--

--