Mermaid

Fumadocs doesn't have a built-in Mermaid wrapper provided, we recommend using mermaid directly.

Setup

Install the required dependencies, next-themes is used with Fumadocs to manage the light/dark mode.

npm install mermaid next-themes

Create the Mermaid component:

Add the component as a MDX component:

import defaultMdxComponents from 'fumadocs-ui/mdx';
import { Mermaid } from '@/components/mdx/mermaid';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultMdxComponents,
    Mermaid, 
    ...components,
  };
}

Usage

Use it in MDX files.

As CodeBlock

You can convert mermaid codeblocks into the MDX usage with the remarkMdxMermaid remark plugin.

import { remarkMdxMermaid } from 'fumadocs-core/mdx-plugins';
import { defineConfig } from 'fumadocs-mdx/config';

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [remarkMdxMermaid],
  },
});

```mermaid
graph TD;
  A-->B;
  A-->C;
```