AI助攻，在一個資訊圖表中呈現程式內容、解說和流程圖

學生對於程式的理解，有時和教師提供的教材是否具備足夠的親和力有關係，因為初學者總是對於程式語言又愛又恨。如果能在一個資訊圖表中呈現程式內容、程式解說和流程圖，對於學生的程式學習應該會有幫助。如果透過 Mermaid 語法，可以容易的產生流程圖。

/* 二層巢狀迴圈 */
#include <stdio.h>
int main()
{ 
    int j;
    for (int i = 1; i <= 3; i++) {  /* for外層迴圈 */
        j = 1;
        while(j <= 5) {             /* while內層迴圈 */
            printf("i = %d j = %d\n", i, j);
            j = j + 1;
        }
    }    
    return 0;
}

得到以下的結果：

flowchart TD
    A([開始]) --> B[宣告整數 j]
    B --> C[i = 1]
    C --> D{i <= 3 ?}
    D -- 否 --> Z([結束])
    D -- 是 --> E[j = 1]
    E --> F{j <= 5 ?}
    F -- 否 --> G[i = i + 1]
    G --> D
    F -- 是 --> H[輸出 i 與 j]
    H --> I[j = j + 1]
    I --> F

如果將 Mermaid 語法內容複製到 whimsical (https://whimsical.com/)貼上，得到以下的結果：

接著，要利用 Gemini 來將全部內容做成資訊圖表。

將 C 語言程式內容、程式的解說和 Mermaid 語法內容流程圖的詳細內容製作成資訊圖表。動漫風格，3:2 版面，文字使用手寫繁體中文，使用符合文意的視覺化設計，版面使活頁簿的側邊環狀效果，加上一些圖示或素材。
程式內容：

/* 二層巢狀迴圈 */
#include <stdio.h>
int main()
{ 
    int j;
    for (int i = 1; i <= 3; i++) {  /* for外層迴圈 */
        j = 1;
        while(j <= 5) {             /* while內層迴圈 */
            printf("i = %d j = %d\n", i, j);
            j = j + 1;
        }
    }    
    return 0;
}

Mermaid 語法內容：

flowchart TD
    A([開始]) --> B[宣告整數 j]
    B --> C[i = 1]
    C --> D{i <= 3 ?}
    D -- 否 --> Z([結束])
    D -- 是 --> E[j = 1]
    E --> F{j <= 5 ?}
    F -- 否 --> G[i = i + 1]
    G --> D
    F -- 是 --> H[輸出 i 與 j]
    H --> I[j = j + 1]
    I --> F

得到的資訊圖表：

這三種 AI 工具(whimsical、ChatGPT、Gemini)，真是幫了大忙了！