Overview 3 分鐘打造資訊圖表 - ChatGPT + Mermaid 輕鬆提升生產力
前一回在 ChatGPT 實戰 - 3 招加速知識產出 分享了運用 ChatGPT 或其他 AI 來輔助 “消化資料, 重新詮釋, 社群貼文 ” 的 3 個部分。這次來分享我實務中使用的圖表工具與結合方式，希望能幫助到愛用視覺化呈現說明邏輯的朋友。
其實這類 diagram as code 工具出來很久了，只是剛好 ChatGPT 讓這件事情更輕鬆。
今天介紹的工具特色:
🌐 線上網頁即可免費使用 🚀 快速產生流程圖、心智圖、圓餅圖、甘特圖、時間軸、用戶旅程等等圖表 📝 使用 markdown 語法，無工程背景亦可簡單上手，方便版本控制 🤔 Q: 你會使用 ChatGPT + Mermaid 來協助製作哪些平常工作的什麼資訊圖表呢？
💪 A: 挑選一個範例，實際到線上編輯器畫一張圖表
什麼是 Mermaid 基於 JavaScript 的圖表工具，呈現 Markdown 語法，讓使用者能動態創建和修改圖表。
官方直接提供了線上編輯器 Mermaid Live Editor 。
Mermaid 官方教學文件 有各種語法可以參考。大概可以繪製 15 種圖表，以下分成兩類展示:
一般
1. 流程圖 Flowchart 1
2
3
4
5
6
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
2. 時間軸 Timeline 1
2
3
4
5
6
7
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : Youtube
2006 : Twitter
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : Youtube
2006 : Twitter
3. 甘特圖 Gantt (甘特圖在手機上看到的圖片可能會怪怪的，使用電腦查看網頁不會有問題。)
1
2
3
4
5
6
7
8
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
4. 圓餅圖 Pie chart 1
2
3
4
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
5. 用戶旅程 User Journey 1
2
3
4
5
6
7
8
9
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 3: Me
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 3: Me
6. 心智圖 Mindmaps 因為我不習慣用網狀展開的 mindmap，所以我自己是使用 markmap 產生 mindmap。
其他工程相關 以下就不詳述了，請直接參考官網教學 :
循序圖 Sequence 類別圖 Class 狀態圖 State 實體關聯性模型圖 ER Diagram 🔥 Git 圖 Gitgraph C4 模型 C4C diagram ChatGPT + Mermaid 實際應用 你可能會想說，mermaid markdown 語法看起來還是有點複雜。沒錯！所以才要讓 ChatGPT 來幫助我們產生語法範本。建議挑選 ChatGPT 擅長的任務，像是生成、總結、翻譯等等。
我這邊舉例用 Markmap 的心智圖比較方便，Mermaid 也是依樣畫葫蘆。所以我們就能在 3 分鐘內做到以下事情:
🤖 ChatGPT : 使用 Prompt 產生需要的內容。 📝 Mermaid Live Editor 線上編輯器 : 直接丟進 mermaid 產生圖表。 🎉 完成！ 比如說想要總結這篇文章，Prompt 可以參考這樣下:
1
2
3
4
5
# ChatGPT prompt for markdown
# ChatGPT prompt for Mermaid
拿到以下 markdown
1
2
3
4
5
6
7
8
9
10
11
12
- Overview
- 什麼是 Mermaid
1. 流程圖 Flowchart
2. 時間軸 Timeline
3. 甘特圖 Gantt
4. 圓餅圖 Pie chart
5. 用戶旅程 User Journey
6. 心智圖 Mindmaps
7. 其他 Others
- ChatGPT + Mermaid 實際應用
- 其他工具
- 你怎麼看?
貼到 markmap 產生的心智圖就是本篇的封面圖片了。
Mermaid 版本用流程圖反而比較是我慣用的樣子:
1
2
3
4
5
6
7
8
9
10
11
12
graph LR
A[概述] --> B[什麼是 Mermaid];
B --> C[流程圖 Flowchart];
B --> D[時間軸 Timeline];
B --> E[甘特圖 Gantt];
B --> F[圓餅圖 Pie chart];
B --> G[用戶旅程 User Journey];
B --> H[心智圖 Mindmaps];
B --> I[其他 Others];
A --> J[ChatGPT + Mermaid 實際應用];
A --> K[其他工具];
A --> L[你怎麼看?];
graph LR
A[概述] --> B[什麼是 Mermaid];
B --> C[流程圖 Flowchart];
B --> D[時間軸 Timeline];
B --> E[甘特圖 Gantt];
B --> F[圓餅圖 Pie chart];
B --> G[用戶旅程 User Journey];
B --> H[心智圖 Mindmaps];
B --> I[其他 Others];
A --> J[ChatGPT + Mermaid 實際應用];
A --> K[其他工具];
A --> L[你怎麼看?];
順帶一提，不知道為什麼我用 GPT-3.5 產生的 Mermaid 效果比 GPT-4 來得好。有經驗的朋友可以留言分享一下~
其他工具 Miro : 當我想畫客製化樣式程度再更高一點的方塊圖或其他圖表時，會優先考慮 Miro。我太喜歡大白板了，可以把很多草稿時期的想法跟完成版的擺在一起。diagrams.net (舊稱 draw.io) : 其實改名叫 diagrams.net 但大家還是習慣叫 Draw.io 的圖表工具。優勢在畫完整的架構圖時，有很多內建元件。但拖拉元件對齊真的很痛苦…。Excalidraw : 手繪風格的圖表工具。用過一段時間就轉移到 Miro 去了。PlantUML : 很常拿來跟 mermaid 比的工具。介面比較經典。以前會用，現在很少。vs code extensionMarkdown Preview Mermaid Support Markmap 你怎麼看? 留下你的想法一起討論吧! 🥳
延伸閱讀
ChatGPT 實戰 - 3 招加速知識產出 AIGC 浪潮翻騰 15 週後的 6 大行為改變 OpenAI CEO Sam Altman 生產力 4 招解密 Murmur 2023-04-20: Everything as Code 信仰 🤣 其他相關 