我們之前談到圖解是 PM 的第二語言。光靠文字文件，很容易讓需求被誤解：工程師想的是 API，設計師想的是畫面，主管想的是時程。結果就是 PM 明明準備了厚厚的 PRD，卻換來三種不同的質疑聲音。

圖解能解決這個問題。但過去畫圖的方式實在太麻煩：流程圖要開 Visio、專案排程的圖要用 MS Project來匯出、腦力激盪還要用專門的心智圖軟體來處理。到最後，畫個圖比改個需求還累。

現在不一樣了。你只需要下好 Prompt，讓 ChatGPT 幫你輸出 Mermaid 語法，接著，再貼到 Mermaid Live Editor，就能立刻渲染成圖方便下載回來使用。這種做法不只快速，還能快速修改：需求一旦更新，只要改語法就能重新生成。

一加一大於二，善用工作流來自動化做圖解

過去，PM 為了做出好的圖解，常需要在各種軟體間切換：Visio 畫流程、OmniGraffle 做架構、MS Project 管排程。結果是效率低、檔案散落、維護困難。

現在流程大幅簡化。我們只需將相關語意輸入 ChatGPT，並請它以 Mermaid 格式輸出，就能快速產生初步的圖解。

不過，在開始之前，需要先了解這個工作流程會用到的幾個關鍵字各是代表什麼意思，以下逐一說明。

一、Mermaid 語法

Mermaid 是一種文字式繪圖語法，開源且免費，支援流程圖、序列圖、甘特圖、心智圖等。只要用簡單的語法就能生成圖表，適合用於需求文件與專案說明。

二、ChatGPT 在此工作流中的角色

在以前要使用 Mermaid 語法，你必須要懂一點程式，現在，ChatGPT 能將自然語言描述轉換成 Mermaid 語法。你只需要把需求寫出來，ChatGPT 就能幫你整理成程式碼格式，省去手動撰寫語法的麻煩。

三、Mermaid 編輯器

Mermaid Live Editor 是其中一種支援 mermaid 語法的線上即時編輯器，可以將 Mermaid 語法直接渲染成圖表。你只需要把程式碼貼進去，就能立即看到圖形，還能複製或匯出，用於文件或簡報。

四、Whimsical GPTs

Whimsical GPTs 是由 Whimsical 在 ChatGPT 環境中實作的 GPTs。它能讓你透過對話，快速生成流程圖、泳道圖或心智圖，適合在會議中即時出草稿，邊說邊畫，幫助團隊快速建立共識。

這篇文章我們先專注在 Mermaid 的使用，Whimsical GPTs 的細節之後有機會，我會在單獨寫一篇教學。

常見圖解的 AI 實戰

了解了這個工作流的基本邏輯之後，接下來， 我們就試試看使用這個工作流來產出圖解吧！

1. 流程圖（Flowchart）

流程圖是最常見、最直覺的圖解，用來描述「步驟」與「分支邏輯」。它的重點在於把 如果…那就… 的情境清楚攤開。

情境：需求文件常寫「使用者先註冊，再驗證，再登入」。聽起來很清楚，但工程師立刻會問：「如果驗證失敗呢？」「第三方登入怎麼辦？」這時候，一張流程圖能避免腦補。

你可以直接口語的貼上文字，讓 ChatGPT 幫你處理脈絡，不過，還是建議盡量用「如果…那就…」的語句，AI 更容易生成正確的分支。

Prompt 示範：

請將以下需求轉換成 Mermaid 流程圖：

使用者在註冊時，若驗證成功，系統會將其導向登入頁；若驗證失敗，則顯示錯誤訊息並讓使用者返回註冊頁重新嘗試。如果連續五次驗證失敗，帳號將被鎖定一小時。在這段時間內，使用者若嘗試登入，系統會提示需等待一小時後才能再次操作。

產出結果：

flowchart TD
    A[使用者註冊] --> B{驗證成功?}
    B -- 是 --> C[導向登入頁]
    B -- 否 --> D[增加失敗次數計數器]
    D --> E{失敗次數 < 5?}
    E -- 是 --> F[顯示錯誤訊息並返回註冊頁]
    E -- 否 --> G[帳號鎖定 1 小時]

    %% 鎖定後或一般登入嘗試
    H[使用者嘗試登入] --> I{帳號被鎖定?}
    I -- 是 --> J[提示需等待 1 小時後再嘗試]
    I -- 否 --> K[正常登入流程]
    
    %% 顯示流程連結
    G -.-> H
    C -.-> H

取得 Mermaid 語法後，只需將程式碼貼到 Mermaid Live Editor，即可預覽圖形，並將生成的圖另存使用。

2. 泳道圖（Swimlane）

泳道圖是在流程圖基礎上，進一步把「不同角色」分到各自的泳道裡。它的重點在於清楚標示 誰該做什麼，避免責任不清。

情境：跨部門合作時，最常見的誤會就是「我以為這步驟是你做」。泳道圖能把責任邊界清楚劃分。

Prompt 示範：

請生成一個 Mermaid 流程圖，並用 subgraph 模擬泳道：

角色：顧客、服務員、收銀、廚房、客服

流程：
顧客點餐：服務員接單並輸入系統 → 系統傳送訂單至廚房。
廚房備餐：廚房根據訂單準備餐點 → 完成後放至出餐口。
上菜：傳菜員/服務員取餐 → 送至顧客桌。
顧客用餐後：可能追加點餐或呼叫服務員 → 服務員與廚房再次協作。
結帳：顧客用餐完成後 → 收銀完成結帳 → 若有問題由客服/經理介入。

產出結果：

flowchart LR
  %% 方向：從左到右
  %% 泳道（以 subgraph 模擬）

  subgraph L1[顧客]
    C1[點餐]
    C2{用餐後追加點餐或呼叫服務員？}
    C3[用餐完成]
    C4[有問題/申訴]
  end

  subgraph L2[服務員]
    S1[接單並輸入]
    S0[(POS/點餐系統)]
    S2[取餐（出餐口）]
    S3[上菜至桌]
    S4[再次接單/協作]
  end

  subgraph L3[廚房]
    K1[依訂單備餐]
    K2[完成→放至出餐口]
  end

  subgraph L4[收銀]
    R1[完成結帳]
  end

  subgraph L5[客服]
    CS1[客服/經理介入處理]
  end

  %% 主要流程
  C1 --> S1 --> S0 --> K1 --> K2 --> S2 --> S3 --> C2
  C2 -- 是（追加/呼叫） --> S4 --> S0 --> K1
  C2 -- 否 --> C3 --> R1
  R1 --> C4
  C4 --> CS1

  %% 美化（可選）
  classDef customer fill:#fff7e6,stroke:#e6a23c,stroke-width:1px,color:#333;
  classDef staff fill:#e6f7ff,stroke:#409eff,stroke-width:1px,color:#333;
  classDef kitchen fill:#f0f9eb,stroke:#67c23a,stroke-width:1px,color:#333;
  classDef cashier fill:#fef0f0,stroke:#f56c6c,stroke-width:1px,color:#333;
  classDef support fill:#f5f7fa,stroke:#909399,stroke-width:1px,color:#333;

  class C1,C2,C3,C4 customer;
  class S1,S0,S2,S3,S4 staff;
  class K1,K2 kitchen;
  class R1 cashier;
  class CS1 support;

註：Mermaid 的語法中，並沒有真正嚴格意義上的「泳道圖」，所以這邊只能先以模擬的方式生成出來方便討論，待確定沒問題後，可再用其他轉譯的方式畫出真正的泳道圖。

3. 序列圖（Sequence Diagram）

序列圖用來描述「系統之間的互動順序」，就像一份對話紀錄。它的重點在於顯示 誰先呼叫誰，避免邏輯錯亂。

情境：在 API 串接的需求裡，順序錯誤就是災難。序列圖能像聊天紀錄一樣，明確顯示「誰先呼誰」。

Prompt 示範：

請將以下的流程轉成 Mermaid 序列圖：
Apple SSO 的 API 流程

產出結果：

sequenceDiagram
    participant U as User
    participant A as App(前端)
    participant B as Backend(伺服器)
    participant AS as Apple 授權伺服器
    participant JWKS as Apple 公鑰(JWKS)

    U->>A: 點擊 Sign in with Apple
    A->>AS: Authorization Request\nresponse_type=code\nscope=email name\nclient_id, redirect_uri, state, nonce
    AS-->>U: 登入/同意畫面
    U->>AS: Apple ID 驗證並授權
    AS-->>A: 授權碼 code (redirect_uri 搭配 state)

    A->>B: 將 code 傳給後端
    B->>AS: 交換 Token (POST /auth/token)\ngrant_type=authorization_code\ncode, client_id, client_secret(JWT)
    AS-->>B: Token Response\nid_token, access_token, refresh_token

    B->>JWKS: 取得 Apple JWKS
    JWKS-->>B: 公鑰集合
    B->>B: 驗簽 id_token 並檢查 iss/aud/exp/nonce
    B-->>A: 回傳 Session 或 App 專用 JWT
    A-->>U: 登入成功

    A->>B: 以 Session/JWT 存取 API
    B-->>A: 回應受保護資源

    B->>AS: 刷新 Token (grant_type=refresh_token)
    AS-->>B: 新 access_token

    A->>B: 登出請求
    B->>AS: 撤銷 Token (POST /auth/revoke)
    B-->>A: 登出完成

4. 時程圖（Timeline / Gantt）

甘特圖是專案管理的經典工具，用來規劃排程與顯示依賴關係。它的重點在於 什麼時候做什麼、誰依賴誰。

情境：主管最關心的不是「怎麼做」，而是「什麼時候能交付」。甘特圖能把專案排程與依賴關係一目了然。

Prompt 示範：

請將以下專案排程轉換成 Mermaid 甘特圖：

9月10號一開始先開主題與講者確認會議，這件事是所有後面工作的基礎，沒有先確定主題和講者，後面完全動不了，會議大概持續討論和確認到9月11號。

主題講者一旦確認下來，就要做講座宣傳文案撰寫，這件事需要一點時間反覆修改，預計9月12號到9月14號才能搞定。

在文案撰寫還在進行時（9月13號左右）就可以同步展開場地租借洽談，租借談判和簽約過程比較繁瑣，會拉到9月15號。

等文案完成後（9月14號結束），接下來做宣傳設計排版，排版跟調整排在9月15號到9月17號。
宣傳設計排版一完成，就能啟動社群平台宣傳發布，排在9月18號到9月19號之間進行，讓大家有兩天能看到訊息。

同時間，場地確定後（9月15號）就可以開始設備租借與場佈規劃，這個環節會持續到9月18號。

等到宣傳發布過一天（大約9月19號）就進行報名系統確認與名單初審，名單初審排在9月19號到9月20號。

9月20號當天早上還需要做一場講座流程彩排，這要在設備場佈和報名名單都搞定後才行。
最後9月20號下午就是正式講座舉辦，所有任務都得在這之前完成。

產出結果：

gantt
    title 講座專案排程
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d

    section 前期準備
    主題與講者確認會議     :a1, 2025-09-10, 2d

    section 宣傳內容
    宣傳文案撰寫         :a2, after a1, 3d
    宣傳設計排版         :a3, after a2, 3d
    社群平台宣傳發布       :a4, after a3, 2d

    section 場地與設備
    場地租借洽談         :b1, 2025-09-13, 3d
    設備租借與場佈規劃     :b2, after b1, 4d

    section 報名與執行
    報名系統確認與名單初審 :c1, 2025-09-19, 2d
    講座流程彩排         :c2, 2025-09-20, 0.5d
    正式講座舉辦         :milestone, c3, 2025-09-20, 0d

Tip：依賴性是關鍵。例如「設備租借與場佈規劃」必須等「場地租借洽談」都完成才能開始，如果前者延遲一週，那麼後面有依賴關系的項目全部都會被迫延遲。Excel 表格很難看出這種關聯，但甘特圖能用箭頭清楚顯示。

5. 決策樹（Decision Tree）

決策樹把複雜的規則拆解成一層一層的分支。它的重點在於讓條件判斷清晰可視化，避免用文字堆疊成超複雜的邏輯題。

情境：當規則越來越複雜，光用文字描述會讓人瘋掉，決策樹能把條件逐層展開。

Prompt 示範：

請生成一個 Mermaid 決策樹，規則如下：
1. 管理員 → 顯示全部功能
2. 一般會員 → 顯示標準功能
3. 訪客 → 只能瀏覽公開頁面
4. 新註冊三天內 → 額外導覽教學

產出結果：

flowchart TD
    A[使用者身份] --> B{角色}
    B -->|管理員| C[顯示全部功能]
    B -->|一般會員| D[顯示標準功能]
    B -->|訪客| E[只能瀏覽公開頁面]

    D --> F{註冊時間}
    F -->|新註冊三天內| G[額外導覽教學]
    F -->|註冊超過三天| H[不顯示導覽教學]

這樣的圖對工程師來說，是「程式邏輯的可視化版本」；對測試人員來說，也能快速推導出測試案例，避免遺漏情境。

6. 心智圖（Mind Map）

心智圖是一種發散性工具，適合整理零散的想法。它的重點在於把 主題 → 分支 → 子分支 條理化，幫助腦暴與需求歸納。

情境：Kickoff 或腦力激盪 Workshop 後，大家丟了一堆想法，最後散落一地沒人整理，此時，心智圖能在短時間內整理全貌。

Prompt 示範：

請將以下 app 的功能想法整理成 Mermaid 心智圖：

//直接餵給 ChatGPT 大家在口語討論時的逐字稿
嗯…這個健身APP要能用手機或平板的相機直接看你現在做的動作，比如深蹲、伏地挺身或是舉啞鈴，然後自動辨識出你正在做什麼動作。
如果你深蹲姿勢錯了，它要立刻跳出提醒說「膝蓋不要超過腳尖」之類的，不是事後才告訴你，是當下就要指出問題。
同時還要有一個虛擬教練，他應該在畫面上或用語音跟你說「很好，保持核心收緊」，或者「手臂再抬高一點」，像真人在旁邊一樣。

另外，這APP不只是辨識動作，最好能記錄你的運動次數和時間，然後自動幫你算出卡路里消耗。
可以有一些訓練計畫或課表，像是三天一循環的肌群訓練或是新手居家健身方案，讓使用者不用自己設計菜單。
還有，應該能根據你之前做得怎麼樣來調整難度，比如你一直深蹲都標準，APP就會建議增加重量或次數。

社群分享功能好像也需要吧？有的人可能想要把自己的紀錄分享到朋友群或是跟別人比賽。
有些人不一定會一直看螢幕，所以可能要有語音提示，比如「還剩五下」或「完成一組」。
最好還能提供動作示範影片，讓初學者看一次就知道怎麼做。
如果動作一直錯，APP應該能提供糾正建議，例如「收緊腰背」或「換輕一點的重量」。
哦，還要有進度圖表和報表，顯示你這週做了哪些運動、強度如何。

也許可以加一些遊戲化的東西，比如完成每日挑戰會有虛擬獎章，或者有排行榜。
最後，虛擬教練應該能用不同角色或語氣，像溫柔鼓勵型或嚴厲督促型，讓人比較有動力。
還有語音辨識也許可以加進去，像是你可以直接說「開始胸推」它就進入那個模式。

結果產出：

mindmap
  root((健身 APP 功能))
    動作辨識
      使用手機/平板相機偵測動作
      自動辨識運動類型(深蹲、伏地挺身、舉啞鈴)
      即時姿勢糾正(例如「膝蓋不要超過腳尖」)
    虛擬教練
      畫面或語音即時回饋(「很好，保持核心收緊」)
      不同角色/語氣(溫柔鼓勵型、嚴厲督促型)
    運動紀錄與分析
      記錄運動次數和時間
      自動計算卡路里消耗
      進度圖表與報表(週運動量、強度)
      根據表現調整難度(建議加重或增加次數)
    訓練計畫
      提供課表(如三天循環肌群訓練)
      新手居家健身方案
    提示與輔助
      語音提示(「還剩五下」、「完成一組」)
      動作示範影片
      錯誤動作糾正建議(「收緊腰背」、「換輕一點重量」)
    社群與互動
      分享運動紀錄到社群或朋友群
      與他人比賽
      遊戲化元素(每日挑戰、虛擬獎章、排行榜)
    語音控制
      語音辨識指令(「開始胸推」)

這裡僅作為初步展示，所以簡單粗暴的直接丟上去逐字稿；實務上進行專案討論時，則會建議還是先將逐字稿用 ChatGPT 先行梳理出關鍵功能及使用情境(如前幾篇文章介紹到的腦力激盪工作流)，最後才將這些內容轉換為心智圖格式。

實戰小技巧

1. 用「逐步輸入」比一次丟所有需求更準確。
2. 圖生成後要快速人工檢查，避免漏分支或 AI 產出錯誤的東西讓 member 誤解。
3. 必要時保留原始 Prompt 與語法，需求更新時能直接重跑。
4. 文件維護時，可以把 Mermaid 語法直接放進 Notion、Confluence、GitHub，讓圖和文件一起演進。
5. mermaid 語法在支援中文的部份有一些要注意的語法上的坑，如果一直遇到syntax error，試試看請 ChatGPT 先把內容都轉為英文。

善用 Notion：讓 Mermaid 語法直接變成文件裡的圖

我習慣把專案需求、會議紀錄、設計討論都集中在 Notion。好消息是，Notion 已經原生支援 Mermaid 語法。

這代表什麼呢？好消息！你不需要每次都去 Mermaid Live Editor 貼程式碼再下載圖回來用了。

步驟如下：

1. 只要在 Notion 的文件區塊先建立 mermaid 區塊 (手鍵入 /mermaid 就可選擇)

   

2. 接著直接貼上從 ChatGPT 得到的 mermaid 結果即可：

3. 很快地，Notion 就會自動幫你渲染成圖表，隨文件即時更新。

   

這樣一來，需求文件本身就能帶著活的圖解，不用再來回貼圖或重繪。每次修改流程時，只要改幾行語法，圖就會自動刷新，文件與圖始終保持一致。

快速製作圖解，降低溝通障礙

ChatGPT + Mermaid 讓 PM 不必再受制於笨重的工具。只要寫需求，就能順便生成圖，快速又可維護。

學好圖解這個第二語言之外，也要增進製作效率，就可以讓我們達到即時溝通、快速更新，高效達到團隊共識。