嘿！大家好！大家知道 Notion 嗎？
Notion 是一個功能強大且多用途的協作工具，除了幫助你管理筆記和任務外，它還提供了視覺化資料的能力。在這篇文章中，我將向你介紹如何使用 Mermaid 語法在 Notion 網站上繪製流程圖，讓你能夠清晰地呈現和分享你的工作流程、計畫或任何需要視覺化呈現的流程。流程圖是一種圖形表示方式，用於展示任務、流程或系統中的步驟和相互關係。它可以幫助我們更清晰地理解和傳達複雜的流程，並幫助我們檢視和改進流程效率。
01 呼叫公式
使用 Notion 快捷鍵 ( / ) 呼叫指令，在斜線後輸入 code 開啟公式指令。
02 輸入對應語法
在 code 語法的編輯頁面，滑鼠移至左上方，選擇使用 code 語法是 Mermaid，以及所要呈現的方式為 Split。
如果你對 Mermaid 語法的三種呈現方式，以及何時應該使用它們還不熟悉，以下是我們提供的使用情境，你可以參考它們在 Split、Code 和 Preview 中的適用性：
- Split：
如果你想要直接編寫 Mermaid 語法並即時查看結果，Split 模式是很適合的。你可以在上側的編輯器中輸入 Mermaid 語法，下側的預覽窗格將即時顯示圖形結果。 - Code：
如果你更喜歡在一個專用的編輯器中編寫 Mermaid 語法，並且希望有更大的編輯區域和更豐富的程式編輯功能，那麼你可以切換到 Code 模式。在這個模式下，你可以在一個全螢幕的編輯器中編寫 Mermaid 語法，接續在完成後，透過點擊「Preview」按鈕來預覽圖形結果。 - Preview：
如果你只關心最終的圖形結果，而不需要直接編寫 Mermaid 語法，那麼 Preview 模式非常適合。在這個模式下，你可以使用預設的圖形編輯工具或匯入已編寫好的 Mermaid 語法檔案，然後即時預覽並進行必要的調整。
當然，無論你選擇使用哪種方式，都可以根據自己的需求和偏好來選擇最適合的 Mermaid 語法呈現方式。這些選項將幫助你更好地編寫、預覽和調整 Mermaid 圖形。
03 流程圖語法
使用 Mermaid 語法來繪製流程圖時，需要先使用 graph 關鍵字定義一個流程圖，接下來，你可以通過添加不同的指令和屬性來進行流程圖的細部設置和調整。以下是幾個常見的固定語法，包括流程圖方向、節點形狀、箭頭樣式，以及子圖和群組。這裡將逐步描述每個操作步驟和調整方式：
① 流程圖方向
在 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
｜FB｜IG｜Tiktok｜Matter｜Popdaily｜
