How to use Mermaid on your Ghost Blog

What is Mermaid?

Diagrams like the one above usually require expensive software to create and have GUIs that can be a pain to use. Mermaid fixes this with a Markdown style approach by using a simple syntax to generate beautiful diagrams, flowcharts and even GANTT Charts quickly. For example, the above flowchart was easily made with the following code.

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Mermaid has a large variety of chart types and many other features that cover pretty much all the bases for any sort of diagram or chart you would want to make. The official documentation is the best resource to find out more.

Mermaid support in markdown editors is becoming more popular, but unfortunately, Ghost Markdown does not support this feature. Luckily, it is effortless to add to a Ghost Blog so you can get working.

Adding Mermaid to Ghost

It's really as simple as the diagram makes it.

1. Open the ghost Admin Interface, i.e. www.yourblog.com/ghost
2. Open the Code Injection Tab
3. Paste the following code into the blog header section, making sure that the version is the most recent which can be found here

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

Then your blog should be able to render Mermaid. Unfortunately it doesn't work natively in markdown with code blocks but using html makes it render fine like the example below.

<div class="mermaid">
    graph TD;
        A[Open Admin Interface] --> B[Open Code Injection]
        B --> C[Paste Code]
        C --> D[???]
        D --> Profit???
</div>