Mermaid 圖表測試文件
這個文件用於測試 Mermaid 圖表在文章頁面的顯示效果。
流程圖測試
graph TD
A[開始] --> B{是否登入?}
B -->|是| C[顯示主頁]
B -->|否| D[顯示登入頁]
C --> E[結束]
D --> E
序列圖測試
sequenceDiagram
participant 使用者
participant 前端
participant 後端
participant 資料庫
使用者->>前端: 填寫表單
前端->>後端: 提交數據 (POST)
後端->>資料庫: 查詢驗證
資料庫-->>後端: 返回結果
後端-->>前端: 返回 JSON
前端-->>使用者: 顯示成功訊息
類圖測試
classDiagram
class ArticleManager {
+articles: Array
+editor: EasyMDE
+init()
+loadArticles()
+saveArticle()
}
class ArticleRenderer {
+articlesIndex: Object
+init()
+renderArticle()
+renderMermaidDiagrams()
}
ArticleManager --> ArticleRenderer: 使用
甘特圖測試
gantt
title 專案開發時程
dateFormat YYYY-MM-DD
section 設計階段
需求分析 :a1, 2025-10-01, 7d
UI設計 :a2, after a1, 5d
section 開發階段
前端開發 :a3, after a2, 10d
後端開發 :a4, after a2, 12d
section 測試階段
單元測試 :a5, after a3, 3d
整合測試 :a6, after a4, 5d
狀態圖測試
stateDiagram-v2
[*] --> 未登入
未登入 --> 已登入: 登入成功
已登入 --> 瀏覽文章
瀏覽文章 --> 編輯文章: 點擊編輯
編輯文章 --> 瀏覽文章: 保存成功
已登入 --> 未登入: 登出
未登入 --> [*]
餅圖測試
pie title 專案時間分配
"開發" : 45
"測試" : 20
"設計" : 15
"會議" : 10
"文檔" : 10
結論
如果以上所有圖表都能正確顯示，說明 Mermaid 整合成功！✨