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