다이어그램 작성에는 무엇을 사용하시나요?
What do people use for diagramming?
핵심 요약
Claude로 프로젝트 설계를 자동화하는 과정에서 다이어그램을 시각화하는 최적의 도구에 대해 논의합니다.
- Mermaid 활용 — 텍스트 기반으로 다이어그램을 생성하고 버전 관리하기에 용이함
- HTML 생성 — Claude에게 직접 HTML/JS 기반의 다이어그램을 그리게 하여 브라우저로 확인
- 도구 연동 — VS Code 확장 프로그램이나 브라우저 도킹 기능을 활용해 가독성 개선
- 다양한 대안 — Mermaid 외에도 Excalidraw나 draw.io 같은 전문 도구 사용
우리는 Claude를 엔드 투 엔드 관리 프로세스에 활용하고 있어. 팀 에이전트들이 빌드를 시작하기 전에 프로젝트 개요, 솔루션 설계, 구현 계획을 생성하고(여러 단계의 검토 에이전트들이 작업을 확인하는 과정도 포함됨).
각 단계는 게이트가 설정되어 있고, 여기에는 문서 읽기가 포함돼. 문서를 더 잘 읽고 이해할수록 초기 빌드 이후에 재작업할 필요가 줄어들고, 결과적으로 더 빠르게 결과물을 전달할 수 있지.
그런데 한 가지 골칫거리는 다이어그램이야. 우리는 생성하는 문서에 md 파일을 사용하는데, 결국 항상 설계에 대한 텍스트 기반 표현으로 끝나버리거든.
혹시 비슷한 방식으로 작업하는 사람 있어? Claude가 생성한 다이어그램을 위해 무엇을 사용해? 좋은 팁 있으면 공유 좀 해줘.
Edit - 업데이트:
답변들 고마워. 다들 Mermaid 쪽으로 많이 기우는 것 같고, 전문 다이어그램 도구로 연결하는 MCP 서버에 대한 언급도 좀 있네. 그래도 나는 몇 가지 유형의 HTML 다이어그램을 생성하는 스킬을 만드는 아이디어가 정말 마음에 들어서, 당분간 그걸 시도해보고 어떻게 되는지 보려고 해.
