⛏️ 삽시일반

Mermaid UML 플로우차트? ChatGPT로 1분 만에 완성! Notion 활용 꿀팁까지!

오늘은 ChatGPT와 Mermaid를 활용하여 단 1분 만에 UML 플로우차트를 그리는 방법을 소개해드리고자 합니다.

2024.07.13 | 조회 529 |
0
|

Hello.Stranger

"하루를 13시간 앞서 시작하세요:" 해외 IT 트렌드를 가장 먼저 만날 수 있게 '아침 7시'마다 뉴스레터를 보내드려요.🛸

안녕하세요. 구독자 님.

개발자, 기획자, 혹은 온라인 콘텐츠 제작자들에게 있어, 다이어그램을 그리는 것은 매우 중요한 작업 중 하나라고 생각이 들어요. 가령, 근사한 프로젝트를 하나 구상하여 동료 혹은 투자자에게 설명할 필요가 있을 텐데, 말로 설명하기에는 한계가 있기 때문이죠! (물론 근사한 PPT라면 만사 오케이일듯..)

아무튼 이렇게 복잡한 과정을 간단하게 표현하고, 이해를 돕기 위해서는 효과적인 툴이 하나 있으면 좋을거에요. 그래서 오늘은 ChatGPT와 Mermaid를 활용하여 단 1분 만에 UML 플로우차트를 그리는 방법을 소개해드리고자 합니다.

1. UML 플로우 차트부터 알고 가자.

UML 플로우 차트는 시스템의 흐름과 작업 과정을 시각적으로 표현하는 데 매우 유용한 도구에요. 이 다이어그램은 복잡한 프로세스를 간단하게 시각화하여 이해를 돕고, 팀원 간의 원활한 소통을 가능하게 합니다.

출처: https://www.uml-diagrams.org/information-flow-diagrams.html
출처: https://www.uml-diagrams.org/information-flow-diagrams.html

 

이러한 UML 플로우 차트는 다양한 상황에서 활용되게 되는데요. 대게 시스템 설계, 프로세스 문서화, 교육 및 트레이닝 등에 필요로 해요. 

  1. 시스템 설계: 소프트웨어 개발 과정에서 시스템의 구조와 동작을 설계할 때.
  2. 프로세스 문서화: 복잡한 비즈니스 프로세스를 문서화하고 개선할 때.
  3. 교육 및 트레이닝: 새로운 팀원이나 이해관계자에게 시스템을 설명하고 교육할 때.

 

구독자님의 팀에 새로운 신입 사원이 들어왔어요. 이 분에게 기존에 운영해오던 프로젝트를 코드만 툭 던져줄 수도 있겠지만(so bad..ㅠㅠ), 이러한 다이어그램도 같이 전달한다면 이해하기 편하지 않을까요?

 

2. 'Mermaid', 너는 또 뭐야...?

UML을 그리기 위한 도구는 매우 다양합니다. 원초적으로는 PPT나 그림판으로 도형을 오려 붙여서 넣을 수도 있구요. 저는 학부 시절에 Star UML이라는 도구를 소개받아서 사용했었던 기억이 있어요. 모든게 영어라 불편했지만.. ;)

이러한 도구 중 하나로 소개드리려는게 'Mermaid'에요. Mermaid 란, 다이어그램을 쉽게 생성할 수 있게 해주는 오픈 소스 도구에요. 특히, 텍스트 기반의 마크다운 형식으로 다이어그램을 그릴 수 있어, 코드 작성에 익숙한 개발자들에게 이만한 도구가 없을 듯 합니다.

그런데 이것을 왜 소개해주냐고요? 왜냐하면 개발자가 자주 사용하는 Github이나 컨텐츠 제작자, 기획자, 등 다양한 사람들이 많이 사용하는 Notion에서도 사용할 수 있기 때문이에요. Github이나 Notion에 Mermaid를 작성하면 우리가 원하는 다이어그램을 만들어준답니다.

 

1) Github 예시

  • 사용법: *.md 파일 생성 > ```mermaid ``` 로 코드블럭 작성
```mermaid sequenceDiagram participant dotcom participant iframe participant viewscreen dotcom-''iframe: loads html w/ iframe url iframe-''viewscreen: request template viewscreen-''iframe: html & javascript iframe-''dotcom: iframe ready dotcom-''iframe: set mermaid data on iframe iframe-''iframe: render mermaid ```

2) Notion 예시

  • 사용법: 컨텐츠에 '코드' 블럭 추가 > 좌측 상단 언어 선택에서 'Mermaid' 선택
노션에서의 Mermaid
노션에서의 Mermaid

 

Memaid의 문법이 궁금하신 분은 아래 링크를 참고해주세요.

 

3.AI로 Mermaid 만들기 (GPT vs Claude vs Gemini)

요즘 귀찮은 작업이나 어려운 작업이 있으면 AI를 활용하는게 많이 편하더라구요. 앞서 말한대로 Mermaid를 작성하기 위해서는 모든 다이어그램을 텍스트로 작성하고 연결을 해야하는 번거로움이 있는데요. 이러한 작업을 AI를 통해 사용해보고자 합니다.

 

 

멤버십 구독자만 읽을 수 있어요

가입하시려면 아래를 클릭해주세요

댓글

의견을 남겨주세요

확인
의견이 있으신가요? 제일 먼저 댓글을 달아보세요 !

© 2024 Hello.Stranger

"하루를 13시간 앞서 시작하세요:" 해외 IT 트렌드를 가장 먼저 만날 수 있게 '아침 7시'마다 뉴스레터를 보내드려요.🛸

뉴스레터 문의 : hello.stranger1337@gmail.com

자주 묻는 질문 오류 및 기능 관련 제보

서비스 이용 문의admin@team.maily.so

메일리 (대표자: 이한결) | 사업자번호: 717-47-00705 | 서울 서초구 강남대로53길 8, 8층 11-7호

이용약관 | 개인정보처리방침 | 정기결제 이용약관