小黃老師嘿技術

寫論文、做行動研究，或是設計教學教案時，你是否曾經為了畫出一張漂亮的「流程圖」或「架構圖」，在 PowerPoint 裡拉線條拉到崩潰？對齊不準、文字方塊跑版，修改一個步驟就要全部重畫……

身為教育工作者與研究者，我們應該把時間花在「思考」而非「排版」。

今天要介紹的這款神器 Mermaid Live Editor，搭配現在最強的 AI 工具 (ChatGPT)，能讓你在 3 分鐘內，用「文字」生成專業的學術圖表。這篇文章將以實際的「語文與資訊跨領域行動研究」為範例，手把手教你如何操作！

Mermaid Live Editor 是什麼？

Mermaid 是一個基於 JavaScript 的圖表繪製工具，它的核心概念是「Text to Diagram」（用文字轉圖表）。你不需要懂複雜的程式設計，只需要輸入簡單的語法，它就會自動幫你排版、連線、上色。

實戰教學：三步驟完成圖表

步驟一：打開工具

進入 Mermaid Live Editor 網站。你會看到畫面分為兩半：左邊是「程式碼輸入區」，右邊是「即時預覽區」。

步驟二：呼叫 AI 幫忙寫代碼

你不必自己背誦語法，我們直接請 ChatGPT 或 Claude 幫忙。你可以使用以下指令（Prompt）：

步驟三：貼上代碼並下載

將 AI 產生的代碼貼入左側編輯區，右側就會立刻出現圖表。點擊下方的「Actions」按鈕，即可下載圖片。

範例展示：故事新繪界行動研究

為了讓大家更有概念，我以「語文與資訊的奇想接龍行動研究」為例。我們希望呈現出從發現問題（手寫稿數位化困難）到導入 AI OCR 工具解決問題的歷程。

請將以下這段代碼複製，貼到 Mermaid Live Editor 試試看：

graph TD
    %% 定義 Tiffany 藍風格樣式
    classDef tiffany fill:#81D8D0,stroke:#333,stroke-width:2px,color:white;
    classDef plain fill:#fff,stroke:#81D8D0,stroke-width:2px,color:#333;
    classDef problem fill:#ffcccc,stroke:#ff0000,stroke-width:2px,color:black;

    %% 標題節點
    Start((行動研究
開始)):::tiffany

    %% 流程分支
    Start --> A[計畫: 繪本作文接龍
結合AI圖像與文字]:::plain
    A --> B{遭遇困難}:::plain
    B -->|問題浮現| C[手寫稿數位化
耗時費力]:::problem
    
    %% 子研究循環
    C --> D[調整計畫: 
導入OCR工具測試]:::tiffany
    D --> E[行動: 
測試Google Lens/Azure]:::plain
    E --> F[觀察: 
Google Lens辨識率達90%]:::plain
    F --> G[省思與修正: 
確立手寫轉數位流程]:::tiffany
    
    %% 結果
    G --> H[成果: 
提升寫作動機與效率]:::plain
    H --> End((完成
第一循環)):::tiffany
    
    %% 連線樣式
    linkStyle default stroke:#81D8D0,stroke-width:2px;

貼上後，你將會看到一張結構清晰、配色優雅的流程圖，完美的呈現了行動研究中「計畫→行動→觀察→省思」的動態修正過程。

進階技巧：打造個人風格

在 Mermaid 中，你可以輕鬆更改顏色以符合你的部落格風格。例如上方的代碼中，我使用了 #81D8D0 來呼應我們喜愛的 Tiffany 藍色調。

只要修改代碼中 fill:#81D8D0 的色碼，就能瞬間切換成任何你喜歡的顏色！

結語

科技始終來自於人性，而工具是為了節省我們的時間。透過 Mermaid Live Editor 結合 AI，老師們可以把寶貴的時間花在陪伴學生與教學設計上，而不是在 PowerPoint 裡畫框框。

下次寫教案、論文或部落格時，不妨試試看這個方法吧！

免責聲明：本文內容僅供參考，相關軟體與網站功能可能隨時間更新而變動，請以官方最新發布為準。使用 AI 工具生成內容時，請務必留意資訊安全、隱私保護與著作權相關規範。