[Bug] Can not use render method with mindmap and timeline

[Mister-Hope]

Description

Error diagram will be shown if rendering mindmap and timeline diagrams with mermaid.render() as they seems to be async. (Also they are also not working as expected with renderAsync)

Also, since mermaid:

• does not provide a api to detect whether a diagram has been registered
• will throw if registing a diagram that already registered before

The 3rd and 4th errors are triggered.

Step to reproduce:

use mermaid.render to render any content with timeline or mindmap

Related code:

Here diagrams are added during render:

mermaid/packages/mermaid/src/mermaidAPI.ts

Line 383 in b5a4cc0

addDiagrams();

However they are async:

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

Line 111 in 25da0c6

registerLazyLoadedDiagrams(flowchartElk, timelineDetector, mindmapDetector);

Breaking changes unlisted

mermaid 9.3 use @mermaid-js/mermaid-mindmap for mindmap, however it's removed in repo and seems to be deprecated, this is NOT listed in changelog!

[knsv]

Thanks for pointing this out. We will add that to the release notes.

Mind maps has been included in the package so that users don't have to anything to have it available. This did not work properly. We have added another diagram, timeline, that likely will suffer from the same problem. We hoped to avoid breaking changes but missed this.

We were/are planning an api update to make all rendering async, that will be v10. I guess this accelerates that plan.

[Mister-Hope]

We were/are planning an api update to make all rendering async, that will be v10. I guess this accelerates that plan.

Then maybe jsdocs is wrong?

This is not marked as deprecated:

mermaid/packages/mermaid/src/mermaidAPI.ts

Lines 351 to 377 in fec193e

	/**
	* Function that renders an svg with a graph from a chart definition. Usage example below.
	*
	* ```javascript
	* mermaidAPI.initialize({
	* startOnLoad: true,
	* });
	* $(function () {
	* const graphDefinition = 'graph TB\na-->b';
	* const cb = function (svgGraph) {
	* console.log(svgGraph);
	* };
	* mermaidAPI.render('id1', graphDefinition, cb);
	* });
	* ```
	*
	* @param id - The id for the SVG element (the element to be rendered)
	* @param text - The text for the graph definition
	* @param cb - Callback which is called after rendering is finished with the svg code as in param.
	* @param svgContainingElement - HTML element where the svg will be inserted. (Is usually element with the .mermaid class)
	* If no svgContainingElement is provided then the SVG element will be appended to the body.
	* Selector to element in which a div with the graph temporarily will be
	* inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
	* element will be removed when rendering is completed.
	* @returns Returns the rendered element as a string containing the SVG definition.
	*/
	const render = function (

However this is:

mermaid/packages/mermaid/src/mermaidAPI.ts

Lines 580 to 584 in fec193e

	/**
	* @deprecated This is an internal function and should not be used. Will be removed in v10.
	*/
	const renderAsync = async function (

[sidharthv96]

#4091 (comment)

[sidharthv96]

Fixed in v10.