Document how to render Mermaid graphs

[jonatanklosko]

Closes #1434.

@fhunleth please give it a try and let me know if it works for you.

FTR initially I tried a slightly simpler solution, which was to first replace all <pre> tags with <div class="mermaid"> and then run the automatic rendering:

document.addEventListener("DOMContentLoaded", function () {
  for (const codeEl of document.querySelectorAll("pre code.mermaid")) {
    const preEl = codeEl.parentElement;
    const graphDefinition = codeEl.textContent;
    const graphEl = document.createElement("div");
    graphEl.classList.add("mermaid");
    graphEl.textContent = graphDefinition;
    preEl.insertAdjacentElement("afterend", graphEl);
    preEl.remove();
  }
  mermaid.initialize({ startOnLoad: true });
});

Then I tried a more manual approach, which I included in this PR. The primary difference is when the graph definition is invalid. When rendering manually we keep the definition in a <pre> tag so it can be read and there is an error in the console. On the other hand, when using the auto rendering the element gets replaced with a huge "failed to render" image and there's nothing useful in the console.

[josevalim]

💚 💙 💜 💛 ❤️