當學生面對一段複雜的程式碼時，經常會感到困惑，甚至出現「頭腦當機」的狀況。尤其是對於初學者而言，沒有清楚的註解與視覺化輔助，很難迅速理解程式的邏輯與運作流程。這時，如果能透過工具自動加入程式註解並產生流程圖，不但能有效降低理解門檻，更能大幅提升學習效率與程式設計能力。
在 Google 推出的 Gemini 平台中，內建的 Gemini AI 功能可以大幅簡化這個過程。學生只需貼上程式碼，AI 就能即時進行分析，自動為程式碼加入清晰、易懂的註解，並依據邏輯結構繪製對應的流程圖。
核心優勢：
✅ 自動產生註解：AI 分析每行程式碼意圖，補充中肯註解，提升可讀性與可維護性。
✅ 快速生成流程圖：將抽象程式邏輯轉換為視覺化圖像，更直觀掌握執行流程。
✅ 強化理解與記憶：透過視覺與語意的雙重輔助，加速學習與程式語言內化過程。
✅ 適用多種語言與程度：無論你是新手學生還是進階使用者，都能從中受益。
使用 Gemini AI 來自動加上註解與流程圖，不僅可以幫助學生理解程式碼，更是一種高效學習的策略工具。學習程式不再只是死記語法，而是透過「理解」與「視覺化」來內化邏輯，從而建立真正的程式設計能力。
參考以下的指令：
設計根據使用者輸入的C語言程式轉換為Mermaid 語法內容並繪製流程圖的互動式平台。網頁內容要求：
1.可以貼上C語言程式的文字內容。
2.根據程式的內容以Gemini的AI執行：
(1)將程式的每一行都加上註解，並且將註解置於程式的下方。
(2)將程式內容轉換為Mermaid語法。
(3)根據Mermaid語法內容繪製成流程圖。
3.可以下載加上註解的程式內容。
4.可以下載Mermaid語法內容。
5可以下載流程圖圖片(PNG格式)。
6.注意界面的字體大小以利學生閱讀。
7.以明亮而色彩豐富的視覺化設計呈現。
8.盡量增加網頁互動性以利學生學習。
結果範例：https://gemini.google.com/share/dea9ad42a27c
提醒：AI 產生的結果有可能會出錯！
(1) 產生流程圖：
(2) 產生程式碼的註解：
(3) 產生 Mermaid 語法：
最後，你可以下載：流程圖 (PNG)、註解程式碼、Mermaid 語法。
