Mermaid: 다이어그램 생성을 위한 강력한 도구

Mermaid

Mermaid는 JavaScript기반의 다이어그램과 차트 작성을 도와주는 도구입니다. 차트를 넣을려면 이미지를 따로 만들고 수정하려면 새로 만들어야하는 불편함이 있습니다. 그런데 Mermaid를 사용하면 Markdown 문서에서 텍스트를 이용해서 바로 시각적인 다이어그램을 만들 수 있습니다. 

 

장점

• 간편한 문법 : 코드로 다이어그램을 만들 수 있어서, 복잡한 과정없이 생성 및 수정이 가능합니다.
• Markdown 통합: GitHub 등에서 바로 사용할 수 있어서 README파일이나 문서에서 쉽게 사용할 수 있습니다.
• 다양한 다이어그램 지원 : 플로우차트, 시퀀스 다이어그램, 간트 차트 등 다양한 유형의 다이어그램을 지원합니다.

 

예시

 

 

```mermaid
flowchart //mermaid에서 flowchart로 그리겠다.
// 구조 정의 시작
    subgraph searching
    direction TB
        subgraph track serach
        direction TB
            SA[spotify Api]
            SAR[노래 검색 결과]
        end

        subgraph lyrics search
        direction TB
            NA[Naver Api]
            NAR[가사 검색 결과]
            lyrics[가사 화면]
        end

    end
    subgraph additional
    direction TB
        저장
        플레이
    end
    SC[search]
    FP[first Page]
// 구조 정의 끝


// 화살표 그리기
    FP --> SC --> searching

    SA --- SAR

    NA --- NAR ---lyrics

    SAR --- additional
    NAR --- additional
    lyrics --- additional
    

```

제가 만든 프로젝트에서 사용한 mermaid입니다. 보시면 아래의 텍스트들을 이 위의 시각적인 표로 구현되었습니다.

저는 위에 차트의 구조를 짜고, 아래에 각 요소들의 화살표들을 몰아서 구성했습니다.

 

간단 사용법

git README에서 사용기준으로 간단하게 알려드리겠습니다.

시작

```mermaid

코드 작성

```

저 사이에 text를 만들어주면 그려지게 됩니다. 

그리고 안에 그려주면 됩니다.

요소 만들기

위의 예시를 보시면 SA[spotify api]로 된것이 있습니다. SA는 요소의 이름입니다. 그리고 []안에가 요소 안에 text입니다. SA는 화살표를 만들때 사용되고 []안에 이름은 보여지는 글씨입니다.

 

상자

subgraph는 감싸는 상자를 만듭니다. 안에 들어갈 요소를 만들어주고 end를 이용해서 subgraph의 끝을 나타내줍니다. 

 

화살표

화살표를 사용할 때는 기본적으로 왼쪽에서 오른쪽으로 방향을 가지게 됩니다. SA --- SAR은 SA에서 SAR 방향으로 화살표를 그리라는 것을 의미합니다.

기본적으로 저렇게 사용됩니다.

자세하고 다양한 정보는 공식 사이트에서 잘 설명하고 있으니 방문해서 보시는 것을 추천합니다.

https://mermaid.js.org/intro/

About Mermaid | Mermaid

 

결론
Mermaid는 복잡한 프로세스를 간단하고 직관적으로 시각화할 수 있는 뛰어난 도구입니다. 다양한 유형의 다이어그램을 지원하여 사용자는 필요에 따라 적절한 형태로 정보를 전달할 수 있습니다. 여러분도 Mermaid를 활용하여 프로젝트의 구조를 시각적으로 표현하고, 아이디어를 더욱 효과적으로 전달해 보세요!