워드프레스 구텐베르크에서 Mermaid 다이어그램 그리기

graph LR M --> e e --> r r --> m m --> a a --> i i --> d

위와 같은 다이어그램을 그리는 R패키지중에 DiagrammeR라는 것을 소개드리면서 Mermaid에 대한 설명을 잠깐 했었습니다.  

지난 포스트 링크입니다.
DiagrammeR – R 다이어그램 그리기

워드프레스 구텐베르크 편집기를 사용할 때 조금 손이 가지만 그래도 워드프레스의 설정에서 고난의 삽질을 하지 않고 간단하게 Mermaid를 사용하는 방법을 설명드리려고 합니다. 데이터사이언스와 관련없는 포스트는 이 블로그에는 잘 안쓰지만 일탈을 해봤습니다.

구텐베르크 Gutenberg

Mermaid를 워드프레스(WordPress)에서 사용하는 방법을 설명하기전에 구텐베르크 얘기를 먼저 해야 하겠습니다.

워드프레스가 글 편집기로 구텐베르크(Gutenberg)라는 것을 쓰도록 유도한지가 꽤 된 것 같습니다. 이 포스트를 쓰는 시점으로부터 수개월 전으로 기억합니다. 원래 구텐베르크가 워드프레스에 기본 패키지에 포함되어 있지는 않는 것 같은데  “편집기로 구텐베르크 써보지 않겠어?” 라는 식으로 관리자화면에서 자꾸 물어보길에 예전에 무심결에 눌러서 플러그인을 설치한 후에 제 블로그도 구텐베르크로 작성하고 있습니다. 그 뒤로는 전 너무 멀리 와버렸습니다. ‘ㅁ’;

구텐베르크는 포스트를 쓰면서 블럭 단위로 콘텐트를 나눠서 관리하고 편집하는 방식인데 위지윅(WYSIWYG)에 중점을 더 둔 편집방식입니다. 물론 그전 방식인 클래식 에디터를 같이 쓸 수 있습니다만 클래식 편집기로 작성한 글은 클래식편집기로만 열리고 구텐베르크로 작성한 것은 구텐베르크 편집기로 열립니다. 

구텐베르크 편집기를 쓰면 편리한 점이 더 많아서 저는 구텐베르크를 주로 쓰고 있습니다. 구텐베르크라는 이름처럼 출판 편집을 위한 소프트웨어를 사용하는 기분이 듭니다.

구텐베르크는 사용하려면 적응기간이 조금 필요합니다. 버그도 아직 꽤 있습니다. 복잡한 구조의 포스팅을 안하시는 분들께는 좋겠고 복잡한 요소들이 잔뜩 있는 포스트를 장벽이 큽니다.

기존에 잘 쓰던 플러그인과 충돌을 하거나 작동이 안되는 부분도 꽤 많아서 플러그인을 별도로 찾아서 추가 설치해야 하거나 포기해야 하는 부분도 상당합니다. 그래서 클래식 편집기에서는 플러그인만 설치하거나 익숙하게 했던 작업도 구텐베르크를 쓰면서 부터는 많이 힘들어졌습니다.

워드프레스에 Mermaid.js 추가하기

워드프레스에 Mermaid.js를 사용하려면 Mermaid.js와 CSS하나만 추가해주면 됩니다. 그런데 이게 플러그인이 없으면 추가하기가 조금 곤란합니다. 현재까지 제대로 지원하는 플러그인은 못찾았고 functions.php를 수정하는 방법이 일반적인데 그렇게하고 싶지는 않았습니다.  저렇게 하면 워드프레스를 업그레이드하거나 테마를 바꾸거나 하면 난장판이 되었던 경험이 있습니다.

그래서 간단하게 붙이는 방법은 글편집에서 워드프레스 구텐베르크 타입에 HTML 요소라는 것이 있어서 블럭 유형을 HTML으로 바꾸고 다음과 같이 HTML 코드를 넣으면 됩니다.

<script src="https://unpkg.com/mermaid@8.0.0-rc.8/dist/mermaid.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/knsv/mermaid/0.5.6/dist/mermaid.css">
<script>
mermaid.initialize({
        startOnLoad: true,
        flowchart: { curve: 'basis' } 
});
</script>

<code class="mermaid">
graph LR
  M --> e
  e --> r
  r --> m
  m --> a
  a --> i
  i --> d
</code>

소스 코드에서 js 파일의 링크과 css는 적당히 최신의 것으로 찾아서 바꾸시면 되고 Mermaid코드를 넣을 때 code 태그에 class를 mermaid로 지정하시는 부분이 핵심입니다. code 태그 대신 div나 pre 태그를 사용하면 “>” 기호와 다른 특수문자들을  인코딩(특수기호들을 &#으로 시작하는 코드로 바꾸는 것)하기 때문에 Mermaid.js가 다이어그램 문법을 해석하지 못해서 그림이 표현이 안됩니다. 현재 워드프레스에서는 code 태그의 안쪽은 HTML 인코딩을 하지 않습니다.

위의 소스코드에서 js와 css 파일을 인클루드하는 것은 따로 보관해 두거나 전에 작성했던 포스트에서 복사해서 붙이기는 방법을 쓰고  Mermaid 코드 부분만 따로 작성해서 code 태그 안쪽에 붙여 넣으면 Mermaid 다이어그램을 붙여 넣을 수 있습니다.