한 프로젝트를 기획하면서, 시스템 설계에 대한 플로우차트(flow chart)나 시스템 구조도를 그릴 일이 많을 것이다.
이 때 ai 를 사용해서 그리는 방법을 소개해보려고한다.
두 가지만 있으면 되는데, chatGPT와 mermaid live 사이트이다.
Flow Chart 그리기
먼저, chatGPT에 다음과 같이 프롬프트를 작성한다.
나는 예시로 한 프로젝트의 플로우차트를 그려보려한다.
이 ~~~ 프로젝트에서 학생이 강의실을 대여하고 대여를 취소하며 대여 여부를 확인할 수 있는 시스템을 mermaid.live에서 사용가능한 flowchart 코드로 작성해줘
나는 이 코드를 복사해서 mermaid live 라는 사이트에 들어가 왼쪽 코드를 작성할 수 있는 공간에 붙여넣기를 했다.
오른쪽에 생성된 플로우 차트를 확대해서 보면 아래와 같다.
꽤 마음에 드는 플로우 차트이다.
나는 chatGPT에게 이 플로우 차트가 세로로 연결되도록 수정했으면 좋겠다고 피드백을 남겼다.
chatGPT는 다시 나에게 코드를 생성해주었고, 나는 이걸 다시 mermaid live 에 붙여넣기하여 플로우 차트를 생성했다.
원하는 대로 플로우 차트가 수정된 모습이다.
시스템 구조도
이번에는 시스템 구조도를 그려보자
나는 클라이언트와 서버의 시스템 구조도를 각각 생성해보도록 해보았다.
나는 클라이언트 시스템의 구조도를 그리고 싶어. UI와 Display, Service Control 등 클라이언트의 요소들이 구성되어 있는 구조도를 그릴 mermaid live에 쓸 코드를 작성해줘.
이 코드를 다시 mermaid live 사이트에 복사 붙여넣기 하여 결과를 확인해보자
클라이언트 시스템 구조도에 대한 결과가 나왔다.
내가 추가로 언급하지 않은 Server 에 대한 내용과, 각 요소들 사이에서 어떤 연관 관계가 있는지까지 파악하고 작성해준다.
마찬가지로 서버 시스템의 구조도도 부탁해보았는데 결과는 다음과 같았다.
구조도의 기본 기틀을 작성하기에 유용한 방법이 될 수 있을 것 같다.
이미지로 저장하고 싶다면?
mermaid 사이트 하단의 Actions 메뉴를 열면 png, svg 등 다양한 형식의 파일로 생성한 다이어그램을 저장할 수도 있다.
다양한 다이어그램들
아래와 같이 다이어그램의 종류가 굉장히 다양하다!
직접 사이트에 들어가, 본인에게 필요한 다이어그램의 종류를 찾고 지정해서 chatGPT에 프롬프팅을 진행하면 원하는 결과와 더 가깝게 나올 수 있을 것 같다.
ref: https://mrnoobiest.tistory.com/181
