學不完．教不停．用不盡

Mermaid 語法是一種輕量級的標記語言，能夠幫助使用者快速且直觀地將複雜的流程、邏輯或結構轉換成易讀的流程圖（flowchart）。透過簡單的語法指令，開發者或內容創作者無需安裝額外軟體，就能在 Markdown 文件、技術文件、Wiki 頁面或支援 Mermaid 的編輯器中，直接嵌入流程圖，提高文件的可讀性與理解效率。

Mermaid 支援多種圖表類型，包括：流程圖、甘特圖（Gantt chart）、時序圖（sequence diagram）、類別圖（class diagram）、狀態圖（state diagram）等，非常適合用於技術文件撰寫、系統設計圖示、專案管理與工程說明等場景。這讓 Mermaid 成為技術團隊與內容創作者不可或缺的圖表工具。

本篇要教你在 Gemini 中製作可以轉換 Mermaid 語法內容為流程圖的小工具，簡單要實用喔！

【範例】線上購物平台訂單處理流程

1.顧客下單：顧客在平台上選擇商品並完成結帳流程。

2.付款驗證：系統會向第三方金流服務確認付款是否成功。

3.庫存確認：確認倉庫中是否有足夠庫存。

4.訂單成立：若付款與庫存都沒問題，訂單會正式成立。

5.物流派送：

(1)若是自營倉庫，則由內部物流處理出貨。

(2)若是第三方賣家，通知賣家準備出貨。

6.出貨通知：系統會發送簡訊或 Email 通知顧客商品已出貨。

7.配送過程追蹤：提供物流追蹤碼供顧客追蹤配送進度。

8.顧客收貨並確認：顧客收到商品後可在平台確認收貨。

9.售後服務：若有退貨或客服需求，進入售後處理流程。

輚換成以下 Mermaid 語法內容

graph TD
    A[顧客下單] --> B{付款成功？}
    B -- 否 --> Z1[取消訂單]
    B -- 是 --> C{庫存足夠？}
    C -- 否 --> Z2[取消訂單並退款]
    C -- 是 --> D[訂單成立]
    D --> E{物流類型}
    E -- 自營倉庫 --> F1[內部物流出貨]
    E -- 第三方賣家 --> F2[通知賣家出貨]
    F1 --> G[發送出貨通知]
    F2 --> G
    G --> H[配送過程追蹤]
    H --> I[顧客確認收貨]
    I --> J{是否需要售後服務？}
    J -- 是 --> K[進入售後處理流程]
    J -- 否 --> L[完成訂單]

如果使用現有的工具，你把這個 Mermaid 語法內容複製後貼至 Whimsical（https://whimsical.com/）中，會得到以下的結果：

下載圖片可得：

你也可以自己使用 Gemini 來寫一個 Mermaid 語法流程圖的產生器，結合 Gemini 的 AI 功能而自動產生。

指令：

根據Mermaid 語法的內容繪製流程圖， 網頁內容要求： 

1.可以貼上Mermaid 語法內容或是上傳含有Mermaid 語法內容的文字檔。 

2.可以下載流程圖圖片(PNG格式)。

3.注意界面的字體大小以利學生閱讀。

4.以明亮而色彩豐富的視覺化設計呈現。

5.盡量增加網頁互動性。

結果如下：（https://gemini.google.com/share/70b1bb8615a3）

只要貼上 Mermaid 語法的內容，即可繪出流程圖。

這是下載的 PNG 圖檔：