Mermaid diagrams on Ghost

There is an article on Ghost's official website on code highlighting. The use of mermaidjs can also be easily implemented.

Settings > Code injection > Site header:

<script type="module">
  import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/+esm";
  mermaid.initialize({ startOnLoad: true });
</script>

Use it in editor by adding an HTML block:

<div class="mermaid">graph TD; A-->B; A-->C; B-->D; C-->D;</div>

More customization is possible too:

<script type="module">
  import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/+esm";

  // Dark mode support
  const prefersDarkMode = window.matchMedia(
    "(prefers-color-scheme: dark)",
  ).matches;
  const theme = prefersDarkMode ? "dark" : "forest";

  // Initialize mermaid
  mermaid.initialize({
    startOnLoad: true,
    theme: theme,
    fontFamily: "Fantasque Sans Mono",
  });
</script>