> ## 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/) 了解各类图表的完整语法。