利用ChatGPT生成Mermaid圖表語法並在Notion中使用

先前我個人都是利用一些網路上免費的資源，如Draw.io（教學）或是yEd（教學）繪製流程圖，另外，也有一款是透過寫程式的方式畫流程圖，對於規劃程式交握程序時，覺得相當便利的WebSequenceDiagrams，這幾套免費的線上軟體，基本上已經可以滿足多數軟體工程師工作上的需求。

而這次要介紹的Mermaid，我自己會知道也是一次無意間要畫流程圖，想說既然都有使用Notion的習慣，那當然會希望能夠找到一套結合Notion，又能滿足用程式撰寫流程圖需求的工具。

1. Mermaid簡介與優勢

Mermaid是一種基於Markdown的圖表語法工具，它使得開發者可以通過簡單的文本描述來生成複雜的圖表。這對於需要快速製作流程圖、甘特圖、序列圖等圖表的軟體工程師來說尤其實用。

使用Mermaid的優勢在於它的易用性和靈活性：不需要複雜的圖形設計工具，只需幾行代碼即可生成清晰、專業的圖表。此外，Mermaid與多種編輯器和平台兼容，如Notion、GitHub、VSCode等，這使得它在協作環境中非常便捷。

當然，個人覺得Mermaid最好用的地方在於它的線上資源相當豐富，官方網站的資料已經可以解決多數人80%的應用需求，像是Flowcharts、Sequence diagrams、Class diagrams甚至是Gantt diagrams他都有支援，是不是相當有趣。

這裡也建議第一次用的初學者，可以先大該view一下官網的documents，先知道Mermaid支援那些diagram，有一些簡單的syntax基礎概念就可以了。因為後面的進階工作就交給ChatGPT 就可以了 XD

2. ChatGPT與Mermaid的結合應用

ChatGPT相信大家現在對它應該都不陌生了，它是一個強大的自然語言處理模型，能夠理解並生成人類語言。利用ChatGPT，我們可以將文字描述轉換為Mermaid語法，極大地簡化了圖表創建過程。

例如，你可以向ChatGPT描述一個簡單的流程：「一個用戶註冊流程，包含輸入用戶名、驗證電子郵件、創建密碼」——然後ChatGPT會生成對應的Mermaid語法：

graph TD;
    A[輸入用戶名] --> B[驗證電子郵件] --> C[創建密碼]

這樣，開發者只需關注問題邏輯的描述，而不需要深入學習Mermaid語法，大大提高了工作效率。

3. 在Notion中使用Mermaid圖表

Notion大家應該都不陌生，它是一個強大的筆記和項目管理工具，支持多種內容格式。Notion支援將Mermaid圖表嵌入，可以使你的筆記更加直觀和可視化。以下快速介紹在Notion中嵌入Code的具體步驟：

1. 插入代碼塊：在Notion中，選擇插入一個新的代碼塊。
2. 選擇Mermaid語法：在代碼塊中選擇Mermaid作為語法類型。
3. 粘貼Mermaid代碼：將由ChatGPT生成的Mermaid語法粘貼到代碼塊中，Notion將自動渲染為對應的圖表。

像上面這樣就可以輕鬆地在Notion中添加流程圖、甘特圖等，並且可以隨時編輯和更新，保持內容的動態和一致（Notion教學只是帶過，網路上有相當多的教學資源可以查詢）。

4. 結論 & 新手建議

利用ChatGPT生成Mermaid圖表語法並在Notion中使用，對於希望提高工作效率和協作效率的軟體工程師來說，是一個極佳的工具組合。

對於新手，我建議先熟悉基本的Mermaid語法，理解其生成圖表的基本邏輯。你可以參考Mermaid官方網站上的範例和語法說明，快速掌握基礎知識。然後，嘗試用ChatGPT來生成一些簡單的圖表語法，逐步加深對這種結合應用的理解和掌握。

最後，不得不提一下，拜ChatGPT的問世，大大縮短了工程師學習任何語法的時間，更進階的說，只要你的prompt下的好，你會發現不僅提高了工作效率，還可以輕鬆地把複雜的圖表生成過程變得簡單且有趣。

對如何下正確的prompt有興趣的人，建議可以去參考這篇課程《瞭解原理 + 優質詠唱 = AI 時代人人必學的 ChatGPT 駕馭術》，這堂課從認識AI到如何用正確的方式跟AI溝通，對於初學者來說是相當的淺顯易懂。