操作教學｜教你如何在 Notion 繪製旅程圖
© 窩DEMAA
嘿！大家好！大家知道 Notion 嗎？
Notion 是一個功能強大且多用途的協作工具，除了幫助你管理筆記和任務外，它還提供了視覺化資料的能力。在這篇文章中，我將向你介紹如何使用 Mermaid 語法在 Notion 網站上繪製旅程圖，它能夠幫助我們更好地了解使用者在產品或服務中的體驗和互動過程。旅程圖是一種視覺化的呈現，可以幫助我們更清晰地了解一個事件或行程中的各個階段，以及每個階段中需要完成的工作項目。這有助於我們更有效地瞭解使用情形，進行在未來進行任務的優化。
@digi.productivity｜30秒讓你擁有視覺化圖表
01 呼叫公式
使用 Notion 快捷鍵 ( / ) 呼叫指令，在斜線後輸入 code 開啟公式指令。
01 呼叫公式
02 輸入對應語法
在 code 語法的編輯頁面，滑鼠移至左上方，選擇使用 code 語法是 Mermaid，以及所要呈現的方式為 Split。
02 輸入對應語法
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 旅程圖語法
使用 Mermaid 語法來繪製旅程圖時，需要先使用 journey 關鍵字定義一個旅程圖，接下來，你可以通過添加不同的指令和屬性來進行旅程圖的細部設置和調整。以下是幾個常見的固定語法，包括圖表標題、使用者步驟，以及任務。這裡將逐步描述每個操作步驟和調整方式：
① 圖表標題
在 Mermaid 語法中，可以使用「title」命令設置旅程圖的標題。在 Mermaid 程式碼中，找到要添加標題的位置，添加以下行：
title 旅程圖標題這行指定了旅程圖中標題的顯示名稱為「旅程圖標題」。你可以替換「旅程圖標題」為你所需的標題文字。
② 使用者階段
在 Mermaid 語法中，可以使用「section」命令來定義使用者旅程的不同階段。在 Mermaid 程式碼中，找到要添加使用者階段的位置，添加以下行：
section 使用者階段這行指定了旅程圖中階段的顯示名稱為「使用者階段」。你可以替換「使用者階段」為你所需的階段文字。
③ 任務
在 Mermaid 語法中，可以使用冒號「:」來說明任務的名稱、滿意度和使用者。在 Mermaid 程式碼中，找到要添加階段的位置，添加以下行：
任務名稱: 滿意度: 使用者
這行指定了旅程圖中任務的顯示名稱。「滿意度」為使用者對任務的滿意度，更改數字以代表不同使用者對每個階段的滿意度；「使用者」為該任務的執行者。你可以替換「任務名稱」為你所需的任務內容，並依需求調整滿意度、使用者。
04 實際操作
① 工作任務
情境：老闆要求團隊思考影片專案可以優化的任務，並以旅程圖呈現。
journey
title 影片專案
section 文案
規劃工作事項: 6: 組長
文案撰寫: 3: 組員一
蒐集資料: 1: 組員一, 組員二
section 影片
規劃工作事項: 5: 組長
影片剪輯: 3: 組員二
蒐集資料: 7: 組員一, 組員二
04 實際操作｜① 工作任務
② 心情日記
情境：為了更深入了解自己的身心健康狀態，因此打算創建了一個心情旅程圖，透過細緻的心情紀錄了解自己的情緒起伏，藉此改善自我情緒管理從而更接近真實的自己，並積極迎接每一天的挑戰與喜悅。
journey
title 心情日記
section Week 1
Thu: 4
Fri: 6
section Week 2
Mon: 6
Tue: 4
Wed: 3
04 實際操作｜② 心情日記
③ 旅遊規劃
情境：即將到來的假期中，公司計劃安排日本員工旅遊。為了確保旅程順利又充實，請福委會同仁透過製作旅程圖，提供這趟旅行的行程規劃。
journey
title 日本旅遊規劃
section 大阪
道頓堀: 5
環球影城: 7
八阪神社: 3
section 京都
清水寺: 5
伏見稻荷大社: 6
04 實際操作｜③ 旅遊規劃
今天的分享就到這邊啦，期待下一篇的分享，祝福大家都有個美好的一天！喜歡窩DEMAA(OS: 就是取自”我的媽啊“的諧音)的朋友，歡迎按讚追蹤分享，也歡迎加入 數位生產力 IG 和 FB 社團，就能在第一時間收到最新的生產力工具介紹。最後，也別忘記可以通過上述操作步驟，使用 Mermaid 語法來設定圖表標題、使用者步驟，以及任務，從而根據你的需求進行相應的調整，以便繪製符合你專案要求的旅程圖。快 點此 看本篇實際操作的 code，我們下次見！
☸ 窩DEMAA
｜FB｜IG｜Tiktok｜Matter｜Popdaily｜
© 窩DEMAA｜數位生產力
