알잘깔딱센 GitHub 핵심개념

Mermaid로 GitHub 내에서 순서도 그리기

Mermaid-js.github.io

1. 머메이드란?

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

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

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

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

Online FlowChart & Diagrams Editor - Mermaid Live Editor

2. 머메이드로 그릴 수 있는 것들

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

2.1 플로우 차트 (Flow Chart)

특정 대상의 행동의 흐름을 기록하기 좋습니다.

Screen Shot 2022-03-06 at 3.06.05 PM.png

graph TD
A[하루 시작] -->|일어난다| B(세수한다)
B --> C{오늘은 무엇을 할까}
C -->|밥을 먹는다| D[냉장고 확인]
C -->|다시 잔다| E[침대로 돌아가기]
C -->|티비를 본다| F[거실로 가기]

graph TD
A[하루 시작] -->|일어난다| B(세수한다)
B --> C{오늘은 무엇을 할까}
C -->|밥을 먹는다| D[냉장고 확인]
C -->|다시 잔다| E[침대로 돌아가기]
C -->|티비를 본다| F[거실로 가기]

2.2 시퀀스 다이어그램 (Sequence Diagram)

유저 간의 대화 내용이나 데이터 요청 및 전송 등 시간의 흐름을 나타낼 때 사용하면 좋습니다.

Screen Shot 2022-03-02 at 9.43.13 PM.png

sequenceDiagram
A->>+B: B야 소금좀 건내줘
B->>+A: 여기
A-->>-B: 고마워

sequenceDiagram
A->>+B: B야 소금좀 건내줘
B->>+A: 여기
A-->>-B: 고마워

2.3 클래스 다이어그램 (Class Diagram)

여러 가지 주제를 그룹짓거나 나눌 때 사용할 수 있습니다.

Screen Shot 2022-03-02 at 9.48.27 PM.png

classDiagram
자바스크립트 타입 <|-- Apple
자바스크립트 타입 <|-- 5
자바스크립트 타입 <|-- True
자바스크립트 타입 : String
자바스크립트 타입 : Number
자바스크립트 타입: Boolean
class Apple{
    String
}
class 5{
    Number
}
class True{
    Boolean
}

classDiagram
자바스크립트 타입 <|-- Apple
자바스크립트 타입 <|-- 5
자바스크립트 타입 <|-- True
자바스크립트 타입 : String
자바스크립트 타입 : Number
자바스크립트 타입: Boolean
class Apple{
    String
}
class 5{
    Number
}
class True{
    Boolean
}

2.4 상태 다이어그램 (State Diagram)

행동에 따른 상태를 기록하기 좋습니다.

Screen Shot 2022-03-02 at 10.00.34 PM.png

stateDiagram-v2
[*] --> 로그인
로그인 --> 성공
로그인 --> 실패
실패 --> 아이디/비밀번호찾기
아이디/비밀번호찾기 --> 로그인재시도
로그인재시도 --> 성공
성공 --> [*]

stateDiagram-v2
[*] --> 로그인
로그인 --> 성공
로그인 --> 실패
실패 --> 아이디/비밀번호찾기
아이디/비밀번호찾기 --> 로그인재시도
로그인재시도 --> 성공
성공 --> [*]

2.5 간트 차트 (Gantt Chart)

프로젝트 관련 일정을 정리하기 좋은 차트입니다.

Screen Shot 2022-03-06 at 3.32.02 PM.png

gantt
title 하루 일과
dateFormat  HH-MM
axisFormat %H:%M
하루시작 : milestone, m1, 17:49,2min
할일1 : 60min
할일2 : 30min

gantt
title 하루 일과
dateFormat  HH-MM
axisFormat %H:%M
하루시작 : milestone, m1, 17:49,2min
할일1 : 60min
할일2 : 30min

2.6 파이 차트 (Pie Chart)

특정 주제 및 데이터의 점유율이나 수치를 기록할 때 사용할 수 있습니다.

Screen Shot 2022-03-03 at 8.53.05 PM.png

pie title 내가 주로 사용하는 스택
"자바스크립트" : 40
"뷰" : 20
"리액트" : 40

pie title 내가 주로 사용하는 스택
"자바스크립트" : 40
"뷰" : 20
"리액트" : 40

2.7 ER 다이어그램 (ER Diagram)

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

Screen Shot 2022-03-06 at 3.38.54 PM.png

erDiagram
CUSTOMER ||--o{ ORDER : makes
CUSTOMER ||--o{ PAYMENT : makes
ORDER ||--o{ ITEM : prepared

erDiagram
CUSTOMER ||--o{ ORDER : makes
CUSTOMER ||--o{ PAYMENT : makes
ORDER ||--o{ ITEM : prepared

2.8 고객 여정 다이어그램 (User Journey)

특정 서비스를 사용하는 유저의 행동을 세부적으로 기록할 때 사용할 수 있습니다.

Screen Shot 2022-03-06 at 3.52.24 PM.png

journey
title 오늘 하루 회고
section 오전
    커피 마시기: 7: 나
    회의 참석: 4: 나
    피드백: 4: 나, 팀장님
section 오후
    점심 후 커피: 5: 나
    업무: 3: 나

journey
title 오늘 하루 회고
section 오전
    커피 마시기: 7: 나
    회의 참석: 4: 나
    피드백: 4: 나, 팀장님
section 오후
    점심 후 커피: 5: 나
    업무: 3: 나

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

3. 머메이드로 플로우차트 만들어 보기

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

3.1 머메이드 코드 블록 작성하기

먼저 마크다운 파일에 머메이드를 사용할 것임을 명시합니다. 다이어그램이나 차트가 들어갈 곳에 적어주면 좋습니다. 세 개의 백틱()과 함께 mermaid`를 적어 코드 블록을 시작합니다.

3.2 차트 종류 지정하기

위 차트의 종류 중, 사용할 차트의 이름을 적어줍니다.

flowchart
sequenceDiagram
classDiagram
stateDiagram
erDiagram
journey
gantt
pie
requirementDiagram

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

3.3 플로우차트 방향 지정하기

flowchart를 사용할 것임을 적어준 후, 플로우차트의 방향을 지정해 줍니다.

TB - 위 → 아래
TD - 위 → 아래 (TB와 동일)
BT - 아래 → 위
RL - 오른쪽 → 왼쪽
LR - 왼쪽 → 오른쪽

예시에서는 flowchart LR을 사용합니다.

3.4 노드 추가하기

노드는 flowchart LR 아래 노드의 이름을 영문으로 적고, 원하는 텍스트를 [ ] 사이에 추가해 줍니다. 예시의 경우, A{라면이 있는가?}라고 적어주었습니다.

Screen Shot 2022-03-04 at 8.56.35 PM.png

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

(텍스트) - 둥근모서리 박스
([텍스트]) - 스타디움, 알약 모양
[[텍스트]] - 각진 모양
[(텍스트)] - 실린더 모양
((텍스트)) - 원
>텍스트] - 비대칭
{텍스트} - 마름모
{{텍스트}} - 육각형
[/텍스트/], [\텍스트\] - 평행사변형
[/텍스트\], [\텍스트/] - 사다리꼴

3.5 노드 연결하기

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

Screen Shot 2022-03-04 at 9.08.28 PM.png

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

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

3.6 플로우 이어가기

이후 다음과 같이 노드 간 연결해 줍니다. A에서 B로, B에서 C로 선을 연결하며 작성합니다.

Screen Shot 2022-03-04 at 9.07.31 PM.png

flowchart LR
    A{라면이 있는가?} -->|있다| B(냄비를 준비한다)
    B -->C(머그컵 2잔 분량의 물을 붓는다)
    C -->E(스토브를 키고 물을 끓인다)
    E -->F(적당히 끓으면 스프를 넣는다)
    F -->G(물이 완전히 끓으면 면과 파를 넣는다)
    G -->H((쫄깃한 면을 원하는가?))

flowchart LR
    A{라면이 있는가?} -->|있다| B(냄비를 준비한다)
    B -->C(머그컵 2잔 분량의 물을 붓는다)
    C -->E(스토브를 키고 물을 끓인다)
    E -->F(적당히 끓으면 스프를 넣는다)
    F -->G(물이 완전히 끓으면 면과 파를 넣는다)
    G -->H((쫄깃한 면을 원하는가?))

3.7 동일한 노드로 수렴하기

동일한 노드를 가리키면 아래와 같이 자동 연결해 줍니다. I의 경우, 내용을 작성했다면 아래에서 중복 작성하지 않아도 됩니다.

Screen Shot 2022-03-04 at 9.10.33 PM.png

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(맛있게 먹는다)

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(맛있게 먹는다)

3.8 플로우차트 완성하기

아래와 같이 플로우차트를 완성해보았습니다.

Screen Shot 2022-03-04 at 9.12.44 PM.png

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

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