How to add Mermaid to Talkyard

Mermaid, https://mermaid-js.github.io, is a Javascript diagramming and charting tool, where you can create diagrams by typing plain text. Here's one way to add Mermaid to Talkyard:

As admin, go to the admin area, the Look and feel | CSS and JS tab, and add this in the Javascript field:

// Mermaid-js
var mermaidLoaded = false;
var mermaidConf = {};
if (window.talkyard) talkyard.postElemPostProcessor = function(elem) {
  if (!document.querySelector('.mermaid'))
    return;

  console.debug("Mermaid diagram(s) found,");

  if (!mermaidLoaded) {
    console.debug("Loading Mermaid script...");
    debiki2.Server.loadJs('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js', function() {
      console.debug("Initing Mermaid ...");
      mermaidLoaded = true;
      mermaid.init();    // but this won't work:  initialize(mermaidConf);
    }, function() {
      console.warn("Error loading Mermaid");
    });
  }
  else if (mermaid) {
    console.debug("Initing Mermaid (script already loaded) ...");
    mermaid.init();    //  but no:   initialize(mermaidConf);
  }
  else {
    // Failed loading Mermaid?
  }
}

Save, and then create a topic with this text:

  Here is a mermaid diagram:
  <div class="mermaid">
    graph TD
    A[Client] --> B[Load Balancer]
    B --> C[Server01]
    B --> D[Server02]
  </div>

Now a diagram should appear. If you navigate to a different page, and back, it should still be there. And if you post a diagram in a reply, that should work too.

Here's the Mermaid API docs: https://mermaid-js.github.io/mermaid/#/./usage?id=calling-mermaidinit

(Maybe it'd be nice if there was a checkbox, like "Enable Mermaid", so you didn't need to copy-paste Javascript. And Talkyard could keep the Mermaid script up-to-date for you. What do you think?)