The Mermaid API: the global mermaid, or the package's default export
The diagram's source text
The rendered diagram
Figure options
The MAIDR figure, ready for the maidr attribute
const text = 'flowchart LR\n A[Start] --> B{OK?}\n B -->|yes| C[Ship]';
const { svg } = await mermaid.render('flow', text);
container.innerHTML = svg;
const svgElement = container.querySelector('svg');
const maidr = await maidrMermaid.createMaidrFromMermaid(mermaid, text, svgElement);
svgElement.setAttribute('maidr', JSON.stringify(maidr));
Creates a MAIDR figure from a Mermaid diagram that has been rendered.
Call it after the SVG is in the page: the layers' selectors name the elements Mermaid drew. The text is parsed again with Mermaid's own parser, so pass exactly the text that was rendered.