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