creating-mermaid-diagrams

此技能是專為開發人員、架構師與技術寫作者設計的輔助工具，旨在協助創建高品質且與 GitHub 相容的視覺化技術文件。它提供了一套結構化的設計理念與專業配色方案，確保 Mermaid 圖表在 GitHub 的亮色與深色模式下均具備良好的可讀性。本技能支援各類圖表類型，包括流程圖、時序圖、類別圖、實體關聯圖 (ERD)、狀態機以及 Gantt 和 Kanban 等專案管理圖表。

• 完整支援所有標準 Mermaid.js 圖表類型，包括進階的 C4Context、architecture-beta 與心智圖。

• 內建設計系統，強制要求每個生成的圖表皆須包含 accTitle 與 accDescr，以符合無障礙存取標準。

• 提供 24 種經嚴格測試的專業配色主題（例如 Catppuccin, Nord, Tokyo Night），確保視覺一致性。

• 透過 mermaid-cli (mmdc) 提供本地預覽功能，支援 SVG 與 PNG 匯出以進行快速迭代。

• 支援基於 Gist 的整合預覽，讓使用者在提交程式碼前，即可預覽圖表在 GitHub PR、Issue 與 Markdown 檔案中的實際渲染效果。

• 提供自動化風格指引，強調結構、邏輯線條權重與語意化配色，減少不必要的視覺混亂。

• 當您需要闡明系統架構、記錄 API 呼叫序列、規劃決策流程樹或視覺化資料庫結構時，請使用此技能。

• 請確保所有節點 ID 使用蛇形命名法 (snake_case)，並針對包含特殊字元的標籤使用引號，以避免在 GitHub 平台上渲染失敗。

• 在設計階段使用 preview.sh 腳本切換深淺模式，確保圖表對所有協作者皆保持易讀性。

• 請注意渲染限制：避免超過兩層的複雜嵌套子圖，節點數量應控制在 100 個以內以獲得最佳效能，並請注意原生 GitHub 渲染器不支援點擊事件與自訂 HTML/CSS。