Mermaid - 코드로 그래프를 그려보자

블로깅을 하다보면 여러가지 도표가 필요할 때가 있다.
간단한 다이어그램 같은 경우는 직접 그릴 수도 있겠지만, 그조차 많은 시간이 소요되고,
좀 더 깔끔해 보이기 위해 직접 CSS로 작성하려고 해도 그 과정이 굉장히 번거롭다.
심지어 구조가 복잡한 도식이라면 시작조차 쉽지 않다.
그럴 때마다 다른 곳에서 가져온 이미지를 그대로 사용하기에는 출처를 밝히기도 애매하고 블로그도 무거워 지는 느낌이 든다.

Mermaid는 JavaScript 기반으로 마크다운을 사용하여 다이어그램과 도표를 그릴 수 있도록 도와주는 도구이다.
기본적으로 IDE에서는 익스텐션을 통해 마크다운 기반으로 쉽고 빠른 작성과 결과 확인이 가능하지만 몇가지 과정을 추가하면 Jekyll의 포스팅에도 어렵지 않게 적용시킬 수 있다.

head 태그에 추가해야할 코드

Mermaid 스크립트 로드

<head>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>

footer 혹은 body 태그 마지막에 추가해야할 코드

Mermaid 스크립트 로드 후, 페이지 로드 시 Mermaid를 초기화하는 스크립트

<footer>
<script>mermaid.initialize({startOnLoad:true});</script>
</footer>

적용

<body>
    <div class="mermaid">
        <!-- 다이어그램 코드 -->
    </div>
</body>

예시

<body>
    <div class="mermaid">
        graph LR;
        A-->B;
        B-->C;
        C-->D;
        D-->F;
        A-->E;
        E-->F;
    </div>
</body>

결과

graph LR; A-->B; B-->C; C-->D; D-->F; A-->E; E-->F;

참고로 GitHub에서도 Mermaid를 지원하기 때문에 마크다운으로 작성시 프리뷰에 잘 적용된다.

더 많은 Mermaid 문법에 대해서는 Mermaid 공식 문서를 참고하자.