Mermaid

글로써 다이어그램과 차트를 표현한다

Doc-Rot을 해결하고자 만들어진 JavaScript 기반 다이어그램 및 차팅 툴이다.

블로그, README 등을 작성할 때 기술적인 개념을 설명하고자 다이어그램을 그려야 할 때가 많다.

UML 다이어그램부터 시작해서 깃 브랜칭 전략 등등... 다양한 상황에서 개발자는 다이어그램을 그리곤 한다.

draw.io와 같은 툴을 이용해서 그릴 수 있지만 가끔 마우스를 움직이는 게 너무 귀찮다. 다이어그램을 마우스를 사용해 그리기보단 다이어그램을 코딩하는 게 더 낫다는 생각이 든다.

실제로 dbdiagrams.io에서는 데이터베이스 다이어그램을 특정 문법을 이용해 '코딩'할 수 있다. 굉장히 만족하면서 사용했다. 물론 무료로는 한계가 있어서 자주 써먹지는 못했다.

그러던 중 이 Mermaid라는 것을 발견했는데, 아직 압도적이라고 할 순 없지만 꽤 사용하는 곳도 많고, 그림은 한 번 그리면 업데이트하려면 다시 처음부터 그려야해서 번거로운 반면, Mermaid는 마크다운과 비슷한 문법으로 그림을 '작성'할 수 있다.

책을 볼 때 300자 짜리 글보다 그림 한 장에 더 이해가 될 때가 많다.

이건 블로그를 쓸 때도 마찬가지인데, 이 블로그도 최대한 많은 사람들이 이해할 수 있으면 한다.

그래서 Mermaid 어떻게 쓰냐고? 나도 궁금하다... 그래서 배워서 정리해보려고 한다.

Last updated 2 months ago