make errorRenderer.draw be optional

[ittayd]

Is your feature request related to a problem? Please describe.
I'm using a mermaid plugin in TiddlyWiki which is an HTML/javascript based wiki. In particular, it allows a live preview of the content. So As I create a mermaid drawing I can see how it looks like and correct mistakes. The problem is that as I type, there are errors of course. The live preview will show them, which is fine, but errorRenderer also adds them at the bottom of the HTML where they accumulate (since it's an HTML wiki the page is not reloaded)

Describe the solution you'd like
Making the rendering of errors be optional/configurable

[ittayd]

Further, errorRenderer creates an SVG with the same ID as the rendered node and sets a style which now affects the rendered node (in case the calling code uses it. E.g. to put the exception text in it).

[slorber]

Same issue here for Docusaurus integration.

We render Mermaid diagrams on a React app and already handle thrown errors with <ErrorBoundary> components to display an error message.

We don't need the weird bomb icon + error message text being appended at the end of the DOM 😅

Other related issues:

• Is there any way to customize errorRenderer ? #2317
• Syntax error in text appears under the body tag. #4730

---

A workaround is to remove the error as soon as it is added to the DOM, cf solution proposed by @sidharthv96 in mermaid-js/mermaid-live-editor#1288

My adapted version for Docusaurus integration (facebook/docusaurus#9305):

try {
  return await mermaid.render(id, text);
} catch (e) {
  document.querySelector(`#d${id}`)?.remove();
  throw e;
}

Of course it would be much cleaner if there was a way to make the errorRenderer optional or configurable here:

https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/mermaidAPI.ts#L478

  // -------------------------------------------------------------------------------
  // Draw the diagram with the renderer
  try {
    await diag.renderer.draw(text, id, version, diag);
  } catch (e) {
    errorRenderer.draw(text, id, version);
    throw e;
  }

Is there a good reason to not add config.errorRenderer and allow it to be null?

---

Here's a more visual illustration of the problem, showing the Mermaid error being displayed twice (by me, and by Mermaid). I want to render Mermaid errors on my own.

[sidharthv96]

#4359 is almost there. But some minor issues.

[silverwind]

I hide those errors with CSS. Ideally I would like to see these error rendering off by default.

[Philipinho]

For anyone searching, suppressErrorRendering: true was released in v11.0.0.

mermaid.initialize({
  suppressErrorRendering: true,
});

[zzkkui]

suppressErrorRendering

suppressErrorRendering: true will make the rendered DOM empty, but now the scenario is that my content is returned in streaming mode. During the rendering process, empty and charts are constantly switched. Is there a way to directly return the passed string when a rendering error occurs?