操作教學｜教你如何在 Notion 繪製五種顏色主題的視覺圖表

© 窩DEMAA

資訊豐富的世代，如何運用視覺圖表呈現數據很重要

Notion 作為一款強大的協作工具，不僅能幫助我們整理資訊，還能創建各種視覺圖表，讓資料更生動有趣。之前我們已經分享了如何在 Notion 上使用 Mermaid 語法創建圓餅圖、時間軸、甘特圖、心智圖、流程圖和旅程圖。而在今天的文章中，我將帶你瞭解如何讓這些視覺圖表更豐富多彩，讓你的資料不再是單調的黑白兩色。顏色主題共五種，讓我們繼續看下去！

01 類型一｜預設主題

以甘特圖為例，使用 Mermaid 語法時，你可以在第一行輸入 %%{init: {'theme':'default'}}%% 來定義視覺圖表為預設主題。

%%{init: {'theme':'default'}}%%

01 類型一｜預設主題

◆ 完整語法｜類型一

%%{init: {'theme':'default'}}%%

gantt
    title 三個月專案甘特圖
    dateFormat  YYYY-MM-DD
    section 第一階段
    了解需求 :done, des1, 2022-01-01,2022-01-07
    設計系統 :done, des2, 2022-01-08,2022-01-14
    討論功能 :active, des3, 2022-01-15, 2022-01-21
    section 第二階段
    開發 :active, des4, 2022-01-22, 2022-02-28
    section 第三階段
    測試 :active, des5, 2022-03-01, 2022-03-15
    修復漏洞 :active, des6, 2022-03-16, 2022-03-22
    上線 :active, des7, 2022-03-23, 2022-03-31

02 類型二｜黑白主題

以圓餅圖為例，使用 Mermaid 語法時，你可以在第一行輸入 %%{init: {'theme':'neutral'}}%% 來定義視覺圖表為黑白主題。

%%{init: {'theme':'neutral'}}%%

02 類型二｜黑白主題

◆ 完整語法｜類型二

%%{init: {'theme':'neutral'}}%%

pie
  title 成功人士每日時間規劃比率
  "工作": 50
  "學習和成長": 20
  "休閒和娛樂": 10
  "運動和健康": 10
  "社交和人際關係": 5
  "家庭和關懷": 5

03 類型三｜森林主題

以流程圖為例，使用 Mermaid 語法時，你可以在第一行輸入 %%{init: {'theme':'forest'}}%% 來定義視覺圖表為森林主題。

%%{init: {'theme':'forest'}}%%

03 類型三｜森林主題

◆ 完整語法｜類型三

%%{init: {'theme':'forest'}}%%

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

04 類型四｜基本主題

以心智圖為例，使用 Mermaid 語法時，你可以在第一行輸入 %%{init: {'theme':'base'}}%% 來定義視覺圖表為基本主題。

%%{init: {'theme':'base'}}%%

04 類型四｜基本主題

◆ 完整語法｜類型四

%%{init: {'theme':'base'}}%%

mindmap
  root((社群媒體))
    社交網路
      Facebook
      Twitter
      Instagram
      LinkedIn
    社群媒體行銷
      行銷策略
        目標市場定位
        宣傳訴求與策略
      營銷渠道
        搜尋引擎行銷
        社交媒體廣告
        影片行銷
      行銷效果評估
        點擊率
        轉換率
        銷售成效
    社群媒體管理
      社群經理
        工作職責
        技能要求
        薪資待遇
      社群管理工具
        Hootsuite
        Buffer
        Sprout Social
    社群媒體資訊分析
      資訊收集
        監測工具
        關鍵字搜尋
      資訊分析
        數據分析工具
        洞察報告撰寫
    社群媒體趨勢
      熱門話題
        時事新聞
        娛樂八卦
        運動賽事
      行業趨勢
        技術創新
        消費者行為
        市場競爭

05 類型五｜深色主題

以旅程圖為例，使用 Mermaid 語法時，你可以在第一行輸入 %%{init: {'theme':'dark'}}%% 來定義視覺圖表為深色主題。

%%{init: {'theme':'dark'}}%%

05 類型五｜深色主題

◆ 完整語法｜類型五

%%{init: {'theme':'dark'}}%%

journey
    title 心情日記
    section Week 1
        Thu: 4
				Fri: 6
    section Week 2
        Mon: 6
				Tue: 4
				Wed: 3 

今天的分享就到這邊啦，期待下一篇的分享，祝福大家都有個美好的一天！喜歡窩DEMAA(OS: 就是取自”我的媽啊“的諧音)的朋友，歡迎按讚追蹤分享，也歡迎加入 數位生產力 IG 和 FB 社團，就能在第一時間收到最新的生產力工具介紹。最後，也別忘記可以通過上述操作步驟，使用 Mermaid 語法來調整圓餅圖、時間軸、甘特圖、心智圖、流程圖和旅程圖的視覺圖表，讓 Notion 頁面更加的美麗。快 點此 看本篇實際操作的 code，我們下次見！

☸ 窩DEMAA

｜FB｜IG｜Tiktok｜Matter｜Popdaily｜

© 窩DEMAA｜數位生產力