Mermaid 로 30초 만에 다이어그램을 그려보자!
Mermaid 란?
다이어그램을 그릴 때, 일반적으로 마우스로 그리는 GUI 기반의 툴을 사용했을 것이다.
Mermaid 는 GUI 기반 툴과 달리 사용자가 직접 코드를 입력하여 다이어그램을 그리는 툴이다. (코드로 다이어그램을 그린다고? 개발자로서 이건 못 참지..!)
코드로 다이어그램을 그린다고 하니 어렵게 느껴질 수도 있겠지만.. 놀라지 마시라, 여러분이 mermaid 코드에 대해 아무것도 몰라도 지금 당장 다이어그램을 그릴 수 있다! (우리에겐 챗지피티가 있으니까🤭)
아래는 노션과 챗지피티를 활용하여 30초 만에 인물관계 다이어그램을 그리는 영상이다.
Mermaid 빠르게 시작하기
앞서 영상과 동일한 예제로, 5명의 인물 관계를 다이어그램으로 그려보겠다.
- 철수: 철수는 영희와 스터디 그룹을 만들어 공부하고 있습니다. 그는 진수와는 같은 축구 클럽에 가입하여 함께 축구를 즐깁니다.
- 영희: 영희는 철수와 스터디 그룹을 함께 만들었으며, 민지와는 같은 미술 클럽에 속해 함께 미술 작품을 만드는 시간을 보냅니다.
- 진수: 진수는 철수와 함께 축구 클럽에서 활동하고 있습니다. 진수는 승훈과 서로 책 추천을 주고받습니다.
- 민지: 민지는 영희와 함께 미술 클럽에서 활동하며, 승훈과는 같은 음악 클럽에 속해 함께 음악을 연주합니다.
- 승훈: 승훈은 민지와 음악 클럽에서 활동하며, 진수와는 서로의 책 추천을 주고받으며 문학에 대한 토론을 즐깁니다.
위 관계를 챗지피티에게 Mermaid 코드로 바꿔달라고 해보자.
챗지피티가 아래와 같은 코드를 주었다.
graph LR
철수 --- |스터디 그룹| 영희
철수 --- |축구 클럽| 진수
영희 --- |미술 클럽| 민지
진수 --- |책 공유| 승훈
민지 --- |음악 클럽| 승훈
mermaid 코드는 노션의 코드블록(mermaid 언어 선택)이나 mermaid live 에디터에 옮겨 다이어그램을 확인할 수 있다.
순식간에 인물관계 다이어그램을 만들었다! 👏🏼👏🏼👏🏼
Mermaid 코드 수정하며 익히기
만들어진 다이어그램이 마음에 안 들거나 추가할 내용이 있다고 해보자.
나는 기존 관계에서 '유진'이라는 인물을 추가하고 '승훈', '민지'와 '개발 스터디' 그룹으로 묶고 싶다.
우선 챗지피티에게 다음처럼 부탁했다.
"위의 관계를 전체 그룹으로 묶어주고 유진이라는 인물을 추가해서 승훈, 민지와 '개발 스터디' 그룹으로 묶어줘"
챗지피티가 알려준 코드를 노션 코드블록에 넣어보니 다음처럼 다이어그램이 생성되었다.
흠,, 이 다이어그램은 내가 의도한 형태가 아닌데..?
나는 '전체 그룹' 내에 '개발 스터디'라는 소그룹을 만들고 싶었다. 챗지피티에게 다시 부탁할 수도 있지만 여기서부터는 직접 수정해 보면서 mermaid 코드를 익혀보자!
먼저 아래 표시한 부분을 보니 A가 [철수] 임을 정의하는 것으로 보인다.
이 부분을 위에서 미리 정의해 두거나, 혹은 A를 제거하고 직접 이름을 명시하면 가독성이 더 좋을 것 같다.
후자로 수정을 해보자.
subgraph 를 넣으면 그룹으로 묶을 수 있는 것 같다. 그리고 우측에는 그룹의 이름을 명시하는 것 같다.
나는 '개발 스터디'라는 소그룹을 만들고 싶은 것이므로 '개발 스터디' subgraph 를 '전체 그룹' subgraph 안에 추가해 보았다.
나는 여기에 욕심을 더 내어 그룹별 색상을 넣고자 했다.
하지만 그 방법은 모르기 때문에 챗지피티에게 색상 넣는 방법을 알려달라고 했다.
알고 보니 mermaid 에서는 style 을 통해 색상, 선, 선 두께 등의 스타일 설정을 부여할 수 있었다.
다음은 최종 완성된 다이어그램이다.
style 을 적용하기 위해서는 대상 이름에 띄어쓰기가 있으면 안 되더라. 때문에 subgraph 이름에서 공백을 제거했다.
추가로 '개발스터디' 그룹 이름이 일부 가려지는 문제가 있었는데, 이는 subgraph 위치를 상단으로 올리니 해결되었다. (코드 위치에 따라 레이어를 나누는 듯?)
오케이~ 직접 mermaid 코드를 수정하여 원하는 다이어그램을 만들었다!
근데.. 이걸 실무에서 사용할 수 있을까??? 🤨
Mermaid 실무에 적용하기
개발자라면 인증로직 한 두 번쯤은 구현해 보았을 것이다.
구현한 인증로직을 동료 개발자들이 이해하기 쉽도록 다이어그램으로 만든다고 해보자.
인증로직에는 [클라이언트]와 [서버], [플랫폼] 간에 요청과 응답, 그리고 [서버]와 [데이터베이스]의 동작을 포함한다.
이번 예제에서 우리는 [클라이언트] - [서버] - [플랫폼] 간의 상호작용을 보여주는 시퀀스 다이어그램을 그려볼 것이다.
예제로 사용할 인증로직은 다음과 같다.
1. 클라이언트는 서버에게 인증을 요청한다.
2. 서버는 플랫폼에게 인증정보를 요청한다.
3. 플랫폼은 서버에게 인증결과를 응답한다.
4-1. 서버는 인증결과가 실패라면 클라이언트에게 실패응답을 반환한다.
4-2. 서버는 인증결과가 성공이라면 인증번호를 생성한다.
4-2-1. 서버는 생성한 인증번호를 데이터베이스에 저장한다.
4-2-2. 서버는 유저 권한을 업데이트한다.
4-2-3. 서버는 클라이언트에게 성공응답을 반환한다.
위의 정리된 로직을 챗지피티에게 mermaid 코드로 바꿔달라고 했더니 아래 코드를 뚝딱 만들어주었다.
sequenceDiagram
participant Client
participant Server
participant Platform
participant Database
Client->>Server: 인증 요청
Server->>Platform: 인증정보 요청
Platform-->>Server: 인증결과 응답
alt 인증결과 실패
Server->>Client: 실패 응답
else 인증결과 성공
Server->>Server: 인증번호 생성
Server->>Database: 인증번호 저장
Server->>Server: 유저 권한 업데이트
Server->>Client: 성공 응답
end
와우..! 이번 다이어그램은 딱히 수정할 것도 없어 보인다!
제시된 인증로직을 마우스로 그린다면 얼마나 걸릴까? 아마 한참은 걸릴 것이다... 🐌
하지만 챗지피티와 함께라면? 정리된 글만 있다면 단 몇 초 만에 다이어그램을 뽑아낼 수 있다!
만약 다이어그램이 마음에 안 든다면 앞서 우리가 한 것처럼 코드를 직접 수정하여 내가 원하는 다이어그램을 만들 수 있다.
처음에는 챗지피티에게 의존하겠지만 점차 익숙해지면 혼자서도 멋진 다이어그램을 만들 수 있을 것이다!😎
다양한 Mermaid 샘플 구경하기
이 글에서 다룬 graph, sequenceDiagram 외에도 Mermaid 는 다양한 다이어그램 형태를 제공한다.
erDiagram
classDiagram
위는 mermaid 라이브 사이트에서 가져온 일부 샘플들이다.
더 다양한 다이어그램과 사용법이 궁금하다면 공식문서 와 튜토리얼 을 참고하길 바란다.
마무리
이 글에서는 코드 기반 다이어그램 도구인 Mermaid 를 소개하고 챗지피티를 활용하는 방법, 그리고 수정을 통해 mermaid 코드를 익히는 과정까지 보여주었다.
일반 GUI 다이어그램 툴은 사용이 직관적이고 디자인을 유연하게 구성할 수 있다는 점에서 분명 매력적이다.
반면, Mermaid 는 코드 기반 동작을 통해 빠르고 일관된 디자인의 다이어그램을 만들 수 있다는 점이 강점이다.
만약 디자인은 크게 상관없고 빠르게 다이어그램을 만들어야 하는 상황이라면 Mermaid 를 사용해보시라! 👍🏼👍🏼👍🏼