Mermaid Support

[Pasithea0]

I'm trying to add mermaid charts to my site, but neither remark-mermaidjs or rehype-mermaid works.

Here is my code, but it does not work:

import rehypeMermaid from "rehype-mermaid";

  const mermaid: Plugin = {
      transformers: [{
          execution: "async",
          type: "rehype",
          transform({ processor }) {
              processor.use(rehypeMermaid, {
                // The default strategy is "inline-svg"
                // strategy: "img-png"
                // strategy: "img-svg"
                // strategy: "inline-svg"
                // strategy: "pre-mermaid"
              })
          }
      }]
  }

Any help is greatly appreciated!

[BearToCode]

I tried your example and it works for me:

import { Carta, type Plugin } from 'carta-md';
import rehypeMermaid from 'rehype-mermaidjs';

const mermaid: Plugin = {
	transformers: [{
		execution: 'async',
		type: 'rehype',
		transform({ processor }) {
			processor.use(rehypeMermaid);
		}
	}]
};

const carta = new Carta({
	extensions: [mermaid],	
	sanitizer: false
});

If you are also using plugin-code, try moving this plugin first when you provide extensions to carta:

const carta = new Carta({
	extensions: [mermaid, code()],
});

[Pasithea0]

1. The text only appears if I disable the sanitizer.
2. The mermaid chart disappears for some reason in the Markdown element

Screen.Recording.2024-10-25.at.11.33.11.AM-1.mov

[BearToCode]

1. What sanitizer are you using? I tried dompurify and the text disappears from the boxes. I'm not able to figure out why this happens. You'll have better luck asking for help on the dompurify repo, providing an example of the generated HTML.
2. This works fine for me (disabling the sanitizer). Try disabling all plugins and see if it still happens.