Mermaid圖表測試文件

Documentation Testing

本文檔是一個測試文件，專門用於驗證CZON平台中Mermaid圖表的渲染功能。文件展示了流程圖、序列圖、甘特圖、類圖、狀態圖和餅圖等多種圖表類型的範例，並包含一個錯誤語法測試以驗證錯誤處理機制。透過這些範例，文件旨在確保CZON平台能夠正確解析和顯示Mermaid圖表，從而支援使用者建立和分享複雜的可視化內容。文件還簡要說明了測試的目的和包含的圖表類型，幫助讀者理解其核心價值。
📅 2024-01-01
  • Mermaid
  • 圖表測試
  • CZON
  • 流程圖
  • 序列圖
  • 甘特圖
  • 類圖
  • 狀態圖

Mermaid 圖表測試

這是一個測試文件，用於驗證 CZON 中的 Mermaid 圖表渲染功能。

流程圖範例

graph TD
    A[開始] --> B{是否繼續?}
    B -->|是| C[執行操作]
    B -->|否| D[結束]
    C --> E[檢查結果]
    E --> F{是否成功?}
    F -->|是| G[完成]
    F -->|否| H[重試]
    H --> C
    G --> D

序列圖範例

sequenceDiagram
    participant User
    participant System
    participant Database

    User->>System: 提交請求
    System->>Database: 查詢資料
    Database-->>System: 返回結果
    System-->>User: 顯示結果

甘特圖範例

gantt
    title 專案時間表
    dateFormat  YYYY-MM-DD
    section 設計
    需求分析     :done,    des1, 2024-01-01, 7d
    原型設計     :active,  des2, 2024-01-08, 5d
    詳細設計     :         des3, after des2, 5d
    section 開發
    前端開發     :         dev1, after des3, 10d
    後端開發     :         dev2, after des3, 15d
    section 測試
    單元測試     :         test1, after dev1, 5d
    整合測試     :         test2, after dev2, 5d

類圖範例

classDiagram
    class Animal {
        +String name
        +int age
        +void eat()
        +void sleep()
    }
    class Dog {
        +void bark()
    }
    class Cat {
        +void meow()
    }

    Animal <|-- Dog
    Animal <|-- Cat

狀態圖範例

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : 開始處理
    Processing --> Success : 處理成功
    Processing --> Error : 處理失敗
    Success --> [*]
    Error --> [*]

餅圖範例

pie title 瀏覽器使用率
    "Chrome" : 65.2
    "Firefox" : 15.3
    "Safari" : 12.5
    "Edge" : 5.2
    "其他" : 1.8

錯誤語法測試（應該顯示錯誤訊息）

graph TD
    A --> B
    // 這裡缺少箭頭定義
    C --> D

這個測試文件包含了多種 Mermaid 圖表類型，用於驗證 CZON 的 Mermaid 整合是否正常運作。

See Also