스웨덴 S/W 아키텍트 Knut Sveidqvist(어떻게 발음해야할지 모르겠다 😅)가
Visio를 사용하다가 문제를 겪고선 Markdown 문서와 잘 어울리는 텍스트 기반 다이어그램 작성기를 2014년 11월에 만들었다.
Mermaid라는 이름은 당시에 그의 아이들이 보고 있던 디즈니 애니메이션에서 영감을 받았다고 한다.
실제 만든 제품과 전혀 연관성이 없는 이름이라니 ... ㅋㅋㅋ 🤣
Mermaid는 여러 사이트를 보유하고 있다.
① 공식 홈페이지
- URL 주소에서도 보이지만, 기반은 Javascript이다.
- 2019년도에는 JavaScript Open Source Award 수상도 했다(The Most Exciting Use of Technology).

- 앞으로 오픈소스 공식 홈페이지는 아래로 오라고 한다.
. https://mermaid.ai/open-source/

② Advanced Editor (Create with AI)
- 최근 트랜드에 맞춰 Mermaid도 AI 열차에 올라탔다.

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

③ Live Editor
- 웹에서 바로 결과를 확인해볼 수 있는 에디터도 있다.
- 예전엔 여기가 메인이었지만, `② 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를 표시하려면 아래와 같이 묶어 주면 된다.
| ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` |
그런데, 조금 이상하지 않은가?
뒤에 `;`를 붙였는데, 본래는 붙이지 않는 것이 표준이지만 줄바꿈을 명확히 하기 위해 붙이기도 한다.
여기까지 간단히 살펴봤다.
'SCM > Git-GitHub' 카테고리의 다른 글
| Actions에서 Pull-Request의 comment 작성하기 (1) | 2026.04.11 |
|---|---|
| GitHub Actions 처음 맛보기 (1) | 2026.04.05 |
| 실용적인 코드 리뷰 문화 엿보기 (feat. 뱅크샐러드) (1) | 2026.04.04 |
| Branch protection rules (코드리뷰를 필수로 설정하기) (1) | 2026.03.14 |
| 동시에 여러 브랜치에서 각각 작업하기 (git worktree) (0) | 2026.02.08 |




















































































