Ian Chou's Blog

Mermaid 測試文章：流程圖與序列圖範例

以下是兩個 mermaid 範例，方便確認版型、字型與配色是否正常。

流程圖範例

graph TD
    A[讀者載入頁面] --> B{Mermaid 有被載入嗎?}
    B -- 是 --> C[直接渲染圖表]
    B -- 否 --> D[檢查前端 bundler / script 引入]
    D --> E[確認 CDN 或本地版本一致]
    C --> F[完成顯示]
    E --> B

序列圖範例

sequenceDiagram
  participant User as 使用者
  participant Browser as 瀏覽器
  participant Mermaid as Mermaid 引擎

  User->>Browser: 開啟包含 mermaid 的文章
  Browser->>Mermaid: 解析並渲染 mermaid 區塊
  Mermaid-->>Browser: 回傳 SVG/HTML
  Browser-->>User: 顯示圖表

如果需要測試亮/暗色系或字體，可在本文章上套用不同主題檢查。

graph TD
	subgraph RAGFlow["構建 Human-friendly RAG 知識庫流程"]
		A[開始: 新技術概念] --> B(Claude)
		B -->|提取核心骨架 & 心智模型| C[Logseq 知識節點]
        D(ChatGPT) -->|補充 Edge Cases & 實戰代碼| C
        E(Qwen) -->|補充 Gap 分析 & 盲點| C
        C --> F{知識庫成型}
        F -->|RAG 檢索| G[高精準度 & 可解釋性]
    end
    style B fill:#f9f,stroke:#333,stroke-width:2px
    style C fill:#bbf,stroke:#333,stroke-width:4px
    style G fill:#bfb,stroke:#333,stroke-width:2px