No internet connection
  1. Home
  2. Documentation
  3. How To

How to add Mermaid to Talkyard

By KajMagnus @KajMagnus2021-06-17 04:31:13.561Z2021-06-17 04:47:44.916Z

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?)

Linked from:

  1. support-chat
  • 2 replies
  1. KajMagnus @KajMagnus2021-06-17 04:39:49.697Z2021-06-17 07:31:06.786Z

    Here is a mermaid diagram: (works on this page only — I added an if (location.pathname === ...) test before loading the Mermaid script.)

    graph TD A[Kitten] --> B[Thinking] B --> C[Play] B --> D[Sleep] B --> D[Sleep] B --> D[Sleep] B --> D[Sleep] B --> E[Sleep] B --> E[Sleep] B --> F[Milk] B --> G[Sleep] E --> Dr[Dream about] G --> Dr Dr --> Ch[Birds and/or butterflies] Dr --> DaM[Milk drinks, non-alcoholic] Dr --> DaS[Sleeping]
    1. D
      In reply toKajMagnus:
      Daniel Tallentire @danielt2021-06-17 09:46:03.674Z

      A checkbox would be lovely to have, but I don't think its essential - probably depends on what other users think.
      I think with aiming for the stackoverflow / developer crowd, mermaid, and probably code syntax highlighting would be great additional options that would see plenty of use.