> ## Content Index
> Fetch the complete content index at: https://notes.ansonbiggs.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# How to use Mermaid on your Ghost Blog
- URL: https://notes.ansonbiggs.com/how-to-use-mermaid/
- Published: 2019-01-04T10:53:49.000Z
- Updated: 2024-09-23T07:46:15.000Z
- Description: Render Mermaid code into beautiful diagrams on your Ghost Blog.
- Author: Anson
- Tags: Notes, Code, Ghost, Web Dev, Mermaid

## What is Mermaid?

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

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.**](https://mermaidjs.github.io/)

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

graph TD; A\[Open Admin Interface\] --> B\[Open Code Injection\] B --> C\[Paste Code\] C --> D\[???\] D --> Profit??? 

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](https://unpkg.com/mermaid@8.0.0/dist/)

```javascript
    <script src="https://unpkg.com/mermaid@8.0.0/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.

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

```