as title
#Markdown mermaid is not supported
digital yew
dawn sunBOT
Hi @digital yew. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the information from the extracts, it seems there was an issue with Markdown Mermaid not being supported in Astro, as discussed in a GitHub issue. However, there are solutions and workarounds provided by the community to integrate Mermaid diagrams into Astro projects.
One approach involves using rehype-mermaid and rehype-shikiji plugins with Astro's Markdown configuration to render Mermaid diagrams without needing client-side JavaScript. This method was detailed in a comment from the GitHub issue:
// <https://astro.build/config>
export default defineConfig({
markdown: {
rehypePlugins: [rehypeMermaid, [rehypeShikiji, { theme: 'github-dark' }]],
syntaxHighlight: false
},
})
This configuration allows Mermaid syntax within code fences in Markdown files to be rendered as inlined SVG diagrams.
Another user shared a method for optimizing the loading of Mermaid diagrams by ensuring they only load when the .mermaid elements become visible in the viewport. This involves using an IntersectionObserver in combination with dynamic imports:
<script>
async function renderDiagrams(graphs: HTMLCollectionOf<HTMLElement>) {
const { default: mermaid } = await import("mermaid");
mermaid.initialize({
startOnLoad: false,
fontFamily: "var(--sans-font)",
theme: window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "default",
});
for (const graph of graphs) {
const content = graph.getAttribute("data-content");
if (!content) continue;
let svg = document.createElement("svg");
const id = (svg.id = "mermaid-" + Math.round(Math.random() * 100000));
graph.appendChild(svg);
mermaid.render(id, content).then((result) => {
graph.innerHTML = result.svg;
});
}
}
</script>