메인 콘텐츠로 건너뛰기아키텍처 다이어그램은 시스템이 어떻게 동작하는지 이해하는 데 도움이 돼. 논리를 탐색하고, 데이터를 추적하고, 구조를 전달하는 데 쓸 수 있어. Cursor는 Mermaid 같은 도구로 다이어그램을 바로 생성하는 걸 지원해서, 몇 번의 프롬프트만으로 코드에서 시각화까지 곧바로 이어갈 수 있어.
다이어그램은 데이터 흐름과 컴포넌트 상호작용을 명확하게 보여줘. 이런 상황에서 특히 유용해:
- 코드베이스의 흐름 제어를 이해하고 싶을 때
- 입력부터 출력까지 데이터 계보(lineage)를 추적해야 할 때
- 새 팀원을 온보딩하거나 시스템을 문서화할 때
디버깅에도 좋고, 더 똑똑한 질문을 던질 수 있게 해줘. 시각 자료는 너(그리고 모델)가 전체 그림을 보게 도와줘.
몇 가지 관점에서 생각해볼 수 있어:
- Purpose: 로직, 데이터 흐름, 인프라, 아니면 다른 걸 매핑하려는 거야?
- Format: 빠르게 그릴 수 있는 것(예: Mermaid 다이어그램)으로 갈래, 아니면 더 형식적인 것(예: UML)으로 갈래?
명확한 목표부터 시작해. 이런 식으로 많이 물어봐:
- Flow control: “요청이 컨트롤러에서 데이터베이스로 어떻게 흐르는지 보여줘.”
- Data lineage: “이 변수가 어디서 들어와서 어디로 가는지 추적해줘.”
- Structure: “이 서비스의 컴포넌트 수준 구조를 보여줘.”
시작점과 끝점을 지정해도 되고, Cursor한테 전체 경로를 찾아달라고 해도 돼.
Mermaid는 배우기 쉽고(적절한 확장 기능이 있으면) Markdown에서 바로 렌더링돼. Cursor는 이런 다이어그램을 만들어줄 수 있어:
- 로직과 순서를 위한
flowchart
- 상호작용을 위한
sequenceDiagram
- 객체 구조를 위한
classDiagram
- 단순한 방향 그래프를 위한
graph TD
다이어그램을 미리 보려면 Mermaid 확장을 설치하면 돼.
- Extensions 탭으로 이동
- Mermaid 검색
- 설치
작게 시작해. 한꺼번에 다 매핑하려고 하지 마.
- 함수, 라우트, 또는 프로세스 하나만 골라
- 그 부분을 Mermaid로 다이어그램 그려달라고 Cursor한테 요청해
- 몇 개가 모이면 합쳐달라고 해
이건 C4 모델과 비슷해 — 낮은 수준(코드나 컴포넌트)에서 시작해서 더 높은 수준의 개요로 올라가는 방식이야.
- 자세한 저수준 다이어그램부터 시작해
- 그걸 중간 수준의 뷰로 요약해
- 원하는 추상화 수준에 도달할 때까지 반복해
- 하나의 다이어그램이나 시스템 맵으로 합쳐달라고 Cursor한테 요청해
- 흐름, 로직, 데이터를 이해할 땐 다이어그램을 활용해
- 작은 프롬프트로 시작해서 다이어그램을 거기서부터 확장해
- Mermaid가 Cursor에서 다루기 가장 쉬운 포맷이야
- C4 모델처럼 낮은 수준에서 시작해 점점 추상화해
- Cursor로 다이어그램을 손쉽게 생성하고, 다듬고, 결합할 수 있어
