머가필요해

스웨덴 S/W 아키텍트 Knut Sveidqvist(어떻게 발음해야할지 모르겠다 😅)가

Visio를 사용하다가 문제를 겪고선 Markdown 문서와 잘 어울리는 텍스트 기반 다이어그램 작성기를 2014년 11월에 만들었다.

Mermaid라는 이름은 당시에 그의 아이들이 보고 있던 디즈니 애니메이션에서 영감을 받았다고 한다.

실제 만든 제품과 전혀 연관성이 없는 이름이라니 ... ㅋㅋㅋ 🤣

Mermaid는 여러 사이트를 보유하고 있다.

① 공식 홈페이지

  - https://mermaid.js.org/

  - URL 주소에서도 보이지만, 기반은 Javascript이다.

  - 2019년도에는 JavaScript Open Source Award 수상도 했다(The Most Exciting Use of Technology).

  - 앞으로 오픈소스 공식 홈페이지는 아래로 오라고 한다.

    . https://mermaid.ai/open-source/

② Advanced Editor (Create with AI)

  - https://mermaid.ai/

  - 최근 트랜드에 맞춰 Mermaid도 AI 열차에 올라탔다.

  - Free 등급도 급한대로 쓸만하지만, 돈을 들여야 한다.

③ Live Editor

  - https://mermaid.live/

  - 웹에서 바로 결과를 확인해볼 수 있는 에디터도 있다.

  - 예전엔 여기가 메인이었지만, `② mermaid.ai` 사이트를 최근에 밀어주고 있다.

④ GitHub

  - https://github.com/mermaid-js/mermaid

  - 개인적으로 정보는 GitHub이 제일 많고 좋은 것 같다 !!!

사이트들은 충분히 살펴봤고,

이제는 실제 어떻게 작성하는지 알아보자.

⒜ Flowchart

  - GitHub README 파일에 너무나 잘 나와 있어서 해당 내용으로 대체 하겠다.

  - `flowchart LR`에 있는 `LR`은 left-right를 의미한다.

    . `LR` 말고 top-down으로 그리고 싶을 때에는 `TD`를 사용할 수 있다.

  - 연결선도 다양하게 표현할 수 있다.

    . --> : 화살표
    . --- : 실선
    . -.-> : 점선 화살표
    . ==> : 굵은 화살표

⒝ Sequence diagram

  - `loop` 같은 것이나 `Note`까지도 너무나 예쁘게 잘 지원해준다.

⒞ State diagram

  - Renderer가 한 번 업그레이드가 되어 `stateDiagram-v2`라고 명명해야 한다.

    . 그런데, 간단한 것만 사용해봐서 그런지 `stateDiagram`이라고 해도 차이를 잘 모르겠다.

그외에 Pie chart, Gant chart, Bar chart, Class Diagram 등은 물론

심지어 `User Journet diagram`도 있고, `Git graph`도 실험 버전으로 제공되고 있다.

GitHub Markdown에서 Mermaid 문법을 지원해주면서 Mermaid의 인기가 더 올라갔지만,

최근 AI에서 도식화를 시킬 때 Mermaid 문법으로 만들어 달라고 하면

너무나 예쁘게 잘 만들어주면서 더더욱 인기가 급상승하고 있다.

AI를 이용해서 문서화를 할 때에 Mermaid를 이용해 다양한 다이어그램과 차트를 그려주게 되면

구성원들 간에 오해를 줄일 수 있는 너무나 멋진 소통의 창구가 될 수 있다.

아! 참고로 GitHub에서 Mermaid를 표시하려면 아래와 같이 묶어 주면 된다.

그런데, 조금 이상하지 않은가?

뒤에 `;`를 붙였는데, 본래는 붙이지 않는 것이 표준이지만 줄바꿈을 명확히 하기 위해 붙이기도 한다.

여기까지 간단히 살펴봤다.

DeepLearning 공부 내용을 GitHub로 관리하려다 보면 매번 수식 입력 부분 때문에 고생을 했었다.

GitHub의 MarkDown에서 기본적으로 수식 입력을 지원하지 않았기 때문이다.

그래서 보통은 Online Latex Equation Editor 사이트 등을 통해 수식 작성 후

이미지 파일로 다운로드 받아서 MarkDown에 입력하는 방법을 사용하곤 했다.

  - http://www.sciweavers.org/free-online-latex-equation-editor

수식을 깔끔하게 표현을 할 수는 있지만, 너무나 불편한 방식이다.

수식을 수정하려고 하면 다시 사이트에 가서 작성한 다음에 이미지로 만들고 업로드 하고...

그러던 중 반가운 소식이 들려왔다.

  - https://github.blog/2022-05-19-math-support-in-markdown/

우와~ MarkDown에서 수식 입력을 지원하다니 !!!

지원해주는 형식은 code block 방식과 inline 방식의 2가지 이다.

  - code block: 가운데 정렬로 수식만 단독으로 출력

  - inline: 텍스트 중간에 수식을 표현

수식 입력을 위해 사용되는 문법은 기본적으로는 Tex이다.

Tex를 사용하기 편하게 만든 매크로가 LaTex이기에 기본적으로 Tex 문법을 사용한다.

  - https://ko.wikipedia.org/wiki/위키백과:TeX_문법 

실제로 잘 되는지 살펴보자.

inline 방식으로 사용하려면 `$` 사이에 수식을 정의하면 되고,

code block 방식으로 사용하려면 `$$` 사이에 수식을 정의하면 된다.

이렇게 적어주면 아래와 같이 깔끔하게 잘 나오게 된다.

GitHub MarkDown에서 LaTex를 랜더링하기 위해 JavaScript 기반의 MathJax라는 오픈소스 프로젝트를 활용하고 있다.

그래서 아래와 같은 마우스 오른쪽 버튼 메뉴를 활용할 수도 있다.

보다 깔끔하고 편리하게 수식을 입력하고 활용할 수 있게 된 GitHub를 더 많이 사랑해줘야겠다.