Notion 是一個強大且多功能的協作工具,除了管理你的筆記和任務外,它還可以用來視覺化資料。在這篇文章中,我將向你介紹如何使用 Mermaid 語法在 Notion 上繪製時間軸。 繪製時間軸能夠幫助人們更好地規劃、管理和監控工作,提高工作效率,並確保項目或工作按時完成。它提供了一個整體視圖,讓人們能夠在時間維度上做出明智的決策和調整,並有效地進行溝通和資訊共享。
01 呼叫公式
使用 Notion 快捷鍵 ( / ) 呼叫指令,在斜線後輸入 code 開啟公式指令。
02 輸入對應語法
在 code 語法的編輯頁面,滑鼠移至左上方,選擇使用 code 語法是 Mermaid,以及所要呈現的方式為 Split。
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
◆ 中文版
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
② 行程_小時
情境:當我們渴望學習成功人士的生活方式和行程規劃時,時間軸成為了我們的有力工具。透過時間軸的呈現方式,我們能夠清晰地看到他們在平日和週末的行程安排,並快速辨識出我們可以調整和學習改變的地方。
◆ 平日行程安排|英文版
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
03 實際操作|② 行程_小時|◆平日行程安排|英文版
◆ 平日行程安排|中文版
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
03 實際操作|② 行程_小時|◆平日行程安排|中文版
◆ 週末行程安排|英文版
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
03 實際操作|② 行程_小時|◆週末行程安排|英文版
◆ 週末行程安排|中文版
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
03 實際操作|② 行程_小時|◆週末行程安排|英文版
③ 事件_分鐘
情境:專案經理正準備安排一場只有一小時時長的會議,為了更好地規劃會議時間和流程,他決定使用時間軸呈現。透過時間軸,專案經理可以清楚地看到整個會議的時間範圍和相關活動,這有助於他有效地分配和管理會議中的不同任務和議程。
◆ 英文版
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
◆ 中文版
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
今天的分享就到這邊啦,期待下一篇的分享,祝福大家都有個美好的一天!喜歡窩DEMAA(OS: 就是取自”我的媽啊“的諧音)的朋友,歡迎按讚追蹤分享,也歡迎加入
數位生產力 IG 和
FB 社團,就能在第一時間收到最新的生產力工具介紹。最後,也別忘記可以使用 Mermaid 語法在 Notion 上繪製時間軸,視覺化你的學習/工作面板,
點此 看本篇實際操作的 code。我們下次見^^
☸ 窩DEMAA