Mermaid로 다이어그램 편하게 그리기

안녕하세요. 그린입니다 🍏

이번 포스팅에서는 개발과는 조금 별도지만, 편한 툴이 있어 소개해볼까 합니다 😃

Mermaid라는걸로 다이어그램을 편리하게 그릴 수 있어요 🙋🏻

 

---

Mermaid?

Mermaid는 텍스트 기반으로 다양한 다이어그램을 생성할 수 있도록 도와주는 아주 편리한 툴입니다!

마크다운 문서 내에서 다이어그램을 쉽게 삽입할 수 있고, Github, notion 등 다양한 플랫폼에서도 지원을 해줍니다.

 

특히 저는 LucidChart와 Confluence를 많이 사용하고 있는데 아주 제격입니다.

 

Mermaid는 JavaScript로 구현되어 있어서 별도의 소프트웨어 설치 없이도 브라우저 환경에서 손쉽게 사용이 가능해요.

특히 개발자가 코드처럼 치면서 쉽고 빠르고 그리고 또 효율적으로 다이어그램을 생성하고 유지보수 할 수 있도록 설계되었어요.

코드를 작성하는게 일상인 개발자들에게는 정말 5분만 투자하면 익힐 수 있고 직관적으로 다이어그램의 작성 자동화를 이룰 수 있더라구요 ☺️

 

사실, 다이어그램을 직접 한땀 한땀 선을 연결하고 그리는 작업이 꽤나 공수가 많이 들잖아요?

또, 변경 사항이 생기면 다시 선의 간격도 조정하고 아휴 머리 아픕니다 🥲

이제는 Mermaid로 작업하면 그럴 필요가 없어집니다.

 

우선 Mermaid의 사이트는 요기에요ㅎㅎ

 

Mermaid | Diagramming and charting tool

 

특히 여기서 Docs 부분만 읽어보면 지금 어떤 문서에서 어떤 다이어그램이 필요한지 쉽게 응용해보면서 만들어낼 수 있습니다 🙋🏻

 

하나 더 정보를 드리자면, Mermaid Live라는 사이트에서 바로 코드를 짜보고 적용된 다이어그램을 즉각적으로 볼 수 있어서 유용합니다.

 

Online FlowChart & Diagrams Editor - Mermaid Live Editor

 

 

요런식으로 말이죠ㅎㅎ

 

그럼 다음으로 넘어가서 간단하게 Mermaid로 어떤것들을 만들 수 있는지 살펴볼까요?
Docs에 다 나와있지만 한번 톺아보겠습니다.

 

---

Mermaid의 핵심 기능

1️⃣ Flowchart

노드와 엣지를 사용해 플로우차트를 만들 수 있습니다.

graph 키워드를 사용해 생성할 수 있고, 방향을 지정할 수 있어요.

 

graph TD;
    A[시작] --> B{조건 확인};
    B -->|참| C[작업 수행];
    B -->|거짓| D[다른 작업 수행];
    C --> E[종료];
    D --> E;

 

요렇게 코드를 직관적으로 흐름을 만들 수 있어요.

 

 

이렇게 플로우차트로 쉽게 표현될 수 있습니다.

 

---

2️⃣ Sequence Diagram

제가 가장 많이 사용하는건데요.

시퀀스 다이어그램을 그릴 수 있어요.

시퀀스 다이어그램은 객체 혹은 시스템 간의 메시지 흐름을 시각적으로 표현하는 UML 표기법을 따릅니다.

사실 개발 전 설계를 해야할 일이 있거나 기술 문서를 만드는 경우 이 시퀀스 다이어그램을 많이 이용하게 됩니다.

어떤 흐름으로 메서드 콜이 일어나고 하는 등을 시퀀스로 표현하니까요.

 

sequenceDiagram
    participant 사용자
    participant 서버
    사용자->>서버: 로그인 요청
    서버-->>사용자: 로그인 성공 응답
    사용자->>서버: 데이터 요청
    서버-->>사용자: 데이터 전송

 

이런 예시 시퀀스 코드를 작성할 수 있어요.

 

 

그럼 이렇게 흐름이 잘 파악되게 알잘딱으로 그려줍니다.

물론, 더 많은 조건을 넣고 추가해 방대한 시퀀스도 해낼 수 있어요!

이 부분은 Docs를 보면서 필요한걸 사용하면 어렵지 않습니다 ㅎㅎ

 

---

3️⃣ State Diagram

상태에 대한 사항을 시각적으로도 표현할 수 있습니다.

조건 판단에 따른 상태가 될 수 있죠.

 

stateDiagram-v2
    [*] --> 대기
    대기 --> 실행 : 이벤트 발생
    실행 --> 종료 : 프로세스 완료
    종료 --> [*]

 

이런 상태 흐름을 아래와 같이 시각적으로 나타낼 수 있겠죠?

 

 

---

4️⃣ ERD (Entity Relationship Diagram)

DB 설계를 위한 ERD도 쉽게 작성할 수 있어요.

 

erDiagram
    고객 ||--o{ 주문 : "생성"
    주문 ||--|{ 제품 : "포함"
    고객 {
        string 이름
        string 이메일
    }
    주문 {
        int 주문번호
        date 주문일자
    }
    제품 {
        int 제품번호
        string 제품명
    }

 

이렇게 원하는 DB 설계를 코드로 쉽게 넣으면?

 

 

이렇게 짜잔하고 시각적으로 바로 표현됩니다.

 

이 네가지가 제가 제일 많이 사용하는 기능을 소개했는데, 이 외에도 많으니 Docs를 보면서 이해해보시면 좋을것 같아요!

가장 큰 장점은 머릿속에 있는걸 쉽게 구현할 수 있다는겁니다.

디자인에 신경을 쓰지 않고 본질에만 집중할 수 있게 해주죠.

그리고 수정에 아주 용이하다는것이 제가 실제로 써보면서 느낀 최고 장점입니다 😃

 

또 이런 기본 사용에서 추가되어 Mermaid의 스타일을 커스터마이징 해볼 수 도 있어요.

 

---

Mermaid Style Customizing

CSS를 활용해 스타일을 커스터마이징 할 수 있습니다.

 

예시로, 노드 색상을 변경해볼까요?

 

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#ffcc00'}}}%%
graph TD;
    A[노란색 노드] --> B[기본 스타일 노드];

 

 

이렇게 스타일이 변경될 수 있어요.

 

특정 노드에 대해서만 개별적으로도 스타일을 지정할 수도 있습니다.

 

graph TD;
    A[스타일 적용] --> B;
    class A redNode;

    classDef redNode fill:#f96,stroke:#333,stroke-width:2px;

 

 

몇줄의 스크립트로 아주 간단하게 표현되죠?

 

이런 Mermaid 어디서 사용해야 할까요?

 

---

Mermaid 사용 방법

이건 사실 너무 다양합니다.

아까처럼 브라우저에서 바로 Mermaid Live Editor를 실행해서 확인해볼 수도 있죠.

 

그 외, Github에서 마크다운 파일에 아래처럼 표현해서 사용할 수도 있어요.

 

```mermaid
graph TD;
    A --> B;
```

 

그 외에도 Lucid Chart, Confluence, Notion에서도 사용할 수 있죠.

 

정리하면 이런 다이어그램이 필요한 문서를 만들때 쉽게 스크립트를 짜서 다이어그램을 만들고 보여줄 수 있는 모든곳에서 사용할 수 있어요.

해당 Mermaid를 지원하지 않는다?

그럼 Live 사이트에서 만들고 저장해서 첨부해도 무방하죠!

 

---

Conclusion

Mermaid로 쉬운 스크립트를 통해 빠르게 다이어그램을 작성해보는건 어떨까요?

코드로 다이어그램을 관리하고 자동화할 수 있어서 문서 작업을 더욱 효율적으로 만들어 줍니다 🔥