Mermaid Visualizer

選用與目標

依內容與交付位置自動選用，使用者不必記住 skill 名稱。適合把步驟、 概念關係、架構或互動整理成 Mermaid 圖。明確指定其他圖表格式時尊重指定。 HTML Artifact 內先沿用既有 HTML、CSS、SVG 或圖表工具；Mermaid 符合 整份交付物的需求時才使用，不因「流程圖」一詞就強制切換。

Workflow

1. 理解概念、關係、順序與圖表用途，確認呈現位置及可用的 Mermaid 版本。
2. 依下表選圖類型。需要分組、回饋迴圈或中心節點範例時，讀 完整圖例。
3. 套用使用者指定的方向、細節與風格；未指定時以 TB、適中細節為起點，依畫面調整。配色或設計選項見 設計參考，其中選項不是通用 API 參數。
4. 產生 Mermaid 程式碼，遵守下方易錯規則。特殊標點、換行、subgraph、樣式或解析錯誤，先讀 語法與排錯 對應段落。
5. 執行下方驗收，修正受影響的圖。Markdown 使用 mermaid code fence；HTML 依既有整合方式嵌入。
6. 交付圖表及必要說明，指出實際驗證的工具與尚未確認的相容性。

圖表選擇