[Notion] 利用 Mermaid 建立流程圖、甘特圖、圓餅圖等各式圖形


如果你是Notion的愛用者,那你知道Notion有內建流程圖(Flowchat)的功能嗎?相信應該有大多數人不清楚,其實Notion早就和「Mermaid」美人魚整合了,所以只要你熟悉MERMAID的用法,那麼不用「Whimsical」這類的第三方工具,一樣可以畫出蠻有質感的流程圖,常見的圓餅圖、甘特圖、狀態圖、循序圖、ER Diagram都有支援,而這個Mermaid的圖形功能,我個人覺得它比較適合進階用戶,不過各位有興趣的都可以學學,也許剛開始不習慣,但用久了應該就可以駕輕就熟。

什麼是Mermaid:它是基於Javascript、Markdown的語法所發展出來的圖表工具,用戶可以動態的建立、修改圖形

Notion 如何建立 Mermaid 圖形

要建立Mermaid的圖形很簡單,只要在Notion中輸入「/code」,選擇程式碼的功能

Notion建立程式碼區段

然後在程式碼語言中選擇「Mermaid」,這樣就可以輸入Mermaid的語法來建立圖形了

Notion程式碼Mermaid

下圖是簡單的範例:只要輸入圖形的語法,Notion就會自動的轉成圖形,預設會是「Split」的模式,所以在畫面上會把「語法」和「圖形」分開的呈現

Notion Mermaid Split模式

你也可以透過下拉式選單,將呈現的模式改為「Code」,則畫面只會呈現程式碼,若是選擇「Preview」,則會把語法隱藏起來,只呈圖形的部分,至於哪種模式比較適合,就要看自己的需求了

Notion Marmaid呈現模式

各式圖形展示

在這邊不會說明該怎麼建這些流程圖,有興趣人建議參考Mermaid官方文件來進行操作,只要會Meramid的語法,熟悉之後就可以輕鬆的在Notion中建立有質感的圖形,而且流程圖只是Meramid中的其中一種圖形,它還包含Sequence Diagram (循序圖)、Class Diagram (類別圖)、State Diagram (狀態圖)、Gantt (甘特圖)、Pie Chart (圓餅圖),連資料庫常會用到的Entity Relationship Diagrams (實體關聯性圖)都有支援。

以下摘列出幾個官網提供的常見圖形供大家參考,更多的範例或圖形類別請參考Mermaid官方網站

FlowChart 流程圖

這張圖是上方流程圖的優化版,有沒有注意哪邊不一樣?是的,目前的FlowChart有個比較特別的功能,就是可以自訂元件顏色

Notion流程圖 - color flowchart

Sequence Diagram 循序圖

Notion sequence diagram

Class Diagram 類別圖

Notion class diagram

State Diagram 狀態圖

Notion state diagram

Gantt 甘特圖

Notion本身就有支援甘特圖的功能,其實不用額外的Mermaid功能,個人建議用Notion官方的即可

Notion Gannt diagram

Pie Chart 圓餅圖

Notion 圓餅圖

Entity Relationship Diagrams 實體關聯性圖

Notion ER Diagram

延伸閱讀