Redmine

Problem¶

When a page contains multiple Mermaid diagrams, a diagram may be drawn into another diagram, and its own place is left empty. In the screenshot below, Diagram 3 is drawn into Diagram 2.

Cause¶

mermaid.run() generates the SVG id from Date.now(), so diagrams that start rendering in the same millisecond get the same id. Some Mermaid renderers look up their target element by id, so they draw into the wrong diagram. #44584 pointed out the same cause, but its fix only stopped error diagrams from being drawn, and the duplicate ids remain.

Solution¶

The attached patch renders each diagram with mermaid.render() and a unique id. With the patch, each diagram is drawn in its own place.