Mermaid 圖表

使用文字型 Mermaid 語法建立流程圖、序列圖、狀態圖等各種視覺化圖表。

Craft 支援 Mermaid 圖表——只需輸入幾行文字語法，即可建立視覺化圖表。Craft 會將程式碼直接渲染為清晰、精確的圖表，呈現在你的文件中。

圖表會在你輸入時即時更新，支援所有平台，並可在分享及發佈的頁面上正常顯示。

​

插入 Mermaid 圖表

你可以透過以下方式新增 Mermaid 圖表：

• 輸入 /mermaid，然後選取 Mermaid 圖表
• 在側邊欄的 插入 面板中選擇 Mermaid 圖表（位於「多媒體區塊」分類下）
• 貼上含有 ```mermaid 程式碼圍欄的 Markdown——Craft 會自動轉換

​

編輯

開啟 Mermaid 區塊後，會顯示分割檢視——上方為渲染後的圖表，下方為程式碼編輯器。預覽會在你輸入時即時更新。

macOS

點按 Mermaid 區塊以開啟分割檢視。圖表預覽顯示於上方，程式碼編輯器位於下方。雙擊預覽可放大檢視。

iOS / iPad

點按區塊以開啟程式碼編輯器，上方會顯示即時預覽。在 iPhone 上，收起鍵盤即可看到圖表。雙擊預覽可放大檢視。

Web / Windows

點按區塊即可進行編輯。使用區塊操作選單中的檢視模式選項，可在「編輯」、「預覽」和「分割檢視」之間切換。

你不需要熟記 Mermaid 語法——Craft AI 助理可以幫你生成圖表。只要描述你想要的內容，它就會自動撰寫程式碼。

​

支援的圖表類型

​

流程圖

呈現流程、決策與工作流程。使用 graph TD 可建立由上而下的版面，graph LR 則為由左至右。

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do This]
    B -->|No| D[Do That]
    C --> E[Done]
    D --> E

​

序列圖

展示人員或系統之間隨時間發生的互動。

sequenceDiagram
    User->>App: Place order
    App->>Payment: Charge card
    Payment-->>App: Confirmed
    App-->>User: Order placed

​

狀態圖

將某件事物在不同狀態之間的轉換視覺化——非常適合用於訂單追蹤、工作流程或業務流程。

stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft : Needs changes
    Published --> [*]

​

類別圖

呈現系統的結構——包含哪些物件、其屬性，以及彼此之間的關聯。

classDiagram
    class Document {
        +String title
        +Date created
        +publish()
    }
    class Folder {
        +String name
        +getDocuments()
    }
    Folder "1" --> "*" Document : contains

​

ER 圖

建立資料關聯模型——非常適合資料庫設計與規劃。

erDiagram
    AUTHOR ||--o{ POST : writes
    POST ||--o{ COMMENT : has

​

圖表

建立長條圖、折線圖，或兩者的組合圖表。

xychart-beta
    title "Monthly Revenue ($K)"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Revenue" 0 --> 120
    bar [45, 62, 78, 55, 89, 105]

​

變更佈景主題

Mermaid 圖表會配合程式碼編輯器的佈景主題呈現。若要變更外觀，點按工具列中的畫筆圖示，然後選擇主題——可選項目包括 Tokyo Night、Dracula、Nord、GitHub 等。

圖表會立即更新。圖表也會遵循文件的亮色或暗色模式設定。

​

分享與發佈

Mermaid 圖表可在分享和發佈的頁面上正常渲染——任何透過連結瀏覽的人都能看到渲染後的圖表，而非原始程式碼。無需任何額外設定。

​

匯入與匯出

• Markdown 匯入：貼上或匯入含有 ```mermaid 程式碼圍欄的 Markdown，Craft 會自動建立 Mermaid 區塊。
• Markdown 匯出：Mermaid 區塊會以標準 ```mermaid 程式碼圍欄格式匯出，與其他工具相容。

​

使用技巧

圖表顯示「Invalid Mermaid diagram」怎麼辦？

這通常表示程式碼中有語法錯誤。請檢查是否有拼字錯誤或缺少箭頭符號。如果你是從其他工具複製語法，請注意 Craft 目前支援流程圖、序列圖、狀態圖、類別圖、ER 圖和 XY 圖表——圓餅圖、甘特圖或心智圖等其他類型目前尚不支援。

AI 助理可以幫我撰寫 Mermaid 圖表嗎？

可以。描述你想要的圖表內容，Craft AI 助理就會為你生成 Mermaid 程式碼。你也可以請它修改或擴充現有的圖表。

可以放大較大的圖表嗎？

在 Mac 和 iPad 上，雙擊圖表預覽即可放大。在網頁版上，可使用全螢幕檢視來查看較大的圖表。

Mermaid 是一種廣泛應用於各種工具的開放標準。前往 mermaid.js.org 深入了解各種圖表類型的完整語法。