Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

我習慣用 Notion 做專案管理,在寫一些公司文件時,免不了要用到圖表。以往都是在其他圖表網站做好,再內嵌到 Notion 裡,但這種的步驟過於繁複,後來發現 Notion 有支援 mermaid 語法,可以直接繪製圖表,也能直接在 Notion 修改,非常的方便!

關於 Mermaid

Mermaid(小美人魚 >/////<),是基於 JavaScript 的繪圖和圖表工具。它的獨特之處在於,使用者可以通過一種類似於 Markdown 的語法來描述圖表的結構和元素。這種語法使得使用者能夠更加直觀地定義和修改圖表,而不需要複雜的繪圖工具或圖形編輯器。

Mermaid 的官方網站,有非常詳細的語法以及圖表介紹

▼ 用 mermaid「寫」出來的流程圖表,簡單易懂

在 Notion 使用 mermaid 語法

▼ 我們先選擇 code 格式

▼ code 樣板的左上角可以選擇語言,點選後輸入 mermaid 快速搜尋,就能找到 Mermaid 的語法了

▼ 右邊的 Split 選單,是讓你選擇要不要顯示 mermaid 語法?還是只顯示圖表結果?

  • code:只顯示 mermaid 語法
  • Preview:只顯示圖表
  • Split:兩個都顯示 (如範例圖的右側畫面)

Notion 的 Mermaid 樣式跟 Mermaid 官網的有點不一樣,但語法都是相通的,所以直接使用不會有任何問題。

使用 Mermaid 的好處,就是可以即時在 Notion 觀看與修改,非常方便。

而且以前使用內嵌圖表,如果圖表太大還需要不斷放大縮小,使用上非常麻煩,現在使用 Mermaid 直接在 Notion 上看,就不會有這種困擾了。

不會寫 Mermaid 語法怎麼辦

如果怎樣都學不來 Mermaid 語法,但又很想用該怎麼辦?有兩個小技巧可以幫助我們:

1. 從 Mermaid 官網複製語法再修改

如果你對 Mermaid 的語法還不太熟悉,可以直接到 Mermaid 官方網站找到相關的範例,然後複製過來再進行修改。這樣一來,你就能夠看到實際的語法應該長什麼樣子,然後依照自己的需求進行微調。

▼ 官方網站有非常完整的語法與範例,先找到想要的圖表類型,再複製裡面的語法做修改

2. 請 ChatGPT 幫你產生語法

如果你真的對 Mermaid 語法一點頭緒都沒有,別擔心,我們還有 ChatGPT 可以用!我們可以向 ChatGPT 提問,告訴他想要的圖表類型,他會生成相應的 Mermaid 語法,我們只要專心使用 Mermaid 創作圖表就可以了。

這邊也提供幾個很簡單的 Prompt 供大家參考,可以先讓 ChatGPT 幫你生成圖表後,再跟他討論,慢慢修改成自己想要的樣子

Chat GPT Prompt 參考

  1. 基本圖表:
    • 提示:「我想要一個簡單的流程圖,包含開始、中間步驟和結束。請幫我生成相應的 Mermaid 語法。」
  2. 時序圖:
    • 提示:「我需要一個時序圖,描述 A 和 B 之間的交互。可以幫我生成 Mermaid 語法嗎?」
  3. 組織結構圖:
    • 提示:「我正在寫一篇組織架構的文章,需要一個組織結構圖。請使用 Mermaid 生成適合的語法。」
  4. 甘特圖:
    • 提示:「我計劃一個專案,想要一個清晰的甘特圖。能幫我生成相應的 Mermaid 語法嗎?」
  5. 流程控制圖:
    • 提示:「我需要一個描述流程控制的圖表,包括條件和迴圈。能生成相應的 Mermaid 語法嗎?」

3. MUKI 提供的 Notion 範例

我有提供一個簡單的 Notion 文件,裡面有放一些用 mermaid 做的圖表,大家也可以參考看看。

不過我自己實測後,發現象限圖無法使用中文,有點可惜,希望以後能支援

Notion 圖表範例

https://mukiwu.notion.site/0f022946deb547a3bd4b5dd0ec4cb1cc

內含範例:流程圖,樹狀圖,圓餅圖,甘特圖,序列圖,象限圖

以上方法,希望對大家使用 Mermaid 有所幫助,讓我們可以更輕鬆地製作圖表,有任何問題也歡迎留言回覆,謝謝。

歡迎給我點鼓勵,讓我知道你來過 :)

35
2
6
Subscribe
Notify of
guest

0 則留言
Inline Feedbacks
View all comments