오늘은 OpenAI의 ChatGPT와 Mermaid를 사용하여 간단하고 명확한 시퀀스 다이어그램을 만드는 방법을 다룰 것입니다. 이것은 복잡한 시스템이나 프로세스를 설명하는 데 매우 유용하며, 서로 간의 통신을 효과적으로 시각화하는 데 도움이 됩니다.

다이어그램 예시

1단계: 시나리오 설계

첫 번째 단계는 시나리오를 설계하는 것입니다. 예를 들어, 온라인 쇼핑 웹사이트에서 상품을 구매하는 시나리오를 가정해 보겠습니다. 시나리오는 다음과 같습니다:

  1. 사용자가 상품을 선택합니다.
  2. 사용자가 장바구니에 상품을 추가합니다.
  3. 사용자가 체크아웃을 합니다.
  4. 결제 시스템이 사용자의 결제를 처리합니다.
  5. 결제가 완료되면, 시스템은 사용자에게 결제 완료 메시지를 보냅니다.

2단계: ChatGPT를 사용하여 시퀀스 다이어그램 작성

이제 시나리오가 준비되었으므로, ChatGPT에 다음과 같은 지시를 내립니다: "위에 설명된 시나리오를 기반으로 한 시퀀스 다이어그램을 만들어주세요."

ChatGPT의 응답:

sequenceDiagram
    participant User
    participant System
    participant Payment

    User->>System: Selects product
    System->>User: Confirms product selection
    User->>System: Adds product to cart
    System->>User: Confirms product added to cart
    User->>System: Checkout
    System->>Payment: Process payment
    Payment-->>System: Payment confirmation
    System->>User: Sends payment confirmation message

3단계: Mermaid에 시퀀스 다이어그램 입력

이제 Mermaid를 사용하여 다이어그램을 그릴 준비가 되었습니다. Mermaid Live Editor에 위에서 얻은 코드를 붙여넣습니다. 그러면 시퀀스 다이어그램이 실시간으로 그려집니다.

저는 구글 문서도구에 확장기능을 설치해서 아래와 같은 다이어그램을 작성했습니다.

4단계: 다이어그램 확인 및 저장

마지막으로, 다이어그램이 정확하게 표현되었는지 확인하고, 필요한 경우 수정합니다. 만족하면, 다이어그램을 이미지나 PDF 형식으로 내보낼 수 있습니다.

그러면 완성된 다이어그램은 시나리오의 각 단계를 명확하게 보여주며, 사용자, 시스템, 결제 처리 시스템 간의 상호작용을 시각화합니다.

이 방법은 복잡한 프로세스를 이해하고 문서화하는 데 매우 유용합니다. ChatGPT는 효과적인 시퀀스 다이어그램을 작성하는 데 필요한 논리와 순서를 제공하며, Mermaid는 이러한 정보를 빠르게 시각화합니다. 이 두 가지 도구를 함께 사용하면, 시스템의 행동을 빠르고 쉽게 표현할 수 있습니다.

결론

이렇게, ChatGPT와 Mermaid를 이용해 빠르고 효과적인 시퀀스 다이어그램을 만들 수 있습니다. 이는 소프트웨어 개발, 시스템 설계 및 문서화 작업에 많은 도움이 될 것입니다. 이 두 가지 도구의 강력한 조합을 활용하여 여러분의 작업을 쉽게 만들어보세요!

참고 : https://mermaid.js.org/intro/

+ Recent posts