Use Mermaid In Your Ghost.org Blog to Draw Diagrams

In my post on connecting a vinyl player to speakers using an Ethernet cable, I visualized the connected elements using the diagramming tool mermaid.

To do this, you simply have to load the library into the current page via Ghost's code injection feature. While editing your post, go to "Post settings" on the right, select "Code injection" and paste this code into the footer section of your page:

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

Now, you can use mermaid in any HTML field you add to your post. For the diagram mentioned earlier, I used this piece of HTML:

This then generates this left-to-right (LR) diagram: