[Mermaid] Mermaid 기능 사용

1. Overview

Jekyll github blog에서 mermaid 를 사용하여 graph(chart 등)이 그려지지 않았었다.

git white plug list라는 word 로 검색을 해보니, 현재 mermaid plugin은 지원하지 않고 있어

javascript 삽입 방식으로 사용해야 한다.

2. mermaid 설치

여기를 눌러 보면 Mermaid plugins 사용 방법을 확인할 수 있다.

아래의 내용과 동일하다.

2.1 javascript 삽입

_include/head.html 파일 끝에 삽입한다.

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js">
    mermaid.initialize({ startOnLoad: true });
</script>

2.2 mermaid api 호출

<div class="mermaid">
    graph LR;
    WebLogic --> JTA[JTA Timeout];
    JTA --> XA[XA Timeout];
    XA --> DB[DB Lockout Timeout];
</div>

위 상자안의 일반 텍스트만 사용하면 다음과 같이 그릴 수 있다.

graph LR; WebLogic --> JTA[JTA Timeout]; JTA --> XA[XA Timeout]; XA --> DB[DB Lockout Timeout];

mermaid.initialize 메서드가 div class 를 해독하여 렌더링 한다.