如何在Docusaurus的Mermaid图表中启用缩放控制？

方法1：通过Docusaurus配置启用Mermaid交互功能 #

在项目的docusaurus.config.js文件中，找到themeConfig下的mermaid配置节点（不存在则新增），添加Mermaid交互配置以启用缩放和拖拽：

module.exports = {
  // 其他项目配置...
  themeConfig: {
    // 其他主题配置...
    mermaid: {
      theme: 'default',
      options: {
        interaction: {
          zoom: true, // 启用缩放功能
          pan: true,  // 启用拖拽平移
        },
      },
    },
  },
};

保存配置后重启Docusaurus服务，此时Mermaid图表右上角会出现缩放控制按钮，同时支持鼠标滚轮缩放、拖拽平移操作。

方法2：自定义CSS优化图表容器空间 #

如果图表容器尺寸受限，可通过自定义样式调整容器范围：

在项目的src/css/custom.css中添加以下样式：

/* 调整Mermaid图表容器的最大宽高，超出时显示滚动条 */
.mermaid-container {
  max-width: 100% !important;
  max-height: 80vh !important;
  overflow: auto;
}

重启服务后，图表容器会自适应页面宽度，高度超出视窗时自动出现滚动条，配合缩放功能可更便捷地查看大尺寸图表。

测试验证 #

使用你提供的序列图代码测试配置效果：

sequenceDiagram
par Alice to Bob
    Alice->>Bob: Go help John
and Alice to John
    Alice->>John: I want this done today
    par John to Charlie
        John->>Charlie: Can we do this today?
    and John to Diana
        John->>Diana: Can you help us today?
    end
end

配置生效后，即可通过缩放控件或鼠标滚轮调整图表大小，拖拽查看不同区域。

内容的提问来源于stack exchange，提问作者pauloh