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