mermaid를 VS Code에서 활용하기

mermaid

: MD 문서에서 다이어그램을 만들어주는 라이브러리

 

- 공식 문서

: https://mermaid.js.org/

Mermaid | Diagramming and charting tool

 

- 지원되는 다이어그램

: 플로우차트

: 시퀀스 다이어그램

: 간트 차트

: 클래스 다이어그램

: ERD

: User Journey diagram

: gir graph

 

 

 

 

 

 

 

VS Code에 설치

1. VS Code 확장에서 Markdown preview Mermaid Support를 설치

 

2. .md 문서를 하나 만들고 원하는 다이어그램을 작성

 

3. 파일 우클릭 > open preview

 

- 간단한 예제

flowchart LR
    A[구매] --> B;
    B[유저, 파라미터, \n 어뷰징 검증] --> C;
    C{client가 안드로이드} -->|Yes| E;
    C -->|No| G;
    E[안드로이드 Proxy 처리] --> G;
    G[DB 저장] --> I;
    I[응답 반환];

 

 

 

 

 

 

 

Reference

[Mermaid] vscode에서 어케 쓰는데!!! 3단계로 아주 쉽게 알려줄게!

[markdown] mermaid를 이용해서 UML 그리기 - 플로우차트

221006_Mermaid를 이용한 Markdown 작성