Ghost blog - Mermaid 사용하기

순서도 그릴일이 많아서 mermaid를 사용하면 간편한데, ghost blog에서는 mermaid를 사용하기 위해 살~짝 귀찮은 작업이 필요하다.

mermaid가 뭔가요? 하시는 분은 아래 링크 참고 하세요~

Tutorials | Mermaid

Create diagrams and visualizations using text and code.

Mermaid

ghost blog에서 mermaid를 사용하는 방법을 알아보자.

설정방법

아래의 경로로 진입한다.

관리자 화면 -> Settings -> Code injection

그리고 footer 부분에 아래 code 를 추가하자!

<script src="https://unpkg.com/mermaid@9.4.3/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true, theme: 'dark'});</script>
<style>
    div.mermaid {
  		text-align: center;
    }
</style>

Mermaid 사용해보기

1. HTML block을 추가한다.

2. 아래의 code를 삽입한다.

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

3. 적용된 모습을 확인해보자.

끗~