Mermaid - Flowchart at Markdown

이게 된다고??

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

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

적용 방법.

jekyll + Github Pages 조합에서는 사용하기 위해 조금 다른 처리를 해야한다.

1. _include 디렉토리 아래에 mermaid script를 불러오기 위한 html을 준비한다.

    <script type="text/javascript"
    src="https://unpkg.com/mermaid@8.0.0-rc.8/dist/mermaid.min.js">
    </script>
    <script>
    $(document).ready(function() {
        mermaid.initialize({
            theme: 'forest'
        });
    });
    </script>
   

2. head에 아래 코드를 추가하여, markdown page의 mermaid 값이 있을 경우에만 mermaid js를 불러오게끔 한다.

    {% if page.mermaid %}
        {% include mermaid.html %}
    {% endif %}
   

3. markdown page에 mermaid 적용 예시

    ---
    title: "blahblah"
    date: 2022-04-09 22:15:00 +0900
    classes: wide
    toc: true
    tags:
        - tech
        - ETC
    mermaid: true
    ---