33 lines
1 KiB
HTML
33 lines
1 KiB
HTML
<!-- Mermaid -->
|
|
<script type="module">
|
|
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
|
|
function initMermaid(isDark) {
|
|
mermaid.initialize({
|
|
theme: isDark ? "dark" : "default",
|
|
themeVariables: {
|
|
darkMode: isDark
|
|
},
|
|
startOnLoad: false,
|
|
});
|
|
mermaid.run();
|
|
};
|
|
|
|
// Add data-mermaid-code attribute on all mermaid block.
|
|
document.querySelectorAll(".mermaid").forEach((element) => {
|
|
element.setAttribute("data-mermaid-code", element.innerHTML);
|
|
});
|
|
|
|
initMermaid(document.documentElement.classList.contains("dark"));
|
|
|
|
// Re-render mermaid when theme changed.
|
|
document.body.addEventListener("set-theme", (e) => {
|
|
document.querySelectorAll(".mermaid").forEach((element) => {
|
|
const mermaidCode = element.getAttribute("data-mermaid-code");
|
|
if (mermaidCode != null) {
|
|
element.removeAttribute("data-processed");
|
|
element.innerHTML = mermaidCode;
|
|
}
|
|
});
|
|
initMermaid(e.detail === "dark");
|
|
});
|
|
</script>
|