mermaid로 다이어그램 그리기

이번에 자료 작업을 하면서 mermaid.js로 다이어그램을 그릴 일이 많아져서 여기에 내가 터득한 방법들을 정리하고자 한다.

여기에서는 mermaid.live 사이트를 이용해 그림을 그렸다.

config는 다음과 같이 설정을 했다.

{
  "theme": "neutral",
  "flowchart": {
    "defaultRenderer": "elk"
  }
}

theme 는 base, default, dark, forest,neutral,null 이 있고 여기에서는 neutral를 선정했다.

flowchart옵션에서 defaultRenderer 는 “elk”를 선정했다. 다른 것 보다 곡선 배치가 더 깔끔하다는 느낌을 주기 때문이다.

이제 그림을 보고 먼저 각 객체들을 정의해 준다.

flowchart
classDef sss fill:none,stroke:none
classDef default fill:none
classDef dash fill:none, stroke-dasharray: 4

client["<div style='font-size:30pt'>fa:fa-user fa:fa-mobile-button</div>"]

game["게임서비스"]
rank["순위표 서비스"]
db@{img: "https://img.icons8.com/?size=100&id=8305&format=png", label: "순위표저장소", pos: "b", h: 50, constraint: "on"}

classDef 노드의 UI옵션을 미리 지정해 놓는 기능이다. sss 외곽선 및 채움을 없이 가져가는 것이며, dash 는 점선을 4로 옵션을 주면서 외곽선을 그린다. default 는 무조건 객체 생성시 이를 따르는 것을 의미한다.

mermaid는 fa(fontawsome) 을 지원한다. client["<div style='font-size:30pt'>fa:fa-user fa:fa-mobile-button</div>" 는 fontawsome을 사용해 client 에 user 및 mobile button 아이콘을 font-size:30pt로 그린다는 의미이다.

mermaid 11버전 이후로는 Special shapes 입력을 지원하는데 img도 이를 통해 넣을 수 있다.

db@{img: "https://img.icons8.com/?size=100&id=8305&format=png", label: "순위표저장소", pos: "b", h: 50, constraint: "on"}

는 웹 이미지 https://img.icons8.com/?size=100&id=8305&format=png 를 “순위표 저장소” 라는 라벨을 이미지 아래(pos:"b", 위에 붙이려면 pos:"t")에 붙이며 이미지 크기는 높이는 50, 가로세로 비율은 맞추어 표시(constraint:"on")함을 의미한다. fontawsome에서 지원하지 않는 아이콘 등을 icons8.com 등에서 찾아 붙일 수 있다.

이제 각 노드를 흐름에 따라 연결한다.

flowchart
classDef sss fill:none,stroke:none
classDef default fill:none
classDef dash fill:none, stroke-dasharray: 4

client["<div style='font-size:30pt'>fa:fa-user fa:fa-mobile-button</div>"]

game["게임서비스"]
rank["순위표 서비스"]

db(("<div style='font-size:30pt'>fa:fa-database</div>순위표 저장소"))

db@{img: "https://img.icons8.com/?size=96&id=RMtSR4z10z2l&format=png", label: "순위표저장소", pos: "b", h: 50, constraint: "on"}


client --> |"①게임에서 승리"|game --> |"②점수갱신"|rank 
client -->|"④ a. 순위표를 가져옴 &<br>b. 플레이어 순위 정보 가져옴"| rank
rank -->|"③점수갱신"| db

class db sss

그림에 따라 ①, ②, ③, ④를 연결하고 설명을 달았다. 최종 그림은 다음과 같다.