Does Talkyard render mermaid diagrams in a post?

Short answer: no — Talkyard doesn't render Mermaid today. A fenced mermaid block shows up as a plain (monospace) code block, not a diagram.

I verified this on a live test topic here (/-177). The CommonMark pipeline (markdown-it -> Google Caja sanitizer) turns this:

graph TD
  A[Browser] --> B[caddy] --> C[web]

...into <pre><code class="language-mermaid">...</code></pre> — so the language-mermaid class is even preserved, but:

• no Mermaid library is loaded on forum pages, and nothing scans posts for diagram blocks, so it stays as text;
• inline <svg> is stripped by the sanitizer, so you can't paste a pre-rendered diagram either;
• class/id attributes survive only on a topic's first post (body) — in replies they're stripped, so even the marker disappears.

Can it be added without changing Talkyard's code? Yes — mostly. Talkyard emits three admin-only settings verbatim into every page (headScriptsHtml, endOfBodyHtml, headStylesHtml). So from Admin -> Settings you can inject a small script (~40 lines) that loads mermaid.js, finds code.language-mermaid blocks after each post renders (via a MutationObserver, since the forum is a React SPA), and renders them with Mermaid's securityLevel: 'strict' (important — the diagram source is untrusted input). By default there is no script-src CSP, so this just works; a CDN or a self-hosted asset are both fine.

Caveat: because the language-mermaid class only survives in topic bodies, the pure admin-JS route renders diagrams in first-posts reliably and misses replies.

Full support (incl. replies) = a small core change, roughly: a markdown-it fence rule for mermaid, a bundled/lazy-loaded Mermaid chunk, a client enhancer hooked into the post-render path, an admin on/off toggle, and adding language-mermaid to the sanitizer's allowed classes so the marker survives in replies too. It degrades gracefully to a code block for no-JS / SEO (Mermaid can't realistically render server-side in Nashorn). Ballpark: a few hundred lines, no new backend services.

I'm prototyping the admin-JS approach on the dev instance now and can share a working snippet.

✅ Solution: enable Mermaid on a Talkyard forum (no source changes)

Out of the box, Talkyard does not render Mermaid — a ```mermaid block shows as a plain code block, because the forum loads no diagram library and its HTML sanitizer removes inline <svg>.

You can add it in ~2 minutes with one admin setting — no code changes, and it works on any self-hosted Talkyard:

1. Go to Admin area → Settings → Site, and find the textarea labelled </body> HTML (it inserts markup just before the closing </body> tag).
2. Paste this in and Save:

<script type="module">
/* Client-side Mermaid for Talkyard. Renders fenced mermaid code blocks and raw
   <pre class="mermaid"> to SVG. securityLevel:'strict' (diagram src is untrusted). */
(function () {
  var loaded = null;
  function getMermaid() {
    if (!loaded) loaded = import('https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs')
      .then(function (mod) { var m = mod.default;
        m.initialize({ startOnLoad:false, securityLevel:'strict', theme:'neutral' }); return m; });
    return loaded;
  }
  var n = 0;
  function targets() {
    var out = [];
    document.querySelectorAll('code.language-mermaid, pre.mermaid').forEach(function (el) {
      var pre = el.tagName === 'PRE' ? el : el.closest('pre');
      if (pre && !pre.hasAttribute('data-mmd')) out.push(pre);
    });
    return out;
  }
  function run() {
    var list = targets(); if (!list.length) return;
    getMermaid().then(function (m) {
      list.forEach(function (pre) {
        if (pre.hasAttribute('data-mmd')) return;
        pre.setAttribute('data-mmd', '1');
        m.render('mmd-' + (n++), pre.textContent.trim()).then(function (res) {
          var box = document.createElement('div');
          box.className = 'mermaid-rendered'; box.style.cssText = 'margin:.6em 0;text-align:center';
          box.innerHTML = res.svg; pre.replaceWith(box);
        }).catch(function () { pre.removeAttribute('data-mmd'); });
      });
    });
  }
  var timer;
  function schedule() { clearTimeout(timer); timer = setTimeout(run, 200); }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', schedule); else schedule();
  try { new MutationObserver(schedule).observe(document.body, { childList:true, subtree:true }); } catch (e) {}
})();
</script>

1. Reload a topic — Mermaid diagrams now render. Authors just write a normal fenced code block:

graph TD
  A[Browser] --> B[caddy] --> C[web] --> D[app]

Where it works

Any post — the original post and replies alike. Use either a fenced ```mermaid code block (recommended) or a raw <pre class="mermaid">…</pre>. Verified live on this forum: the diagram just above renders, and diagrams posted in replies render too.

The one thing the sanitizer strips is inline <svg>, so you can't paste a pre-rendered SVG — write the diagram source and let Mermaid draw it.

Notes & hardening

• Security: securityLevel:'strict' is deliberate — diagram source is user input, and strict mode disables HTML-in-labels and click handlers (the usual Mermaid XSS vectors). Keep it.
• CDN vs self-host: the snippet pulls Mermaid from the jsDelivr CDN (and only on pages that actually contain a diagram — the library is loaded lazily). To avoid a third-party dependency, download mermaid.esm.min.mjs, host it on your own origin, and change the import() URL — optionally pin an exact version.
• No-JS / SEO: with scripts off, diagrams stay readable as code blocks; nothing breaks.
• CSP: Talkyard sets no script-src policy by default, so the inline script + import run fine. (If you turned on the ffUseScriptSrcSelfCsp feature flag, add your script/CDN origin to it.)

That's the whole thing: paste one script → Mermaid diagrams anywhere on your forum.