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

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

<script src=""></script>