插入 Mermaid 圖表
你可以透過以下方式新增 Mermaid 圖表：- 輸入
/mermaid，然後選取 Mermaid 圖表 - 在側邊欄的 插入 面板中選擇 Mermaid 圖表（位於「多媒體區塊」分類下）
- 貼上含有
```mermaid程式碼圍欄的 Markdown——Craft 會自動轉換
編輯
開啟 Mermaid 區塊後，會顯示分割檢視——上方為渲染後的圖表，下方為程式碼編輯器。預覽會在你輸入時即時更新。
- macOS
- iOS / iPad
- Web / Windows
點按 Mermaid 區塊以開啟分割檢視。圖表預覽顯示於上方，程式碼編輯器位於下方。雙擊預覽可放大檢視。
支援的圖表類型
流程圖
呈現流程、決策與工作流程。使用graph TD 可建立由上而下的版面，graph LR 則為由左至右。
序列圖
展示人員或系統之間隨時間發生的互動。
狀態圖
將某件事物在不同狀態之間的轉換視覺化——非常適合用於訂單追蹤、工作流程或業務流程。
類別圖
呈現系統的結構——包含哪些物件、其屬性，以及彼此之間的關聯。ER 圖
建立資料關聯模型——非常適合資料庫設計與規劃。圖表
建立長條圖、折線圖，或兩者的組合圖表。變更佈景主題
Mermaid 圖表會配合程式碼編輯器的佈景主題呈現。若要變更外觀，點按工具列中的畫筆圖示，然後選擇主題——可選項目包括 Tokyo Night、Dracula、Nord、GitHub 等。 圖表會立即更新。圖表也會遵循文件的亮色或暗色模式設定。
分享與發佈
Mermaid 圖表可在分享和發佈的頁面上正常渲染——任何透過連結瀏覽的人都能看到渲染後的圖表，而非原始程式碼。無需任何額外設定。匯入與匯出
- Markdown 匯入：貼上或匯入含有
```mermaid程式碼圍欄的 Markdown，Craft 會自動建立 Mermaid 區塊。 - Markdown 匯出：Mermaid 區塊會以標準
```mermaid程式碼圍欄格式匯出，與其他工具相容。
使用技巧
圖表顯示「Invalid Mermaid diagram」怎麼辦？
圖表顯示「Invalid Mermaid diagram」怎麼辦？
這通常表示程式碼中有語法錯誤。請檢查是否有拼字錯誤或缺少箭頭符號。如果你是從其他工具複製語法，請注意 Craft 目前支援流程圖、序列圖、狀態圖、類別圖、ER 圖和 XY 圖表——圓餅圖、甘特圖或心智圖等其他類型目前尚不支援。
AI 助理可以幫我撰寫 Mermaid 圖表嗎？
AI 助理可以幫我撰寫 Mermaid 圖表嗎？
可以。描述你想要的圖表內容，Craft AI 助理就會為你生成 Mermaid 程式碼。你也可以請它修改或擴充現有的圖表。
可以放大較大的圖表嗎？
可以放大較大的圖表嗎？
在 Mac 和 iPad 上，雙擊圖表預覽即可放大。在網頁版上，可使用全螢幕檢視來查看較大的圖表。
Mermaid 是一種廣泛應用於各種工具的開放標準。前往 mermaid.js.org 深入了解各種圖表類型的完整語法。