操作教學|教你如何在 Notion 繪製時間軸

更新 發佈閱讀 14 分鐘
raw-image

嘿!大家好!大家知道 Notion 嗎?

Notion 是一個強大且多功能的協作工具,除了管理你的筆記和任務外,它還可以用來視覺化資料。在這篇文章中,我將向你介紹如何使用 Mermaid 語法在 Notion 上繪製時間軸。 繪製時間軸能夠幫助人們更好地規劃、管理和監控工作,提高工作效率,並確保項目或工作按時完成。它提供了一個整體視圖,讓人們能夠在時間維度上做出明智的決策和調整,並有效地進行溝通和資訊共享。

01 呼叫公式

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

02 輸入對應語法

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

Mermaid 語法完成的呈現方式除了剛剛分享的 Split,用於即時預覽編寫的程式碼是否正確外,還有另外兩款,分別是 Code 及 Preview。點選 Code 模式,便只會單獨存在你所撰寫的 Mermaid 語法;點選 Preview 模式,便只會呈現出圓餅圖的畫面。

如果你對 Mermaid 語法的三種呈現方式,以及何時應該使用它們還不熟悉,以下是我們提供的使用情境,你可以參考它們在 Split、Code 和 Preview 中的適用性:

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

當然,無論你選擇使用哪種方式,都可以根據自己的需求和偏好來選擇最適合的 Mermaid 語法呈現方式。這些選項將幫助你更好地編寫、預覽和調整 Mermaid 圖形。


03 實際操作

① 專案_日期

情境:老闆要求專案經理進行一份五個月的專案規劃,並以時間軸呈現。

◆ 英文版
gantt
dateFormat MM-DD
axisFormat %m-%d
title Project Timeline for a Five-Month Project

section Initiation
Project Kickoff: 01-01, 01-07
Define Project Scope: 01-08, 01-14
Identify Stakeholders: 01-15, 01-21
Develop Project Plan: 01-22, 01-28

section Execution
Task 1: 01-29, 02-14
Task 2: 02-15, 03-07
Task 3: 03-08, 03-21

section Monitoring and Control
Regular Status Updates: 03-22, 04-15
Risk Assessment: 04-16, 04-30
Issue Management: 05-01, 05-15

section Closure
Finalize Project Deliverables: 05-16, 05-22
Conduct Project Review: 05-23, 05-29
Project Closure: 05-30, 06-01
raw-image
◆ 中文版
gantt
dateFormat MM-DD
axisFormat %m-%d
title 五個月專案的項目時間軸

section 啟動階段
專案啟動: 01-01, 01-07
定義專案範圍: 01-08, 01-14
確定利益相關者: 01-15, 01-21
制定專案計劃: 01-22, 01-28

section 執行階段
任務 1: 01-29, 02-14
任務 2: 02-15, 03-07
任務 3: 03-08, 03-21

section 監控與控制階段
定期狀態更新: 03-22, 04-15
風險評估: 04-16, 04-30
問題管理: 05-01, 05-15

section 結束階段
最終確定專案成果: 05-16, 05-22
進行專案審查: 05-23, 05-29
專案結束: 05-30, 06-01
raw-image

② 行程_小時

情境:當我們渴望學習成功人士的生活方式和行程規劃時,時間軸成為了我們的有力工具。透過時間軸的呈現方式,我們能夠清晰地看到他們在平日和週末的行程安排,並快速辨識出我們可以調整和學習改變的地方。

情境一:平日行程安排
◆ 平日行程安排|英文版
gantt
dateFormat HH:mm
axisFormat %H:%M
title Daily Schedule for Successful Individuals

section Morning Routine
Wake up: 06:00, 06:30
Exercise: 06:30, 07:30
Breakfast: 07:30, 08:00

section Work
Check emails: 08:00, 08:30
Meetings: 08:30, 10:00
Focus work: 10:00, 12:00
Lunch break: 12:00, 13:00

section Afternoon Tasks
Project work: 13:00, 16:00
Brainstorming: 16:00, 17:00

section Personal Development
Read: 17:00, 18:00
Learning new skills: 18:00, 19:00

section Relaxation and Self-Care
Exercise or Yoga: 19:00, 20:00
Dinner: 20:00, 21:00
Relaxation time: 21:00, 22:00
Bedtime routine: 22:00, 23:00
raw-image
◆ 平日行程安排|中文版
gantt
dateFormat HH:mm
axisFormat %H:%M
title 成功人士的每日行程安排

section 早晨日常
起床: 06:00, 06:30
運動: 06:30, 07:30
早餐: 07:30, 08:00

section 工作
檢查郵件: 08:00, 08:30
會議: 08:30, 10:00
專注工作: 10:00, 12:00
午餐: 12:00, 13:00

section 午後任務
專案工作: 13:00, 16:00
腦力激盪: 16:00, 17:00

section 投資自己
閱讀: 17:00, 18:00
學習新技能: 18:00, 19:00

section 放鬆時光
運動/瑜伽: 19:00, 20:00
晚餐: 20:00, 21:00
放鬆時間: 21:00, 22:00
睡前準備: 22:00, 23:00
raw-image
情境二:週末行程安排
◆ 週末行程安排|英文版
gantt
dateFormat HH:mm
axisFormat %H:%M
title Weekend Schedule for Successful Individuals

section Saturday
Wake up: 06:00, 06:30
Exercise: 06:30, 07:30
Breakfast: 07:30, 08:00
Personal Projects: 08:00, 12:00
Lunch: 12:00, 13:00
Social Activities: 13:00, 18:00
Dinner: 18:00, 19:00
Relaxation and Self-Care: 19:00, 22:00
Bedtime Routine: 22:00, 23:00

section Sunday
Wake up: 07:00, 07:30
Exercise: 07:30, 08:30
Breakfast: 08:30, 09:00
Family Time: 09:00, 12:00
Lunch: 12:00, 13:00
Learning and Skill Development: 13:00, 16:00
Outdoor Activities: 16:00, 18:00
Dinner: 18:00, 19:00
Relaxation and Leisure: 19:00, 22:00
Bedtime Routine: 22:00, 23:00
raw-image
◆ 週末行程安排|中文版
gantt
dateFormat HH:mm
axisFormat %H:%M
title 成功人士週末行程規劃

section 星期六
起床: 06:00, 06:30
運動: 06:30, 07:30
早餐: 07:30, 08:00
個人專案: 08:00, 12:00
午餐: 12:00, 13:00
社交活動: 13:00, 18:00
晚餐: 18:00, 19:00
放鬆時間: 19:00, 22:00
睡前準備: 22:00, 23:00

section 星期日
起床: 07:00, 07:30
運動: 07:30, 08:30
早餐: 08:30, 09:00
家庭時間: 09:00, 12:00
午餐: 12:00, 13:00
學習新技能: 13:00, 16:00
戶外活動: 16:00, 18:00
晚餐: 18:00, 19:00
放鬆時間: 19:00, 22:00
睡前準備: 22:00, 23:00
raw-image

③ 事件_分鐘

情境:專案經理正準備安排一場只有一小時時長的會議,為了更好地規劃會議時間和流程,他決定使用時間軸呈現。透過時間軸,專案經理可以清楚地看到整個會議的時間範圍和相關活動,這有助於他有效地分配和管理會議中的不同任務和議程。

◆ 英文版
gantt
dateFormat HH:mm
axisFormat %H:%M
title Schedule for a One-Hour Meeting

section Meeting Preparation
Prepare materials and agenda: 00:00, 00:15

section Meeting Session
Opening introduction: 00:15, 00:20
Discussion topic 1: 00:20, 00:35
Discussion topic 2: 00:35, 00:50
Summary and action items: 00:50, 00:55
Meeting conclusion: 00:55, 01:00
raw-image
◆ 中文版
gantt
dateFormat HH:mm
axisFormat %H:%M
title 一小時會議的行程安排

section 會議準備
準備資料和議程: 00:00, 00:15

section 會議進行
開場介紹: 00:15, 00:20
議題討論 1: 00:20, 00:35
議題討論 2: 00:35, 00:50
總結及行動: 00:50, 00:55
結束會議: 00:55, 01:00
raw-image

今天的分享就到這邊啦,期待下一篇的分享,祝福大家都有個美好的一天!喜歡窩DEMAA(OS: 就是取自”我的媽啊“的諧音)的朋友,歡迎按讚追蹤分享,也歡迎加入 數位生產力 IGFB 社團,就能在第一時間收到最新的生產力工具介紹。最後,也別忘記可以使用 Mermaid 語法在 Notion 上繪製時間軸,視覺化你的學習/工作面板,點此 看本篇實際操作的 code。我們下次見^^

☸ 窩DEMAA

FBIGTiktokMatterPopdaily

raw-image
留言
avatar-img
窩 World
1.1K會員
119內容數
在多工處理已是日常的世代,具備提升效率的能力變得非常重要。我們相信只要瞭解如何使用數位工具,就能夠優化工作型態及學習模式,讓生活逐步精緻化。基於此信念,窩 World 包含的 Notion 的 Small Talk 以及數位生產力,將重點說明 Notion 的使用及數位工具的分享,讓大家能視個人需求建立專屬的知識地圖。
窩 World 的其他內容
2024/10/31
今天要跟大家分享一款專為 Notion 記帳設計的 2025 Notion Finance Tracker 模板,結合了 Notion 近期產品發表會上推出的 Notion Form 新功能,以及 Notion 中大家最推崇的 Notion Database 功能,讓記帳變得更加簡單高效!
Thumbnail
2024/10/31
今天要跟大家分享一款專為 Notion 記帳設計的 2025 Notion Finance Tracker 模板,結合了 Notion 近期產品發表會上推出的 Notion Form 新功能,以及 Notion 中大家最推崇的 Notion Database 功能,讓記帳變得更加簡單高效!
Thumbnail
2024/10/05
嗨,朋友們!作為一款功能強大的知識管理工具,Heptabase 的白板系統能夠讓你更有條理地整理和視覺化呈現各種資訊,但若你平時工作流主要使用 Notion 作為資料統整的主要平台,希望能把 Heptabase 中的內容存入 Notion 頁面,該怎麼做呢?兩個步驟今天就來分享給你知道。
Thumbnail
2024/10/05
嗨,朋友們!作為一款功能強大的知識管理工具,Heptabase 的白板系統能夠讓你更有條理地整理和視覺化呈現各種資訊,但若你平時工作流主要使用 Notion 作為資料統整的主要平台,希望能把 Heptabase 中的內容存入 Notion 頁面,該怎麼做呢?兩個步驟今天就來分享給你知道。
Thumbnail
2024/07/31
在幾乎人人都有手機的時代,相簿裡會有許多生活的紀錄,但很少有人會回頭整理,導致許多知識都被忽略。因此,今天要跟大家分享一款很棒的 AI 工具,專為解決這個問題而生 — Photes.io。它能將我們日常生活的照片、螢幕截圖,以及圖像轉化為筆記,並直接匯出到 Notion 中,大大提升我們的生產力。
Thumbnail
2024/07/31
在幾乎人人都有手機的時代,相簿裡會有許多生活的紀錄,但很少有人會回頭整理,導致許多知識都被忽略。因此,今天要跟大家分享一款很棒的 AI 工具,專為解決這個問題而生 — Photes.io。它能將我們日常生活的照片、螢幕截圖,以及圖像轉化為筆記,並直接匯出到 Notion 中,大大提升我們的生產力。
Thumbnail
看更多
你可能也想看
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
Notion以其強大功能廣受用戶歡迎,不僅提供豐富功能,還具備高度定制性,成為項目管理的理想選擇。 然而,其內建的進度條呈現似乎還滿單調的...所以這篇文章將介紹如何使用 Emoji 來豐富進度條設計,並提供多達22種的有趣組合! 讓你的任務進度管理以直觀形式展示,不僅增強視覺效果,更能增加成就感~
Thumbnail
Notion以其強大功能廣受用戶歡迎,不僅提供豐富功能,還具備高度定制性,成為項目管理的理想選擇。 然而,其內建的進度條呈現似乎還滿單調的...所以這篇文章將介紹如何使用 Emoji 來豐富進度條設計,並提供多達22種的有趣組合! 讓你的任務進度管理以直觀形式展示,不僅增強視覺效果,更能增加成就感~
Thumbnail
上一回簡單介紹了,Notion的不同用途後,是時候按更多不同情況來體驗下Notion的實用性了。這次試下用它來作專案的管理,通常接下不同的Project都總會有一些基本的資料。
Thumbnail
上一回簡單介紹了,Notion的不同用途後,是時候按更多不同情況來體驗下Notion的實用性了。這次試下用它來作專案的管理,通常接下不同的Project都總會有一些基本的資料。
Thumbnail
優化工作流程與提升專案管理效率,透過 Notion 與多款應用程式的無縫整合。掌握與Slack、Google Forms、Jira、Zoom 和 Google 日曆等工具的整合串接,有效協作、資訊整理,更輕鬆地追蹤任務、進行會議,應對專案管理挑戰。打造高效專案管理策略,提升工作成果。
Thumbnail
優化工作流程與提升專案管理效率,透過 Notion 與多款應用程式的無縫整合。掌握與Slack、Google Forms、Jira、Zoom 和 Google 日曆等工具的整合串接,有效協作、資訊整理,更輕鬆地追蹤任務、進行會議,應對專案管理挑戰。打造高效專案管理策略,提升工作成果。
Thumbnail
Notion 是一個功能強大的 all-in-one 工具,讓我們能更好地整理和管理自己的筆記和安排。如果你在尋找一種可以提升工作效率、組織任務和創造個人知識庫的方法?那麼你一定不會想錯過我們向你推薦四個網站,裡頭提供多樣令人驚嘆的 Notion 外掛小工具,讓你能在 Notion 中加速工作流程。
Thumbnail
Notion 是一個功能強大的 all-in-one 工具,讓我們能更好地整理和管理自己的筆記和安排。如果你在尋找一種可以提升工作效率、組織任務和創造個人知識庫的方法?那麼你一定不會想錯過我們向你推薦四個網站,裡頭提供多樣令人驚嘆的 Notion 外掛小工具,讓你能在 Notion 中加速工作流程。
Thumbnail
Notion提供了許多功能,可以讓您建立更加精緻的樣版。今天我們要將pxp祕笈症候群製作的 【 Notion 管理樣版:展覽就醬辦!】,運用簡約設計的概念進行改造,創作出一份簡潔俐落的【 Notion 管理樣版:展覽就醬辦-簡約版本】。
Thumbnail
Notion提供了許多功能,可以讓您建立更加精緻的樣版。今天我們要將pxp祕笈症候群製作的 【 Notion 管理樣版:展覽就醬辦!】,運用簡約設計的概念進行改造,創作出一份簡潔俐落的【 Notion 管理樣版:展覽就醬辦-簡約版本】。
Thumbnail
會有這篇文章是因為之前用 Notion 當作官網辦社團活動時,發現有許多新朋友並不了解 Notion 是什麼樣的工具,在不了解怎麼使用的情況下,錯過了許多可以互動的機會。 因此,這篇文章想要用五分鐘的時間,跟你分享三個觀念,讓你快速的了解 Notion 是什麼!
Thumbnail
會有這篇文章是因為之前用 Notion 當作官網辦社團活動時,發現有許多新朋友並不了解 Notion 是什麼樣的工具,在不了解怎麼使用的情況下,錯過了許多可以互動的機會。 因此,這篇文章想要用五分鐘的時間,跟你分享三個觀念,讓你快速的了解 Notion 是什麼!
Thumbnail
我每天都要处理两类事务:简悦 & 工作,每个事务都会有不同的角色,如前者包括:编码、设计、产品经理、客服、售后、商务等,后者大多数时候是乙方角色,所以也包括了产品经理、沟通、估算成本、阶段交付以及「要账」…… 等等。 工作日志(间歇日记) 工作进度 产品动态(奖励机制) 文章协作 子项目 注释
Thumbnail
我每天都要处理两类事务:简悦 & 工作,每个事务都会有不同的角色,如前者包括:编码、设计、产品经理、客服、售后、商务等,后者大多数时候是乙方角色,所以也包括了产品经理、沟通、估算成本、阶段交付以及「要账」…… 等等。 工作日志(间歇日记) 工作进度 产品动态(奖励机制) 文章协作 子项目 注释
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News