mermaidjs-v11

此技能完整支援 Mermaid.js v11，使開發人員、系統架構師與技術撰稿人能夠透過簡潔的聲明式語法產生複雜圖表。藉由 Mermaid.js，您可以將視覺化內容直接嵌入 Markdown 檔案或 HTML 文件中，亦可透過 CLI 工具產生獨立的 SVG/PNG/PDF 影像檔案。此工具省去了傳統拖放式繪圖軟體的繁瑣，讓視覺化資產能直接在版本控制系統中進行管理。

• 完整支援超過 24 種圖表類型，包括流程圖 (Flowcharts)、時序圖 (Sequence Diagrams)、類別圖 (Class Diagrams)、狀態圖 (State Diagrams)、實體關係圖 (ER Diagrams)、甘特圖 (Gantt Charts)、用戶旅程圖 (User Journeys) 與時序圖 (Timelines) 等。

• 與 Markdown 完美整合，透過標準 mermaid 代碼區塊實現文件與程式碼同步更新。

• 具備透過 mermaid-cli 進行批次轉換的高階指令列渲染能力，支援將 .mmd 檔案轉換為高品質的 SVG、PNG 或 PDF 格式。

• 豐富的自定義選項，支援多種佈景主題 (default, dark, forest, neutral) 與自訂 CSS 樣式，可對圖表元素進行細緻的視覺控制。

• 內建無障礙存取支援，確保視覺圖表對所有使用者皆具備良好的可讀性與互動性。

• 使用時，請根據需求定義圖表類型（如 flowchart、sequenceDiagram 等），並透過節點與連線語法描述邏輯結構。

• 可在代碼區塊內使用 YAML 風格的 frontmatter 來設定主題、字體或安全級別。

• 對於網頁應用程式，可透過 JavaScript API 初始化 mermaid 函式庫，實現動態的網頁渲染。

• 建議在 CI/CD 流程中使用 mmdc 指令自動化輸出圖表，以確保技術文件與系統架構變更保持一致。

• 由於 Mermaid.js 針對文字化版本控制進行了最佳化，請保持圖表定義的模組化，並善用 %% 語法為複雜的邏輯關係撰寫註解，以維護長期的程式碼可讀性。