December 12, 2020

Ghost Blog and Mermaid

I'm fond of Mermaid.js, a library for creating diagrams from code-like input. It can be easily integrated into markdown based renderers like VSCode, and into HTML renderers like this web page.

graph LR A --> B --> C --> A B --> D

The diagram above was created with this snippet in a Ghost-HTML block:

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

I added the following to the Footer Code Injection option in the Ghost admin interface to make it work:

<script src="https://unpkg.com/mermaid@8.8.4/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>