<div id="dmermaid-0"> appened to body with invalid mermaid

[ethanevansibm]

I am loving this package, but have come across this issue I do not understand.

I have gotten rehype-mermaid working great with valid markdown. Issues arise with invalid markdown, though. I have included a errorFallback component which does successfully render. However, the following div is also appended to the body of the page:

<div id="dmermaid-0"><svg id="mermaid-0" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2412 512" style="max-width: 512px;" role="graphics-document document" aria-roledescription="error"><style>#mermaid-0{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}#mermaid-0 .error-icon{fill:#a44141;}#mermaid-0 .error-text{fill:#ddd;stroke:#ddd;}#mermaid-0 .edge-thickness-normal{stroke-width:1px;}#mermaid-0 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-0 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-0 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-0 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-0 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-0 .marker{fill:lightgrey;stroke:lightgrey;}#mermaid-0 .marker.cross{stroke:lightgrey;}#mermaid-0 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-0 p{margin:0;}#mermaid-0 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g></g><g><path class="error-icon" d="m411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z"></path><path class="error-icon" d="m459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z"></path><path class="error-icon" d="m340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z"></path><path class="error-icon" d="m400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z"></path><path class="error-icon" d="m496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z"></path><path class="error-icon" d="m436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z"></path><text class="error-text" x="1440" y="250" font-size="150px" style="text-anchor: middle;">Syntax error in text</text><text class="error-text" x="1250" y="400" font-size="100px" style="text-anchor: middle;">mermaid version 11.4.1</text></g></svg></div>

Is this a known bug or is there some mistake I am making? Here is my full code for reference.

import { createElement, FC, Fragment, useEffect, useState } from 'react';
import * as prod from 'react/jsx-runtime';
import rehypeMermaid from 'rehype-mermaid';
import rehypeReact from 'rehype-react';
import rehypeStringify from 'rehype-stringify';
import remarkGfm from 'remark-gfm';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import mermaid from 'mermaid';
import { unified } from 'unified';
import type { Element, ElementContent } from 'hast';
import type { VFile } from 'vfile';

interface MarkdownProps {
  text: string | undefined;
}
mermaid.initialize({
  startOnLoad: true,
  theme: 'dark',
});
export const Markdown: FC<MarkdownProps> = ({ text }) => {
  const [markdown, setMarkdown] = useState(createElement(Fragment));

  const errorFallback = (element: Element, diagram: string, error: unknown, file: VFile): ElementContent | null =>

    ({
      type: 'element',
      tagName: 'div',
      properties: { className: ['mermaid-error'] },
      children: [
        {
          type: 'text',
          value: 'Error rendering Mermaid diagram. Check console for details.',
        },
        {
          type: 'element',
          tagName: 'pre',
          properties: { className: ['mermaid-code'] },
          children: [{ type: 'text', value: diagram }],
        },
      ],
    });
  useEffect(() => {
    const renderMarkdown = async (input: string) => {
      const production = { Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs };
      const processor = unified()
        .use(remarkParse)
        .use(remarkGfm)
        .use(remarkRehype)
        .use(rehypeMermaid, {
          colorScheme: 'dark',
          strategy: 'inline-svg',
          errorFallback,
        })
        .use(rehypeStringify)
        .use(rehypeReact, production);
      const file = await processor.process(input);
      setMarkdown(file.result);
    };
    if (text) {
      renderMarkdown(text);
    }
  }, [text]);
  return <div className="markdown">{markdown}</div>;
};

[remcohaszing]

Please provide a minimal, runnable example.