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

안녕하세요. 구독자 님.

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

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

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

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

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

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

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

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

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

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

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

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

Include diagrams in your Markdown files with Mermaid

Mermaid is a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamicall...

github.blog

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' 선택

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

About Mermaid | Mermaid

Create diagrams and visualizations using text and code.

mermaid.js.org

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

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

그리고 이왕 다이어그램을 그리는 건데, 아웃풋 이 잘 나오면 좋겠죠? 그래서 어떤 AI의 아웃풋이 가장 좋을지, 총 3개의 AI(ChatGPT, Claude, Gemini)를 이용해서 테스트를 해볼게요.

각 AI에게 요청할 프롬프트는 아래와 같습니다. 네트워크 프로토콜 중에 SSL(Secure Socket Layer)이라고 있어요. 이 프로토콜로 통신하는 Client와 Server 사이에 오고가는 절차를 다이어그램으로 요청을 해볼거에요. 아래의 프롬프트는 단순 예시이며, 구독자님이 만들고자 하는 다이어그램이 있다면 입맛에 맞게 수정해보면 좋겠어요.

프롬프트 (요청 문구)

SSL 통신 과정을 mermaid로 작성해줘. 

AI 별로 생성한 결과물

0) 노션에서 모아보기

Notion – The all-in-one workspace for your notes, tasks, wikis, and...

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

gratis-fisher-c9f.notion.site

1) ChatGPT-4o가 생성해준 Mermaid 코드

sequenceDiagram
    participant Client
    participant Server

    Client-''Server: ClientHello (Supported SSL/TLS versions, Cipher suites)
    Server--''Client: ServerHello (Chosen SSL/TLS version, Cipher suite)
    Server--''Client: Certificate (Server's public key)
    Client--''Server: Pre-master secret (Encrypted with server's public key)
    Note over Client,Server: Server and Client derive session keys from Pre-master secret
    Server--''Client: ServerHelloDone
    Client--''Server: ClientKeyExchange
    Client--''Server: ChangeCipherSpec
    Client--''Server: Finished
    Server--''Client: ChangeCipherSpec
    Server--''Client: Finished
    Note over Client,Server: Secure SSL/TLS connection established

2) Claude Sonnet가 생성해준 Mermaid 코드

sequenceDiagram
    participant Client
    participant Server

    Client-''Server: ClientHello (지원하는 TLS 버전, 암호화 알고리즘 등)
    Server-''Client: ServerHello (선택된 TLS 버전, 암호화 알고리즘)
    Server-''Client: 서버 인증서 전송
    Server-''Client: ServerHelloDone
    Client-''Client: 서버 인증서 검증
    Client-''Server: ClientKeyExchange (pre-master secret)
    Client-''Server: ChangeCipherSpec
    Client-''Server: Finished (암호화된 메시지)
    Server-''Client: ChangeCipherSpec
    Server-''Client: Finished (암호화된 메시지)
    Note over Client,Server: 안전한 암호화 통신 시작

3) Gemini Advanced 가 생성해준 Mermaid 코드

sequenceDiagram
    participant Client
    participant Server

    Client-''Server: ClientHello (TLS 버전, 암호화 방식 등)
    Server-''Client: ServerHello (TLS 버전, 암호화 방식, 인증서 등)
    Server-''Client: Certificate (서버 공개키 포함)
    Client-''Server: ClientKeyExchange (PreMasterSecret 암호화)
    Client-''Server: ChangeCipherSpec (암호화 통신 시작 알림)
    Client-''Server: Finished (메시지 무결성 검증)
    Server-''Client: ChangeCipherSpec (암호화 통신 시작 알림)
    Server-''Client: Finished (메시지 무결성 검증)

    Note over Client,Server: 암호화된 데이터 통신