Mermaid support

[Thijmen]

Hi there,

I love your product - is there any chance for Mermaid support in the near future? See also https://mermaid.js.org/

[fuma-nama]

You can use their rehype plugin, I think it's not quite necessary to make a wrapper for it.
Note that same as Rehype KaTeX, you need to put it prior to rehype code.

[johnschult]

@Thijmen Have you been able to get this to work? I tried this is in my source.config.ts:

import { rehypeCode } from 'fumadocs-core/mdx-plugins';
import { defineConfig, defineDocs } from 'fumadocs-mdx/config';
import rehypeMermaid from 'rehype-mermaid';

export const { docs, meta } = defineDocs({
  dir: 'content',
});

export default defineConfig({
  mdxOptions: {
    rehypePlugins: [rehypeMermaid, rehypeCode],
  },
});

and a mdx file with something like this:

---
title: Diagram
---

<pre>
  <code class="language-mermaid">
     graph TD;
          A-->B;
          A-->C;
          B-->D;
          C-->D;
  </code>
</pre>

No joy for me, I get the actual mermaid text rendered, no image.

[Thijmen]

Check my working code; https://raw.githubusercontent.com/cloudcrafter-oss/CloudCrafter/refs/heads/main/frontend/apps/site/content/docs/index.mdx

It even renders in Github: https://github.com/cloudcrafter-oss/CloudCrafter/blob/main/frontend/apps/site/content/docs/index.mdx

[Thijmen]

@johnschult It is visible on https://www.cloudcrafter.app/docs. Let me know if this helps! 😄

[johnschult]

Thanks, I will have a look when I get to the office 🙏🏼

[fuma-nama]

You can use a codeblock instead of JSX elements. And configure it as:

export default defineConfig({
  mdxOptions: {
    rehypePlugins: items => [rehypeMermaid, ...items],
  },
});

[johnschult]

I'll give it a try. Do you have a working code example for this you can share?

[fuma-nama]

Will add a guide soon

[fuma-nama]

available on dev ;)
https://fumadocs-dev.vercel.app/docs/ui/mermaid

[fuma-nama]

I've also got similar questions on Discord, I'll make a built-in integration soon. For now, you can use the following component with MDX:

'use client';
import mermaid, { type RenderResult } from 'mermaid';
import { type HTMLAttributes, useEffect, useRef, useState } from 'react';

export function Mermaid({
  text,
  ...props
}: Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
  text: string;
}) {
  const ref = useRef<HTMLDivElement>(null);
  const [rendered, setRendered] = useState<RenderResult>();

  useEffect(() => {
    async function run() {
      const element = ref.current;
      if (!element) return;

      mermaid.initialize({
        theme: 'dark',
      });
      const result = await mermaid.render(props.id ?? 'mermaid', text, element);

      setRendered(result);
      result.bindFunctions?.(element);
    }

    void run();
  }, [props.id, text]);

  return (
    <div
      ref={ref}
      dangerouslySetInnerHTML={rendered ? { __html: rendered.svg } : undefined}
      {...props}
    />
  );
}

[Thijmen]

#1031 (reply in thread) This was all I had to do. No hassle with custom useEffects or something.

[fuma-nama]

rehype-mermaid requires a headless browser, in this case I think people will prefer a light & flexible way using React & their API.

[Thijmen]

That is true, I did not want to have the mermaid render on the browser, I wanted full server-side support. It's up to the user what/how they want to implement :)

[johnschult]

Thank you both for the quick replies!