개발

[개발] Mermaid 사용하기

아현이라구 2024. 9. 23. 07:15
반응형

조사 배경

저는 기존에 간단한 플로우 차트를 그릴 때 draw.io를 사용해왔습니다. 하지만 최근에 Mermaid라는 도구를 알게 되었고, 이 도구를 사용하면 다이어그램을 훨씬 간편하게 작성할 수 있다는 정보를 접하게 되었습니다. 이에 대해 더 알아보고 실제로 사용해본 후, 그 경험을 바탕으로 블로그에 정리하기로 했습니다.

 

Mermaid란?

텍스트 기반의 다이어그램 및 차트 생성 도구로, 마크다운 문법을 사용하여 다이어그램을 간편하게 작성할 수 있게 해줍니다. 개발자는 간단한 텍스트 코드만으로 다양한 시각화 도구(예: 순서도, Gantt 차트, 클래스 다이어그램, 상태도 등)를 만들 수 있습니다.

Doc URL : https://mermaid.js.org/syntax/flowchart.html

 

Flowcharts Syntax | Mermaid

 

mermaid.js.org

 

 

주요특징

  • Markdown과 통합: GitHub, GitLab, Notion 같은 협업 툴에서 마크다운과 함께 사용 가능.
  • 다양한 다이어그램 지원: Flowchart, Sequence Diagram, Gantt Chart, Class Diagram, ERD 등.
  • 심플한 구문: 다이어그램을 간단한 텍스트 코드로 정의.
  • 웹 환경 지원: 웹페이지 내에 다이어그램을 쉽게 삽입 가능.

 

Mermaid의 장점

  • 경량성: 텍스트로 작성되기 때문에 파일 용량이 작습니다.
  • 버전 관리 용이: Git과 같은 버전 관리 시스템에서 충돌 해결이 쉽습니다.
  • 수정 용이성: 도구에서 직접 그림을 수정할 필요 없이, 텍스트를 수정하는 것만으로 다이어그램을 변경할 수 있습니다.

 

사용법

주로 사용하는 3가지 차트를 설명하겠습니다.

 

 

1. 플로우차트 (Flowchart)
플로우차트는 graph 키워드를 사용합니다. 방향은 TB (위에서 아래), LR (왼쪽에서 오른쪽) 등을 설정할 수 있습니다. 
```mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Continue]
    B -->|No| D[Fix it]
    D --> B

이 코드는 다음과 같은 플로우차트를 그립니다:
- A: "Start"에서 시작.
- B: "Is it working?"에서 조건 검사.
- 조건에 따라 "Yes"는 C로, "No"는 D로 이동.
- D에서 다시 B로 루프.

 

2. 시퀀스 다이어그램 (Sequence Diagram)

시퀀스 다이어그램은 sequenceDiagram 키워드를 사용합니다.

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: I'm good thanks!


이 코드는 Alice와 Bob 사이의 간단한 대화를 시각화합니다.

 

3. 간트 차트 (Gantt Chart) gantt 키워드를 사용하여 간트 차트를 그릴 수 있습니다.

```mermaid
gantt
    title Project Timeline
    section Section 1
    Task 1 :a1, 2024-09-01, 5d
    Task 2 :after a1, 3d


이 코드는 특정 날짜와 기간을 기준으로 하는 작업 흐름을 시각화한 간트 차트입니다.

 

마무리 정리

Mermaid는 코드 기반의 다이어그램 생성 도구로, 텍스트만으로 다양한 도식화를 할 수 있다는 점에서 매우 유용합니다.

특히 플로우차트, 시퀀스 다이어그램, 간트 차트와 같은 복잡한 그래픽 요소를 간편하게 관리할 수 있어, 협업 시에도 버전 관리가 쉽고 효율적입니다.

반면, draw.io는 직관적인 GUI를 제공하여 비개발자나 시각적인 조작이 필요한 경우에 더 적합합니다.

 

정리하자면, Mermaid는 텍스트 기반 다이어그램 생성이 필요한 개발자나 문서 작업에 최적화되어 있으며, draw.io는 드래그 앤 드롭 방식의 직관적인 다이어그램 작성을 원하는 사용자를 위한 도구입니다.

각 도구의 특성과 장점을 파악한 후, 작업 환경에 맞는 도구를 선택하는 것이 생산성 향상에 큰 도움이 될 것입니다.

두 도구 모두 상황에 따라 강력한 다이어그램 작성 도구로 활용할 수 있으니, 여러분의 워크플로우에 맞는 방법을 찾아 효율적으로 사용해보세요!

반응형