"Error: Diagram error not found." on await mermaid.mermaidAPI.render(id, text)

[AlbinoGeek]

Description

When I call the new async mermaid.mermaidAPI.render -- I get the error (see title).

Steps to reproduce

1. Run code sample
2. Receive non-descript error

Screenshots

Code Sample

const mermaidConfig = {
  darkMode:  true,
  flowchart: {
    curve:       'basis',
    useMaxWidth: true,
  },
  fontFamily:    'Fira Code',
  maxTextSize:   1024 * 100,
  securityLevel: 'loose',
  startOnLoad:   true,
  theme,
  themeCSS,
}

const value = "graph TD\n\nHello --> World"

mermaid.mermaidAPI.initialize(mermaidConfig)

ref.current.removeAttribute('data-processed') // silly mermaid thinks it needs a DOM element
const svg = await mermaid.mermaidAPI.render(  // was mermaid.mermaidAPI.renderAsync
  'mermaid',
  value
)
ref.current.setAttribute('data-processed', 'true') // silly mermaid thinks it needs a DOM element

const buff = Buffer.from(svg.svg) // mermaid 10: svg -> svg.svg?
const base64data = buff.toString('base64')
setSvgData(base64data)

Setup

Desktop

• OS and Version: Windows 10
• Browser and Version: Chrome, Edge, Firefox, Opera

Additional Context

Non-descript error is non-descript.

[AlbinoGeek]

Cause

mermaid/packages/mermaid/src/diagram-api/diagramAPI.ts

Lines 68 to 73 in 6b251de

	export const getDiagram = (name: string): DiagramDefinition => {
	if (name in diagrams) {
	return diagrams[name];
	}
	throw new Error(`Diagram ${name} not found.`);
	};

Stack Trace (without mermaidAPI)

(in promise) Error: Diagram error not found.
    at getDiagram (utils-3cbdbddf.js?27b3:2210:1)
    at new Diagram (mermaidAPI-a1a81019.js?84fa:390:31)
    at Object.render (mermaidAPI-a1a81019.js?84fa:665:1)

Stack Trace (with mermaidAPI)

(in promise) Error: Diagram error not found.
    at getDiagram (utils-3cbdbddf.js?27b3:2210:1)
    at new Diagram (mermaidAPI-a1a81019.js?84fa:390:31)
    at Object.render (mermaidAPI-a1a81019.js?84fa:665:1)
    at async renderAsync (Renderer.tsx?497d:185:19)

[sidharthv96]

It's a concurrency bug when startOnLoad: true, is set.
You can set that to false until the fix is released.

[sidharthv96]

const { svg } = await mermaid.render( // mermaid 10: svg -> { svg }
  'mermaid',
  value
)
const buff = Buffer.from(svg) 

[AlbinoGeek]

@knsv It turns out you can actually cause this two ways:

1. With startOnLoad: true like you fixed.
2. With startOnLoad: false, but invalid syntax.

The second case is not fixed.

I lack permission to re-open, but please consider doing so.

[shtratos]

@AlbinoGeek can you please share an example how it can be reproduced with startOnLoad: false?

I suspect I'm running into this too in
mjbvz/vscode-markdown-mermaid#177

[AlbinoGeek]

I don't quite know what changed, but it's all fixed now, can no longer reproduce!