3 分鐘打造資訊圖表 - ChatGPT + Mermaid 輕鬆提升生產力

Apr 20, 2023

^{_{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

flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

2. 時間軸 Timeline

timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter

3. 甘特圖 Gantt

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

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

5. 用戶旅程 User Journey

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。

その他 Others

以下就不詳述了，請直接參考官網教學:

循序圖 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 可以參考這樣下:

# ChatGPT prompt for markdown
provide summary in bullet point and in markdown codeblock:

# ChatGPT prompt for Mermaid
provide summary mermaid diagram in markdown codeblock:

拿到以下 markdown:

- Overview
- 什麼是 Mermaid
    1. 流程圖 Flowchart
    2. 時間軸 Timeline
    3. 甘特圖 Gantt
    4. 圓餅圖 Pie chart
    5. 用戶旅程 User Journey
    6. 心智圖 Mindmaps
    7. 其他 Others
- ChatGPT + Mermaid 實際應用
- 其他工具
- 你怎麼看?

貼到 markmap 產生的心智圖就是本篇的封面圖片了。

Mermaid 版本用流程圖反而比較是我慣用的樣子:

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 Extension
1. Markdown Preview Mermaid Support
2. Markmap

你怎麼看?

留下你的想法一起討論吧! 🥳

Murmur

2023-04-20: Everything as Code 信仰 🤣

ProgramMur 程序猿碎念 - 技術分享

Discussion about this post