Mermaid?

Mermaid는 Markdown 문법을 이용해서 시각적인 다이어그램을 표현할 수 있는 툴이다.

GitHub에서 이를 지원 함으로 저장소의 Readme 파일에 작성하면 시각화해서 보여 줄 수 있다.

예시

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

• 대괄호[]를 이용하여 이름(DisplayName)을 지정할 수 있다.
• 화살표 ->를 이용하여 흐름 진행방향을 만들 수 있다.
• ||를 이용하여 의존관계 혹은 흐름조건을 나타낼 수 있다

조금 더 복잡한 예시를 통해 사용법을 알아보자

---
title : 블랙잭 게임 진행
---

flowchart TD

    subgraph INIT[플레이어들 생성]
        A[이름 입력] --> B[플레이어 생성]
    end

    INIT --> PlayerDraw

    subgraph PlayerDraw[플레이어들 카드뽑기]
        C[카드 뽑기] --> Input

        Input[카드 뽑기 유무 입력 y,n] --> y
        y[카드를 뽑는다] --> |HIT| Player        
        Player[플레이어] --> isBust

        isBust[버스트인가?] --> |YES| END
        isBust --> |NO| Input

        Input --> n
        n --> |카드를 뽑지 않는다 STAND| END
    end    

    PlayerDraw --> DealerDraw

    subgraph DealerDraw[딜러 카드뽑기]
        Dealer[딜러] --> isUnder16[카드 합이 16 이하인가]

        isUnder16 --> |YES| draw --> isUnder16
        isUnder16 --> |NO| ENDDelar
    end

    DealerDraw --> Result

    subgraph Result[결과 출력하기]
        OutputDealr[딜러 결과 출력] --> OutputPlayers
        OutputPlayers[플레이어들 결과 출력] --> OutputResult
        OutputResult[최종 수익 출력]
    end

기타 자세한 사용법은 공식문서에서 확인하면 된다.