Skip to content

Instantly share code, notes, and snippets.

@frafra
Last active April 25, 2023 14:12
Show Gist options
  • Save frafra/b6ea0063724eeb6afc3d401388b65663 to your computer and use it in GitHub Desktop.
Save frafra/b6ea0063724eeb6afc3d401388b65663 to your computer and use it in GitHub Desktop.
Render with mermaid and kroki, with support for mdbook
// <script type="module">
var server = "https://kroki.io";
var libraries = [
"bytefield",
"c4plantuml",
"d2",
"ditaa",
"erd",
"graphviz",
"dot",
"nomnoml",
"pikchr",
"lantuml",
"structurizr",
"svgbob",
"umlet",
"vega",
"vegalite",
"wavedrom",
];
import pako from "https://cdn.jsdelivr.net/npm/pako@2/+esm";
import { Base64 } from "https://cdn.jsdelivr.net/npm/js-base64@3/base64.mjs";
function getLanguage(classList) {
for (let i = 0; i < classList.length; i++) {
if (classList[i].startsWith("language-")) {
return classList[i].replace("language-", "");
}
}
}
document.addEventListener("DOMContentLoaded", function () {
var selector = libraries.map((i) => ".language-" + i).join(", ");
var nodes = document.querySelectorAll(selector);
for (let i = 0; i < nodes.length; i++) {
var data = new TextEncoder("utf-8").encode(nodes[i].innerText);
var buffer = pako.deflate(data, { level: 9 });
var result = Base64.fromUint8Array(buffer, true);
var language = getLanguage(nodes[i].classList);
var graph = document.createElement("object");
graph.width = "100%";
graph.data = `${server}/${language}/svg/${result}`;
nodes[i].parentElement.replaceWith(graph);
}
});
// </script>

Just copy and paste one of the two files in theme/head.hbs and uncomment the script tags.

// <script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: false, securityLevel: 'loose' });
await mermaid.run({
nodes: document.querySelectorAll('.language-mermaid'),
});
// </script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment