Mermaid

Fumadocs 通过 Mermaid 集成实现图表渲染，没有内置包装器。用户可以选择官方 Mermaid 渲染器或第三方替代方案。

设置选项

官方渲染器

安装依赖：

npm install mermaid next-themes

客户端组件处理带有主题感知的渲染。关键特性包括：

• 挂载检查以防止水合问题
• Promise 缓存以提升性能
• 基于主题的配置（dark vs default）
• 安全设置和自定义样式

Beautiful Mermaid 替代方案

beautiful-mermaid 是一个第三方 Mermaid 渲染器，提供更简单的异步组件方式，内置错误处理，失败时回退到代码显示。

实现步骤

1. 在 components/mdx/mermaid.tsx 中创建 Mermaid 组件
2. 在 MDX 配置文件中注册为 MDX 组件
3. 在 MDX 文件中使用，通过 prop 传递图表字符串

Remark 插件集成

remarkMdxMermaid 插件自动将 Markdown 的 mermaid 代码块转换为 MDX 组件调用，省去手动转换的工作。