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

01 呼叫公式

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

02 輸入對應語法

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

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

03 流程圖語法

① 流程圖方向

graph LR

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

② 節點形狀

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{{六邊形}}

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

③ 箭頭樣式

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：不可行流程

④ 子圖和群組

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

04 實際操作

① 專案需求

graph TD;
  計畫[影片專案] -->|需要| 編劇;
  計畫 -->|需要| 演員;
  計畫 -->|需要| 拍攝人員;
  計畫 -->|需要| 編輯人員;
  計畫 -->|需要| 配樂人員;
  編劇 -->|負責| 劇本撰寫;
  演員 -->|負責| 演出;
  拍攝人員 -->|負責| 拍攝;
  編輯人員 -->|負責| 剪輯;
  配樂人員 -->|負責| 配樂;

② 組織分工

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

③ 團隊任務

◆ 英文版

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