Currently, it looks like the code that generates the Mermaid diagram is not passing in anything for the id parameter. This causes Mermaid to use the default id of diagram. This will conflict with other elements on the page that have the same id.
You could allow a new property on the Diagram element that allows the id to be specified like this:
<Diagram id="foo" code={code} config={config}/>
The code change would be in the file https://github.com/JulianCataldo/web-garden/blob/develop/components/Diagram/Diagram.astro on line 24:
You'll need to handle the safeguards as well. I'm happy to submit a PR if you prefer. 😁
Currently, it looks like the code that generates the Mermaid diagram is not passing in anything for the
idparameter. This causes Mermaid to use the defaultidofdiagram. This will conflict with other elements on the page that have the sameid.You could allow a new property on the
Diagramelement that allows theidto be specified like this:The code change would be in the file https://github.com/JulianCataldo/web-garden/blob/develop/components/Diagram/Diagram.astro on line 24:
You'll need to handle the safeguards as well. I'm happy to submit a PR if you prefer. 😁