1. 머메이드란?
이전엔 표, 차트, 다이어그램등을 그릴 때 유료 도구인 Visio나 파워포인트로 직접 그려 이미지를 추가했다면, 최근 깃에서 지원하는 머메이드라는 도구를 활용해 차트를 더욱 쉽고 빠르게 코드로 작성할 수 있게 되었습니다.
머메이드는 텍스트와 코드를 통해 다이어그램 또는 차트와 같이 데이터를 시각화 할 수 있도록 도와주는, 자바스크립트 기반의 도구입니다. 서비스 개발 시 필요한 데이터, 서비스의 구조나 흐름을 작성할때 사용할 수 있습니다.
머메이드는 고유의 문법을 사용하는 데요, 마크다운을 이미 알고 있다면, 그리고 공식 가이드를 참고 한다면 금방 배울 수 있습니다.
아래 서비스에서 라이브로 코드를 확인할 수 있습니다.
2. 머메이드로 그릴 수 있는 것들
머메이드가 지원하는 차트와 다이어그램의 예시를 살펴 보겠습니다. 코드에 대해서는 뒤에서 상세히 살펴보도록 하겠습니다.
- 플로우 차트 (Flow Chart)
특정 대상의 행동의 흐름을 기록하기 좋습니다.
```mermaid graph TD A[하루 시작] -->|일어난다| B(세수한다) B --> C{오늘은 무엇을 할까} C -->|밥을 먹는다| D[냉장고 확인] C -->|다시 잔다| E[침대로 돌아가기] C -->|티비를 본다| F[거실로 가기] ```
- 시퀀스 다이어그램 (Sequence Diagram)
유저간의 대화 내용이나 데이터 요청 및 전송 등 시간의 흐름을 나타낼때 사용하면 좋습니다.
graph TD
A[하루 시작] -->|일어난다| B(세수한다)
B --> C{오늘은 무엇을 할까}
C -->|밥을 먹는다| D[냉장고 확인]
C -->|다시 잔다| E[침대로 돌아가기]
C -->|티비를 본다| F[거실로 가기]
```mermaid sequenceDiagram A->>+B: B야 소금좀 건내줘 B->>+A: 여기 A-->>-B: 고마워 ```
- 클래스 다이어그램 (Class Diagram)
여러가지 주제를 그룹짓거나 나눌 때 사용할 수 있습니다.
```mermaid classDiagram 자바스크립트 타입 <|-- Apple 자바스크립트 타입 <|-- 5 자바스크립트 타입 <|-- True 자바스크립트 타입 : String 자바스크립트 타입 : Number 자바스크립트 타입: Boolean class Apple{ String } class 5{ Number } class True{ Boolean } ```
- 상태 다이어그램 (State Diagram)
행동에 따른 상태를 기록하기 좋습니다.
```mermaid stateDiagram-v2 [*] --> 로그인 로그인 --> 성공 로그인 --> 실패 실패 --> 아이디/비밀번호찾기 아이디/비밀번호찾기 --> 로그인재시도 로그인재시도 --> 성공 성공 --> [*] ```
- 간트 차트 (Gantt Chart)
프로젝트 관련 일정을 정리하기 좋은 차트입니다.
```mermaid gantt title 하루 일과 dateFormat HH-MM axisFormat %H:%M 하루시작 : milestone, m1, 17:49,2min 할일1 : 60min 할일2 : 30min ```
- 파이 차트 (Pie Chart)
특정 주제 및 데이터이 점유율이나 수치를 기록할 때 사용할 수 있습니다.
```mermaid pie title 내가 주로 사용하는 스택 "자바스크립트" : 40 "뷰" : 20 "리액트" : 40 ```
- ER 다이어그램 (ER Diagram)
개체와 개체간의 관계를 표현할때 사용 할 수 있습니다. 해당 다이어그램은 한글 지원이 되지 않습니다.
```mermaid erDiagram CUSTOMER ||--o{ ORDER : makes CUSTOMER ||--o{ PAYMENT : makes ORDER ||--o{ ITEM : prepared ```
- 고객 여정 다이어그램 (User Journey)
특정 서비스를 사용하는 유저의 행동을 세부적으로 기록할 때 사용할 수 있습니다.
```mermaid journey title 오늘 하루 회고 section 오전 커피 마시기: 7: 나 회의 참석: 4: 나 피드백: 4: 나, 팀장님 section 오후 점심 후 커피: 5: 나 업무: 3: 나 ```
위의 다이어그램과 차트는 머메이드 라이브 에디터에서 직접 테스트 해 볼 수 있습니다.
3. 머메이드로 플로우차트 만들어 보기
머메이드는 마크다운에 직접 사용할 수 있습니다. 먼저 머메이드 테스트를 위한 레파지토리를 생성한 후, 리드미 마크다운 파일에 직접 사용해보겠습니다.
- 먼저 마크다운 파일에 머메이드를 사용할 것임을 명시합니다. 다이어그램이나 차트가 들어갈 곳에 적어주면 좋습니다.
#라면 끓이는 방법! ```mermaid ```
- 위 차트의 종류 중, 사용할 차트의 이름을 적어줍니다.
flowchartsequenceDiagramclassDiagramstateDiagramerDiagramjourneyganttpierequirementDiagram
다이어그램 및 차트 별 사용방법은 위에서 언급한 라이브 에디터와 공식 홈페이지를 통해 참고할 수 있습니다. 우리는
flowchart를 활용하여 라면을 끓이는 간단한 플로우차트를 만들어 보겠습니다. #라면 끓이는 방법! ```mermaid flowchart ```
flowchart를 사용할 것임을 적어준 후, 플로우차트의 방향을 지정해 줍니다.
TB위 → 아래
TD위 → 아래 (TB와 동일)
BT아래 → 위
RL오른쪽 → 왼쪽
LR왼쪽 → 오른쪽
#라면 끓이는 방법! ```mermaid flowchart LR ```
- 노드는
flowchart LR아래 노드의 이름을 영문으로 적고, 원하는 텍스트를 [ ] 사이에 추가해 줍니다. 예시의 경우,A[냄비를 꺼낸다]라고 적어주었습니다. 아래와 같이 마름모 모양의 첫 텍스트 노드가 생성됩니다.
#라면 끓이는 방법! ```mermaid flowchart LR A{라면이 있는가?} ```
노드의 모양은 아래와 같이 변경이 가능합니다.
(텍스트): 둥근모서리 박스
([텍스트]): 스타디움, 알약 모양
[[텍스트]]: 각진 모양
[(텍스트)]: 실린더 모양
((텍스트)): 원
>텍스트]: 비대칭
{텍스트}: 마름모
{{텍스트}}: 육각형
[/텍스트/],[\텍스트\]: 평행사변형
[/텍스트\],[\텍스트/]: 사다리꼴
- 다양한 선택지가 있다면 아래와 같이 선으로 연결 후
|텍스트|안에 적어줍니다. 이후 다음 노드인B의 내용을 작성합니다.
#라면 끓이는 방법! ```mermaid flowchart LR A{라면이 있는가?} -->|있다| B(냄비를 준비한다) ```
노드간 다양한 스타일의 선으로 연결이 가능합니다. 기본 스타일 몇가지를 살펴보겠습니다.
-->화살표
---실선
-.->점선 화살표
==>굵은 화살표
- 이후 다음과 같이 노드간 연결해 줍니다.
A에서B로,B에서C로 선을 연결하며 작성합니다.
#라면 끓이는 방법! ```mermaid flowchart LR A{라면이 있는가?} -->|있다| B(냄비를 준비한다) B -->C(머그컵 2잔 분량의 물을 붓는다) C -->E(스토브를 키고 물을 끓인다) E -->F(적당히 끓으면 스프를 넣는다) F -->G(물이 완전히 끓으면 면과 파를 넣는다) G -->H((쫄깃한 면을 원하는가?)) ```
- 동일한 노드를 가리키면 아래와 같이 자동 연결해 줍니다.
I의 경우, 내용을 작성했다면 아래에서 중복 작성하지 않아도 됩니다.
#라면 끓이는 방법! ```mermaid flowchart LR A{라면이 있는가?} -->|있다| B(냄비를 준비한다) B -->C(머그컵 2잔 분량의 물을 붓는다) C -->E(스토브를 키고 물을 끓인다) E -->F(적당히 끓으면 스프를 넣는다) F -->G(물이 완전히 끓으면 면과 파를 넣는다) G -->H((쫄깃한 면을 원하는가?)) H -->|원한다| H1(면을 넣었다 뺐다를 반복한다) H -->|원치 않는다| H2(그냥둔다) H1 --> I(보기 좋게 그릇에 담는다) H2 --> I I --> J(맛있게 먹는다) ```
- 아래와 같이 플로우차트를 완성해보았습니다.
#라면 끓이는 방법! ```mermaid flowchart LR A{라면이 있는가?} -->|있다| B(냄비를 준비한다) B -->C(머그컵 2잔 분량의 물을 붓는다) C -->E(스토브를 키고 물을 끓인다) E -->F(적당히 끓으면 스프를 넣는다) F -->G(물이 완전히 끓으면 면과 파를 넣는다) G -->H((쫄깃한 면을 원하는가?)) H -->|원한다| H1(면을 넣었다 뺐다를 반복한다) H -->|원치 않는다| H2(그냥둔다) H1 --> I(보기 좋게 그릇에 담는다) H2 --> I I --> J(맛있게 먹는다) A -->|없다| K(라면을 사러간다) K --> L(원하는 라면을 고른다) L --> M(산다) M --> N(집에간다) N --> A ```