操作教學｜教你如何在 Notion 繪製流程圖

01 呼叫公式

使用 Notion 快捷鍵 ( / ) 呼叫指令，在斜線後輸入 code 開啟公式指令。

02 輸入對應語法

在 code 語法的編輯頁面，滑鼠移至左上方，選擇使用 code 語法是 Mermaid，以及所要呈現的方式為 Split。

• Split： 如果你想要直接編寫 Mermaid 語法並即時查看結果，Split 模式是很適合的。你可以在上側的編輯器中輸入 Mermaid 語法，下側的預覽窗格將即時顯示圖形結果。
• Code： 如果你更喜歡在一個專用的編輯器中編寫 Mermaid 語法，並且希望有更大的編輯區域和更豐富的程式編輯功能，那麼你可以切換到 Code 模式。在這個模式下，你可以在一個全螢幕的編輯器中編寫 Mermaid 語法，接續在完成後，透過點擊「Preview」按鈕來預覽圖形結果。
• Preview： 如果你只關心最終的圖形結果，而不需要直接編寫 Mermaid 語法，那麼 Preview 模式非常適合。在這個模式下，你可以使用預設的圖形編輯工具或匯入已編寫好的 Mermaid 語法檔案，然後即時預覽並進行必要的調整。

03 流程圖語法

① 流程圖方向

在 Mermaid 語法中，可以使用「graph」開始流程圖，並接續指定方向。以下是定義主題的語法示例：

graph LR

這行指定了流程圖中的方向。在 graph 後面加上 LR 表示從左到右的方向，而若加上 TB 或 TD 表示從上到下的方向。你可以依照需求進行方向的調整。

• LR：從左到右。
• RL：從右到左。
• TB or TD：從上到下。
• BT：從下到上。

② 節點形狀

在 Mermaid 語法中，可以使用特定的符號在分支名稱前面定義節點形狀，常見的節點形狀符號包括 ( )、([ ])、(( ))、[( )]、[[ ]]、 ]、[ ]、{ }、[( )]、[/ /]、[\ \]、[/ \]、[\ /]、((( )))、{{ }} 等，你可以根據需要選擇適合的符號。以下是節點形狀的呈現示例：

graph LR

  A((圓形)) --> B[矩形]

  C([圓矩形]) --> D[[多邊形]]

  E[(圓柱體)] --> D[[多邊形]]

  D[[多邊形]] --> F>形狀不對稱]

  B[矩形] --> F>形狀不對稱]

  G{菱形} --> F>形狀不對稱]

  G{菱形} --> N(圓角矩形)

  E[(圓柱體)] --> H{{六邊形}}

  I[/平行四邊形/] --> E[(圓柱體)]

  J[\反平行四邊形\] --> C([圓矩形])

  K[/梯形\] --> C([圓矩形])

  L[\反梯形/] --> E[(圓柱體)]

  M(((雙圈))) --> H{{六邊形}}

這行指定了流程圖中節點的顯示形狀。你可以替換箭頭樣式前的符號，選擇其他符號來表示不同的節點形狀。

• ( 文字 )：圓角矩形
• ([ 文字 ])：圓矩形
• (( 文字 ))：圓形
• [( 文字 )]：圓柱體
• [[ 文字 ]]：多邊形
• 文字 ]：形狀不對稱
• [ 文字 ]：矩形
• { 文字 }：菱形
• [( 文字 )]：圓柱體
• [/ 文字 /]：平行四邊形
• [\ 文字 \]：反平行四邊形
• [/ 文字 \]：梯形
• [\ 文字 /]：反梯形
• ((( 文字 )))：雙圈
• {{ 文字 }}：六邊形

③ 箭頭樣式

在 Mermaid 語法中，可以使用特定的符號表示流程和流程的關聯性，你可以根據關聯性選擇合適的符號。以下是定義分支的呈現示例：

graph LR

  A((圓形)) --> B[矩形]

  C([圓矩形]) -- 1關聯有文字 --- D[[多邊形]]

  E[(圓柱體)] ---|2關聯有文字| D[[多邊形]]

  D[[多邊形]] --- F>形狀不對稱]

  B[矩形] -->|1箭頭有文字| F>形狀不對稱]

  G{菱形} -- 2箭頭有文字 --> F>形狀不對稱]

  G{菱形} -.-> N(圓角矩形)

  E[(圓柱體)] -. 虛線有文字 .-> H{{六邊形}}

  I[/平行四邊形/] ==> E[(圓柱體)]

  J[\反平行四邊形\] == 粗箭頭有文字 ==> C([圓矩形])

  K[/梯形\] <--> C([圓矩形])

  L[\反梯形/] --o E[(圓柱體)]

  M(((雙圈))) --x H{{六邊形}}

這行指定了流程圖中節點的箭頭樣式。你可以替換節點形狀前的符號，選擇其他符號來表示不同的流程關聯性。

• --：單向箭頭
• -- 文字 ---：關聯上有文字
• ---|文字|：關聯上有文字
• ---：開放式關聯
• --|文字|：箭頭有文字
• -- 文字 --：箭頭有文字
• -.-：虛線
• -. 文字 .-：虛線上有文字
• ==：粗體單向箭頭
• == 文字 ==：粗箭頭上有文字
• --：雙向箭頭
• --o：可行流程
• --x：不可行流程

④ 子圖和群組

在 Mermaid 語法中，可以使用「subgraph」和「end」指令將節點區分為子圖或群組。以下是定義子圖和群組的呈現示例：

graph LR

 subgraph 群組

   subgraph 子圖1

     A --> B

     C --> D

   end

   subgraph 子圖2

     E --> A

     E --> F

   end

   subgraph 子圖3

     G --> J

     H --> I

   end

	end

 子圖1 --> 子圖3

 子圖3 --> 子圖2

 子圖1 --> K

這行指定了流程圖中子圖和群組的樣式。你可以依照需求調整子圖和群組的呈現，使用「subgraph」和「end」指令調整流程的關聯性。

---

04 實際操作

① 專案需求

情境：老闆要求團隊思考影片製作所需人員，說明這些人員需要負責的事項，並以流程圖呈現。

graph TD;

  計畫[影片專案] -->|需要| 編劇;

  計畫 -->|需要| 演員;

  計畫 -->|需要| 拍攝人員;

  計畫 -->|需要| 編輯人員;

  計畫 -->|需要| 配樂人員;

  編劇 -->|負責| 劇本撰寫;

  演員 -->|負責| 演出;

  拍攝人員 -->|負責| 拍攝;

  編輯人員 -->|負責| 剪輯;

  配樂人員 -->|負責| 配樂;

② 組織分工

情境：老師希望可以透過流程圖看小組團隊 5 個人的分工，請小組長以流程圖呈現工作流程及事項。

graph TB

    subgraph 小組團隊分工

        A[成員A]

        B[成員B]

        C[成員C]

        D[成員D]

        E[成員E]

    end

    A -->|工作項目A1| B

    A -->|工作項目A2| C

    B -->|工作項目B1| D

    B -->|工作項目B2| E

    C -->|工作項目C1| D

    C -->|工作項目C2| E

    D -->|工作項目D1| E

③ 團隊任務

情境：目前有一個團隊，需要完成一個專案。團隊成員共3人，分別是一個組長及二個組員。請將工作分配給對應的負責人員，並根據工作流程和項目安排相對應的內容，並以流程圖呈現。

◆ 英文版

graph LR

A(Collecting Requirements) --> B(Initial Design)

B --> C(Complete Detailed Design)

C --> D(Development and Testing)

D --> E(Review and Revision)

E --> F(Final Confirmation and Approval)

F --> G(Deploy and Release)

style A fill:#FFC107, stroke:#333, stroke-width:2px;

style B fill:#FFC107, stroke:#333, stroke-width:2px;

style C fill:#FFC107, stroke:#333, stroke-width:2px;

style D fill:#FFC107, stroke:#333, stroke-width:2px;

style E fill:#FFC107, stroke:#333, stroke-width:2px;

style F fill:#FFC107, stroke:#333, stroke-width:2px;

style G fill:#FFC107, stroke:#333, stroke-width:2px;

style Leader fill:#F2545B, stroke:#333, stroke-width:2px;

style Member1 fill:#4CAF50, stroke:#333, stroke-width:2px;

style Member2 fill:#4CAF50, stroke:#333, stroke-width:2px;

A --> Leader

B --> Member1

B --> Member2

C --> Leader

D --> Member1

D --> Member2

E --> Leader

F --> Member1

F --> Member2

G --> Leader

G --> Member1

G --> Member2

◆ 中文版

graph LR

A(收集需求) --> B(初步設計)

B --> C(完成詳細設計)

C --> D(開發和測試)

D --> E(進行審查和修正)

E --> F(最終確認和審核)

F --> G(部署和上線)

style A fill:#FFC107, stroke:#333, stroke-width:2px;

style B fill:#FFC107, stroke:#333, stroke-width:2px;

style C fill:#FFC107, stroke:#333, stroke-width:2px;

style D fill:#FFC107, stroke:#333, stroke-width:2px;

style E fill:#FFC107, stroke:#333, stroke-width:2px;

style F fill:#FFC107, stroke:#333, stroke-width:2px;

style G fill:#FFC107, stroke:#333, stroke-width:2px;

style 組長 fill:#F2545B, stroke:#333, stroke-width:2px;

style 組員一 fill:#4CAF50, stroke:#333, stroke-width:2px;

style 組員二 fill:#4CAF50, stroke:#333, stroke-width:2px;

A --> 組長

B --> 組員一

B --> 組員二

C --> 組長

D --> 組員一

D --> 組員二

E --> 組長

F --> 組員一

F --> 組員二

G --> 組長

G --> 組員一

G --> 組員二

---

今天的分享就到這邊啦，期待下一篇的分享，祝福大家都有個美好的一天！喜歡窩DEMAA(OS: 就是取自”我的媽啊“的諧音)的朋友，歡迎按讚追蹤分享，也歡迎加入 數位生產力 IG 和 FB 社團，就能在第一時間收到最新的生產力工具介紹。最後，也別忘記可以通過上述操作步驟，使用 Mermaid 語法來變更流程圖方向、節點形狀、箭頭樣式，以及子圖和群組，從而根據你的需求進行相應的調整，以便繪製符合你專案要求的流程圖。快 點此 看本篇實際操作的 code，我們下次見！

☸ 窩DEMAA