ChatGPT으로 개발 디자인 문서 작성 속도 높이기: 빠르게 다이어그램 그리기

나는 ADR을 작성할 때, 다이어그램을 첨부하는 편이다. 그래야 재택근무를 하며 구두로 논의한 것들을 한눈에 파악하기 수월하다.
그런데 draw.io 같은 도구를 사용하면 반응이 느려 생산성이 떨어지기 때문에, 문서를 빠르게 작성하기 어렵다.
 
본 글에서는 간단한 개발 디자인 문서에 다이어그램을 빠르게 작성하는 방법을 설명하고자 한다. 

---

1. 플레인 텍스트 언어로 다이어그램 그리기

mermaid 혹은 plantUml 같은 플레인 텍스트 언어를 사용하면, 마치 마크다운 문법으로 다이어그램을 그리는 듯한 경험을 할 수 있다. 
 

(1) mermaid 맛보기

mermaid를 사용하면, 다음과 같은 문법으로 다이어그램을 쉽게 그릴 수 있다.
mermaid는 많은 에디터에서 지원하는 문법이고, 지원하는 다이어그램 유형이 다양하다. 그리고 예쁘다 🌸
notion, github, 마크다운 에디터 도구인 obsidian , confluence WIKI 플러그인에서도 사용할 수 있기 때문에 사용성이 좋다. 

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

 

(2) plantUML 맛보기

plantUML으로도 플레인 텍스트로 다이어그램을 표현할 수 있다.
https://plantuml.com/ko/

 

2-A-1. Chatgpt에게 Mermaid 문법으로 다이어그램을 그려달라고 요청하기 

개발을 하다가 mermaid 문법을 확인하고 다이어그램을 쓰는 것도 시간이 꽤 걸릴 수 있다.
머리속에 그려져 있는 것을 그대로 chatgpt에게 물어보면, 필요한 형태의 다이어그램을 반환한다.
 
토폴로지을 표현한 다이어그램을 머메이드 문법으로 만들어내는 chatgpt prompt 예시이다. 

mermaid 문법을 사용하여 다이어그램을 그려줘. 나는 카프카 스트림즈를 사용하여 구매 데이터를 분석하는 시스템을 개발할거야. 
내가 말한 순서대로 토폴로지를 반영한 다이어그램을 그려줘.

1. 구매 카프카 이벤트가 발행될거야.
2. 구매 이벤트의 개인정보를 마스킹한 후, 마스킹 이벤트를 발행할거야.
3. 마스킹 이벤트에서 구매한 품목이 커피인 경우, 커피 구매 이벤트를 발행할거야.
4. 마스킹 이벤트에서 구매한 품목이 전자기기인 경우, 전자기기 구매 이벤트를 발행할거야.
5. 마스킹 이벤트에서 어뷰저 회원이 포함된 경우, 어뷰저 알림 이벤트를 발행할거야.

이렇게 질문하면, 다음과 같이 mermaid 문법으로 다이어그램을 그려준다. 그러면 이 결과값을 복사해서, 사용하면 된다. 

2-A-1. excalidraw으로 그림을 그리고 싶다면, mermaid-to-excalidraw를 사용하자. 

https://mermaid-to-excalidraw.vercel.app/

 

2-B. 혹은  PlantUML으로 작성해달라고 요청한다

2-1 질문 이후, 다음과 같은 prompt를 보낸다.

mermaid 문법 결과를 plantUML으로 그려줘

3. Editor에서 결과 확인하기 

mermaid.live 사이트에서 결과값을 보고, 원하는 형태로 다이어그램이 그려졌는지 확인할 수 있다.
혹은, notion / obsidian / github PR 등에서 그래프를 표현할거라면, 해당 Viewer에서 결과를 보고 확인할 수도 있다. 

 

<<주의사항>>

직장에서 Chatgpt을 활용하여 다이어그램을 그리는 것은 보안상 문제가 될 수 있다. 그래서 나는 prompt를 작성할 때, 실제 비즈니스 로직와 용어를 사용하지는 않는다. 가상의 비즈니스 예시로 플로우 다이어그램을 얻은 후, 로컬에서 다시 텍스트를 변환해서 사용하고 있다.