바로바로 바이브 코딩 with 커서 AI · 03장 커서로 문서, 프레젠테이션, 학습 자료 만들어보기 · 03.2 커서로 시각화 문서 작업해보기
바로 10 draw.io로 멋진 흐름도 그려보기
이번에는 커서와 draw.io라는 확장 프로그램을 조합하여 흐름도를 그려보겠습니다. 예를 들어 스파게티 만드는 흐름도를 그려보라고 하면 다음과 같이 그려줍니다.
draw.io의 장점은 흐름도를 그려놓고 마우스와 키보드 등을 이용하여 수정을 할 수도 있다는 점입니다. mermaid 역시 흐름도를 그릴 수 있긴 하지만 수정을 하려면 mermaid 코드를 수정해야 하므로 draw.io와는 약간 사용 경험이 다릅니다.
draw.io 확장 프로그램 설치 역시 Marp를 설치했던 것처럼 확장 프로그램 검색에서 ‘draw.io’를 검색한 뒤 [Install]을 누르면 설치할 수 있습니다.
설치 후 draw.io 작업을 할 빈 폴더를 하나 만들고 커서로 열어줍니다. 그런 다음 myfirst draw.drawio와 같이 확장자 이름을 .drawio로 지어 빈 파일을 하나 만들어줍니다. 파일을 클릭하면 커서 내에 draw.io 프로그램 편집 화면이 나타납니다. 이 화면을 커서가 이해하고 흐름도를 그리는 등의 작업을 할 수 있습니다.
커서의 에이전트 채팅 창에 파일을 드래그 앤 드롭하여 컨텍스트로 추가한 뒤 ‘규칙적으로 학습하는 가장 좋은 사이클을 그려보라’고 이야기하겠습니다.
그러면 놀랍게도 커서가 draw.io에 그림을 그려줍니다.
흐름도를 만든 후에는 [File → Export] 메뉴로 svg, png 파일로 내보낼 수 있어 매우 편리합니다. 다만 draw.io는 첫 번째 탭만 그림으로 내보냅니다. 그래서 그림을 내보내기 전에 draw.io 편집 화면 아래쪽에 보이는 탭에서 빈 편집 화면 탭을 종료 후 저장한 뒤 내보내야 합니다.
