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:

components/mdx/mermaid.tsx

'use client';
 
import { useEffect, useId, useRef, useState } from 'react';
import type { MermaidConfig } from 'mermaid';
import { useTheme } from 'next-themes';
 
export function Mermaid({ chart }: { chart: string }) {
  const id = useId();
  const [svg, setSvg] = useState('');
  const containerRef = useRef<HTMLDivElement>(null!);
  const { resolvedTheme } = useTheme();
 
  useEffect(() => {
    void renderChart();
 
    async function renderChart() {
      const mermaidConfig: MermaidConfig = {
        startOnLoad: false,
        securityLevel: 'loose',
        fontFamily: 'inherit',
        themeCSS: 'margin: 1.5rem auto 0;',
        theme: resolvedTheme === 'dark' ? 'dark' : 'default',
      };
 
      const { default: mermaid } = await import('mermaid');
 
      try {
        mermaid.initialize(mermaidConfig);
        const { svg } = await mermaid.render(
          // strip invalid characters for `id` attribute
          id.replaceAll(':', ''),
          chart.replaceAll('\\n', '\n'),
          containerRef.current,
        );
        setSvg(svg);
      } catch (error) {
        console.error('Error while rendering mermaid', error);
      }
    }
  }, [chart, id, resolvedTheme]);
 
  return <div ref={containerRef} dangerouslySetInnerHTML={{ __html: svg }} />;
}

This is originally inspired by remark-mermaid.

Add the component as a MDX component:

/docs/[[...slug]]/page.tsx

import defaultMdxComponents from 'fumadocs-ui/mdx';
import { Mermaid } from '@/components/mdx/mermaid';
 
<MdxContent
  components={{
    ...defaultMdxComponents,
    Mermaid,
  }}
/>;

Usage

Use it in MDX files.

<Mermaid
  chart="
graph TD;
subgraph AA [Consumers]
A[Mobile app];
B[Web app];
C[Node.js client];
end
subgraph BB [Services]
E[REST API];
F[GraphQL API];
G[SOAP API];
end
Z[GraphQL API];
A --> Z;
B --> Z;
C --> Z;
Z --> E;
Z --> F;
Z --> G;"
/>

Setup

Usage

On this page