Mermaid Render 測試

1 分鐘閱讀 DevOps 分享

這篇文章只用來驗證 Mermaid 是否能在前端正確 render，包含流程圖、序列圖，以及手機版寬度縮放。

Flowchart

graph TD
  A[開始] --> B[Hugo Build]
  B --> C{有載入 Mermaid JS?}
  C -->|Yes| D[Render 成圖表]
  C -->|No| E[只顯示程式碼]

Sequence Diagram

sequenceDiagram
  participant U as User
  participant H as Hugo Page
  participant M as Mermaid

  U->>H: 打開文章頁
  H->>M: 載入 mermaid.esm.min.mjs
  M-->>H: 將 mermaid code block 轉為 SVG
  H-->>U: 顯示圖表

檢查項目

  1. 這篇文章應該出現在文章列表最上面
  2. Mermaid 區塊應該顯示成圖，而不是純文字 code block
  3. 圖表在手機版不應該超出內容寬度