마크다운에서 차트 그리기 (Mermaid.js)

Mermaid.js는 마크다운에서 차트를 그릴 수 있게 해주는 도구다.

IDE에서 플러그인으로 설치하거나 공식 홈페이지에서 제공하는 라이브 에디터를 통해 차트를 생성할 수 있다.

혹은 CDN이나 npm과 같은 패키지 매니저를 이용해 설치한 후 사용하는 것도 가능하다.

생성할 수 있는 차트의 종류는 아래와 같이 매우 다양하다.

플러그인으로 설치했다면 마크다운 작성 시 언어 이름을 적는 부분에 mermaid 를 입력한 후 내용을 작성하면 된다.

Mermaid.js의 문법은 제법 직관적인 편이기 때문에 조금만 보면 사용하는데 지장은 없다.

예를 들면, 플로우 차트 같은 경우는 아래와 같은 문법으로 작성된다.

더 복잡한 형태의 차트를 만드는 것도 가능하다.

Mermaid.js를 별도의 설치 없이 사용하고 싶다면 라이브 에디터를 이용하면 된다.

라이브 에디터에서는 각 차트들의 샘플 데이터를 볼 수 있으며 좌측 하단의 Action에서 png 혹은 svg로 다운로드 할 수도 있다.