Mermaid - daniel-qa/Vue GitHub Wiki

Mermaid 既是一套工具（渲染引擎），也是一種格式（語法規範），它是兩者的結合。

要精確理解它，可以拆解為以下兩個層面：

• 1 . 它是一種「語法格式」 (Format / Syntax)定義了一套特定、輕量級的文字書寫規則。就像 Markdown 用 # 代表標題，Mermaid 用 graph TD 或 mindmap 來代表圖表類型。這種格式是純文字的，任何記事本都能編寫，副檔名通常儲存為 .mmd。

• 2 . 它是一套「開源工具」 (Tool / Rendering Engine)本體是一個基於 JavaScript 的解析與繪圖庫。它的工作是扮演「翻譯官」：讀取你寫的 Mermaid 文字格式，然後自動將它渲染（畫）成 SVG 或 PNG 圖片。

💡 總結比喻Markdown：是一套文字格式，需要瀏覽器或編輯器（工具）把它渲染成漂亮的網頁。Mermaid：也是相同的道理。你寫的是 Mermaid 格式的文字，背後運作並把圖畫出來的是 Mermaid 這套工具。

flowchart TD
    A["使用者點擊 + 新增題目"] --> B["CreateExercises.vue / BaseEditExercise.vue\n填寫題型 難度 學段 科目 知識點"]

    B --> C["evTools.createBlobItem()\n完整富文本格式 含 HTML question/option"]
    B --> D["evTools.createCosmosItem()\n索引格式 純文字摘要 去除 base64"]

    C --> E["blobTool.upload()\n上傳 item/{guid}/{guid}.json 至 Azure Blob\n需先取得 SAS Token"]
    E --> F{上傳成功?}
    F -- 失敗 --> G["顯示錯誤訊息"]
    F -- 成功 取得 blob URL --> H

    D --> H["POST /item/upsert\nnewEvaluation.SaveSingleExercise()\n{ itemInfo, option: insert/update }"]

    B -- type = compose --> V["每個子題各自上傳 Blob\nitem/{childId}/{childId}.json"]
    V --> W["各自呼叫 POST /item/upsert\npid = 父題 id"]
    W --> X["父題 children 只存子題 ID 陣列"]
    X --> H

    H --> J["ItemController.Upsert()"]
    J --> K["計算 Blob 大小 itemInfo.size"]
    K --> L["BlobService.RefreshBlobRoot()\n發送 Service Bus 刷新訊息"]
    L --> M{scope?}

    M -- private --> N["Cosmos Teacher 容器\nPartitionKey = Item-teacherId"]
    M -- school --> O["Cosmos School 容器\nPartitionKey = Item-schoolCode"]
    M -- area/public --> P["Cosmos Normal 容器"]

    N --> Q{option?}
    O --> Q
    P --> Q

    Q -- insert --> R["CreateItemAsync()\n已存在回傳 409"]
    Q -- update --> S["ReplaceItemAsync()"]

    R --> T["發送 ServiceBus ItemCondQueue"]
    S --> T
    T --> U["非同步更新 Redis\nItemCond 統計快取"]