이전엔 표, 차트, 다이어그램등을 그릴 때 유료 도구인 Visio나 파워포인트로 직접 그려 이미지를 추가했다면, 최근 깃에서 지원하는 머메이드라는 도구를 활용해 차트를 더욱 쉽고 빠르게 코드로 작성할 수 있게 되었습니다.

머메이드는 텍스트와 코드를 통해 다이어그램 또는 차트와 같이 데이터를 시각화 할 수 있도록 도와주는, 자바스크립트 기반의 도구입니다. 서비스 개발 시 필요한 데이터, 서비스의 구조나 흐름을 작성할때 사용할 수 있습니다.

머메이드는 고유의 문법을 사용하는 데요, 마크다운을 이미 알고 있다면, 그리고 공식 가이드를 참고 한다면 금방 배울 수 있습니다.

아래 서비스에서 라이브로 코드를 확인할 수 있습니다.

머메이드가 지원하는 차트와 다이어그램의 예시를 살펴 보겠습니다. 코드에 대해서는 뒤에서 상세히 살펴보도록 하겠습니다.

시퀀스 다이어그램 (Sequence Diagram) 유저간의 대화 내용이나 데이터 요청 및 전송 등 시간의 흐름을 나타낼때 사용하면 좋습니다.

graph TD

A[하루 시작] -->|일어난다| B(세수한다)

B --> C{오늘은 무엇을 할까}

C -->|밥을 먹는다| D[냉장고 확인]

C -->|다시 잔다| E[침대로 돌아가기]

C -->|티비를 본다| F[거실로 가기]

ER 다이어그램 (ER Diagram) 개체와 개체간의 관계를 표현할때 사용 할 수 있습니다. 해당 다이어그램은 한글 지원이 되지 않습니다.

위의 다이어그램과 차트는 머메이드 라이브 에디터에서 직접 테스트 해 볼 수 있습니다.

머메이드는 마크다운에 직접 사용할 수 있습니다. 먼저 머메이드 테스트를 위한 레파지토리를 생성한 후, 리드미 마크다운 파일에 직접 사용해보겠습니다.

#라면 끓이는 방법!

#라면 끓이는 방법!

다이어그램 및 차트 별 사용방법은 위에서 언급한 라이브 에디터와 공식 홈페이지를 통해 참고할 수 있습니다. 우리는 flowchart를 활용하여 라면을 끓이는 간단한 플로우차트를 만들어 보겠습니다.

노드는 flowchart LR 아래 노드의 이름을 영문으로 적고, 원하는 텍스트를 [ ] 사이에 추가해 줍니다.
예시의 경우, A[냄비를 꺼낸다] 라고 적어주었습니다. 아래와 같이 마름모 모양의 첫 텍스트 노드가 생성됩니다.

노드의 모양은 아래와 같이 변경이 가능합니다.

다양한 선택지가 있다면 아래와 같이 선으로 연결 후 |텍스트| 안에 적어줍니다. 이후 다음 노드인 B 의 내용을 작성합니다. Screen Shot 2022-03-04 at 9.08.28 PM.png

```markdown

#라면 끓이는 방법!

```mermaid
	flowchart LR
		A{라면이 있는가?} -->|있다| B(냄비를 준비한다)

```
```

```markdown

#라면 끓이는 방법!

```mermaid
	flowchart LR
		A{라면이 있는가?} -->|있다| B(냄비를 준비한다)

```
```

노드간 다양한 스타일의 선으로 연결이 가능합니다. 기본 스타일 몇가지를 살펴보겠습니다. ****

알잘깔딱센 GitHub 핵심개념