> ## Documentation Index
> Fetch the complete documentation index at: https://craft-support.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Mermaid 圖表
> 在 Craft 中使用 Mermaid 建立流程圖、序列圖、ER 圖等以文字為基礎的圖表。
Craft 支援 Mermaid 圖表——只需輸入幾行文字語法，即可建立視覺化圖表。Craft 會將程式碼直接渲染為清晰、精確的圖表，呈現在你的文件中。
圖表會在你輸入時即時更新，支援所有平台，並可在分享及發佈的頁面上正常顯示。
## 插入 Mermaid 圖表
你可以透過以下方式新增 Mermaid 圖表：
* 輸入 `/mermaid`，然後選取 **Mermaid 圖表**
* 在側邊欄的 **插入** 面板中選擇 **Mermaid 圖表**（位於「多媒體區塊」分類下）
* 貼上含有 ` ```mermaid ` 程式碼圍欄的 Markdown——Craft 會自動轉換
## 編輯
開啟 Mermaid 區塊後，會顯示分割檢視——上方為渲染後的圖表，下方為程式碼編輯器。預覽會在你輸入時即時更新。
點按 Mermaid 區塊以開啟分割檢視。圖表預覽顯示於上方，程式碼編輯器位於下方。雙擊預覽可放大檢視。
點按區塊以開啟程式碼編輯器，上方會顯示即時預覽。在 iPhone 上，收起鍵盤即可看到圖表。雙擊預覽可放大檢視。
點按區塊即可進行編輯。使用區塊操作選單中的檢視模式選項，可在「編輯」、「預覽」和「分割檢視」之間切換。
你不需要熟記 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 ` 程式碼圍欄格式匯出，與其他工具相容。
## 使用技巧
這通常表示程式碼中有語法錯誤。請檢查是否有拼字錯誤或缺少箭頭符號。如果你是從其他工具複製語法，請注意 Craft 目前支援流程圖、序列圖、狀態圖、類別圖、ER 圖和 XY 圖表——圓餅圖、甘特圖或心智圖等其他類型目前尚不支援。
可以。描述你想要的圖表內容，Craft AI 助理就會為你生成 Mermaid 程式碼。你也可以請它修改或擴充現有的圖表。
在 Mac 和 iPad 上，雙擊圖表預覽即可放大。在網頁版上，可使用全螢幕檢視來查看較大的圖表。
Mermaid 是一種廣泛應用於各種工具的開放標準。前往 [mermaid.js.org](https://mermaid.js.org/intro/) 深入了解各種圖表類型的完整語法。