ChatGPT 怎麼畫流程圖和做圖表：Mermaid 流程圖預覽、上載數據做柱狀圖折線圖、改顏色和下載

本文根據 OpenAI 幫助中心《Working with writing blocks and code blocks in ChatGPT》《Extracting Insights with ChatGPT Data Analysis》和 Mermaid 官方文檔整理，資料核對於 2026-10-14。兩張官方截圖引自幫助中心，為英文介面，截圖裏的數據是官方的演示數據；其餘配圖為本站整理的示意圖。

適用於誰

• 想讓 ChatGPT 畫一張流程圖（業務流程、審批流程、操作步驟）的人；
• 手裏有 Excel 或 CSV，想讓它直接做成柱狀圖、折線圖、餅圖的人；
• 圖已經出來了，想改顏色、放大、下載成圖片的人。

結論先說

1. ChatGPT 裏畫圖有兩條路，別混在一起：

• 流程圖、關係圖：讓它輸出 Mermaid 代碼，放在代碼塊裏，點代碼塊上的 Preview（預覽），圖就直接顯示在 ChatGPT 裏。官方說明代碼塊支持預覽的類型包括 HTML 頁面、React 組件、SVG 圖像、Mermaid 圖、Vega 或 Vega-Lite 圖表。
• 數據圖表：上載表格後讓它做圖。官方列出的類型有折線圖、柱狀圖、餅圖、直方圖、散點圖、箱線圖、熱力圖、面積圖、雷達圖、樹狀圖、氣泡圖、瀑布圖；你不指定，它自己選合適的。

1. 沒有 Preview 按鈕不是你的問題。 官方原話的意思是：如果 Preview 沒有出現，說明這個代碼塊不支持預覽。另外，哪些操作可用還取決於代碼塊類型、裝置、套餐、工作區設定和帳號是否開通了這個功能。
2. 交互圖只有四類：官方說，目前大多數情況下只有柱狀圖、餅圖、散點圖、折線圖是可交互的；其他類型以靜態圖片返回。
3. 圖表的右上角有三個操作：下載（預設 PNG）、設定（改顏色、開關交互）、放大。
4. 圖畫出來要核對。 圖是根據你給的數據和描述生成的，數字、座標軸、圖例都要自己檢查一遍再用。

圖：本站根據 OpenAI 幫助中心：Working with writing blocks and code blocks in ChatGPT 與 Extracting Insights with ChatGPT Data Analysis 整理的示意圖

一、畫流程圖：讓 ChatGPT 輸出 Mermaid，點 Preview

步驟

1. 說清楚流程：告訴它起點、每一步做什麼、哪裏要判斷、判斷後分別去哪、終點是什麼；
2. 指定輸出格式：讓它「用 Mermaid 的 flowchart 語法，只輸出一個代碼塊」；
3. 點代碼塊上的 Preview：官方說，對支持的代碼塊，點 Preview 可以在 ChatGPT 裏查看結果；
4. 不滿意就改：可以直接編輯代碼塊，也可以讓 ChatGPT 幫你改；支持的代碼塊還能全屏打開，在 Code 和 Preview 之間切換；
5. 改動會儲存在對話裏：官方說，支持的代碼塊裏的編輯會在短暫延遲後隨對話儲存，後續追問時 ChatGPT 會用最新版本。注意在臨時聊天（Temporary Chat）裏，對話結束後編輯可能不會保留，見 /guides/chatgpt-temporary-chat。

圖：本站根據 OpenAI 幫助中心：Working with writing blocks and code blocks in ChatGPT 整理的示意圖

可複製的指令

請用 Mermaid 的 flowchart 語法畫一張流程圖，只輸出一個代碼塊。方向自上而下。流程是：收到退貨申請 → 判斷是否在 7 天內 → 是：安排取件；否：告知不支持 → 取件後驗貨 → 判斷商品是否完好 → 完好：退款；不完好：聯絡客戶協商。所有節點文字用中文，並用英文雙引號括起來。

寫清「判斷」和「去向」，是為了讓圖裏的菱形判斷節點接出兩條帶文字的箭頭，不會漏分支。

一個 Mermaid 示例

下面是一個按 Mermaid 官方語法寫的示例，可以直接貼給 ChatGPT 當參照，也可以讓它照這個樣子改：

mermaid
flowchart TD
    A["開始"] --> B{"訂單已付款嗎"}
    B -->|是| C["安排發貨"]
    B -->|否| D["提醒付款"]
    D --> B
    C --> E["結束"]

對照下面的表讀懂各部分：

圖：本站根據 Mermaid 官方文檔：Flowcharts - Basic Syntax 整理的示意圖

要點：

• 第一行聲明圖的類型和方向：flowchart TD（自上而下）或 flowchart LR（自左向右）。官方文檔說，flowchart 也可以寫成 graph；
• 節點：id1[文字] 是方框，id1(文字) 是圓角，id1{文字} 是判斷用的菱形；
• 中文要加英文雙引號：Mermaid 官方文檔說，Unicode 文字用英文雙引號括起來，所以上面示例的節點文字都寫成了 ["開始"] 這樣；
• 箭頭上的文字：A-->|文字|B，或者 A-- 文字 -->B；
• 兩個容易出錯的地方：節點裏寫全小寫的 end 會讓圖出錯，要寫成 End 或 END；連接節點的名字如果以字母 o 或 x 開頭，要加空格或大寫，否則 A---oB 會被解析成圓形端點的線。

想用 Mermaid 畫思維導圖，見 /guides/chatgpt-mind-map-mermaid。

沒有 Preview，或者預覽出錯

• 沒有 Preview：官方說明這個代碼塊不支持預覽；確認你讓它輸出的是 Mermaid 代碼塊，而不是普通文字；
• 點了 Preview 報錯：先看上面「兩個容易出錯的地方」，再把錯誤訊息或代碼貼回給 ChatGPT，讓它修；
• 預覽要用外部資源時：官方說，預覽和運行使用沙箱環境，可能會先請求你的許可；工作區管理員也可以控制是否允許；
• 想把圖用到別處：把 Mermaid 代碼複製出來，放進支持 Mermaid 的工具裏，具體怎麼導出以那個工具的說明為準（官方這篇文章沒有寫導出為圖片的步驟）。

二、做數據圖表：上載文件，讓它生成

步驟

1. 上載表格：把 Excel 或 CSV 傳給 ChatGPT，上載方法和限制見 /guides/chatgpt-excel-data-analysis；
2. 用大白話提要求：官方說，你可以讓 ChatGPT 自己決定最合適的圖表類型，也可以在指令裏直接說要哪一種；
3. 看圖、必要時追問：比如「改成按月份的折線圖」「把前三名標出來」；
4. 用右上角的圖標操作：官方說，圖表右上角可以下載或放大，下載的圖表預設是 PNG 格式；也可以改顏色、開關交互。

圖片來源：OpenAI 幫助中心：Extracting Insights with ChatGPT Data Analysis

可複製的指令

請根據我上載的表格，畫一張折線圖：橫軸是月份，縱軸是銷售額，標題寫「2026 年各月銷售額」。如果有缺失值，先告訴我怎麼處理的。

先看看這份數據適合用什麼圖表展示，給我兩種方案，再按你推薦的那種畫出來。

能畫哪些類型，哪些能交互

官方列出的類型：折線圖、柱狀圖、餅圖、直方圖、散點圖、箱線圖、熱力圖、面積圖、雷達圖、樹狀圖、氣泡圖、瀑布圖。其中大多數情況下，只有柱狀圖、餅圖、散點圖、折線圖是交互式的（可以懸停查看數值）；其他類型是靜態圖片。

改顏色、開關交互

官方說，在圖表右上角可以：

• 切換圖表的交互開關；
• 改顏色：可以選官方的預設顏色，也可以輸入顏色的十六進制值（比如截圖裏的 0000FF）。

圖片來源：OpenAI 幫助中心：Extracting Insights with ChatGPT Data Analysis

數據本身的問題

官方說，ChatGPT 能識別和處理數據裏常見的問題：缺失值、異常值、重複行、數據類型不對。想先查一遍，可以用官方推薦的提示：「Check this data for common issues.」（中文說「檢查這份數據有沒有常見問題」即可）。

關於圖裏的中文標籤：官方這篇文章沒有討論中文顯示的問題。如果標籤顯示異常，本站的建議是先讓它重新生成一次，說明「標籤用中文」；仍不行就先用英文標籤，再自己替換。

常見問題

Q：ChatGPT 能直接畫一張圖片版的流程圖嗎？

官方文檔裏講的是兩條路：Mermaid 代碼塊預覽，和上載數據做圖表。直接畫一張圖片式的流程圖，可以用生圖功能，但改起來不如代碼塊方便，需要精確文字時建議走 Mermaid；生圖裏寫中文的情況見 /guides/chatgpt-image-chinese-text。

Q：Preview 裏能直接編輯嗎？

官方說支持的代碼塊可以直接編輯，也可以讓 ChatGPT 幫你改；改動會隨對話儲存。

Q：圖表能下載成什麼格式？

官方說預設是 PNG。表格下載是 CSV。

Q：我沒上載文件，也能出圖表嗎？

官方這篇文章講的是上載文件之後生成圖表；普通回答裏能否直接出圖表以你帳號裏實際看到的為準。

Q：做 PPT 或 Word 裏要用的圖表怎麼辦？

先在 ChatGPT 裏生成並下載 PNG；需要文檔裏的整套內容，見 /guides/chatgpt-create-word-excel-ppt 和 /guides/chatgpt-make-ppt-prompts。

Q：免費帳號能用嗎？

官方說明這些操作取決於套餐、裝置和帳號的開通情況，哪些可用以你帳號裏實際看到的為準。想了解各套餐差別，見 /guides/chatgpt-plans-comparison；要開通 ChatGPT Plus，可以看 /chongzhi/chatgpt-plus。

參考資料

• OpenAI 幫助中心：Working with writing blocks and code blocks in ChatGPT — https://help.openai.com/en/articles/20001246-working-with-writing-blocks-and-code-blocks-in-chatgpt
• OpenAI 幫助中心：Extracting Insights with ChatGPT Data Analysis — https://help.openai.com/en/articles/9213685-extracting-insights-with-chatgpt-data-analysis
• Mermaid 官方文檔：Flowcharts - Basic Syntax — https://mermaid.js.org/syntax/flowchart.html