아키텍처 다이어그램은 시스템이 어떻게 동작하는지 이해하는 데 도움을 줘. 로직을 탐색하고, 데이터를 추적하고, 구조를 커뮤니케이션하는 데 쓸 수 있어. Cursor는 Mermaid 같은 도구로 이 다이어그램을 직접 생성하는 기능을 지원하니까, 몇 번의 프롬프트만으로 코드에서 시각화까지 바로 이어갈 수 있어.
아키텍처 다이어그램 예시

​
다이어그램이 중요한 이유

다이어그램은 데이터 흐름과 컴포넌트 간 상호작용을 명확하게 보여줘. 이런 상황에서 특히 유용해:
  • 코드베이스에서 제어 흐름을 이해하고 싶을 때
  • 입력부터 출력까지 데이터 라인리지를 추적해야 할 때
  • 다른 사람을 온보딩하거나 시스템을 문서화할 때
디버깅하거나 더 좋은 질문을 할 때도 효과적이야. 시각화는 너(그리고 모델)가 전체 그림을 보게 도와줘.

​
고려해야 할 두 가지 축

몇 가지 관점에서 생각해볼 수 있어:
  • 목적: 로직, 데이터 흐름, 인프라, 아니면 다른 걸 매핑하려는 거야?
  • 형식: 빠르게 그릴 수 있는 것(예: Mermaid 다이어그램)으로 갈래, 아니면 더 정형화된 것(예: UML)으로 갈래?

​
프롬프트 작성 방법

명확한 목표부터 잡아. 이렇게 물어보면 좋아:
  • Flow control: “요청이 컨트롤러에서 데이터베이스까지 어떻게 흐르는지 보여줘.”
  • Data lineage: “이 변수가 어디서 들어와서 어디까지 가는지 추적해줘.”
  • Structure: “이 서비스의 컴포넌트 수준 구조를 보여줘.”
시작점과 끝점을 지정해도 되고, Cursor한테 전체 경로를 찾아보라고 해도 돼.

​
Mermaid로 작업하기

Mermaid는 배우기 쉽고(적절한 확장 기능이 있으면) Markdown에서 바로 렌더링돼. Cursor는 다음 같은 다이어그램을 만들어 줄 수 있어:
  • 논리와 흐름을 위한 flowchart
  • 상호작용을 위한 sequenceDiagram
  • 객체 구조를 위한 classDiagram
  • 간단한 방향 그래프를 위한 graph TD
다이어그램을 미리 보려면 Mermaid 확장 기능을 설치해.
  1. Extensions 탭으로 이동
  2. Mermaid 검색
  3. 설치
Mermaid 확장 기능 설치하기

​
다이어그램 전략

작게 시작해. 한 번에 전부 매핑하려고 하지 마.
  • 함수, 라우트, 또는 프로세스 하나를 골라
  • 그 부분을 Mermaid로 다이어그램 그려 달라고 Cursor한테 요청해
  • 몇 개가 모이면 합쳐 달라고 해
이건 C4 모델이랑 비슷해 – 낮은 수준(코드나 컴포넌트)에서 시작해서 더 높은 수준의 개요로 올라가는 방식이야.
  1. 상세한 저수준 다이어그램부터 시작해
  2. 그걸 중간 수준 뷰로 요약해
  3. 원하는 추상화 수준에 도달할 때까지 반복해
  4. Cursor한테 단일 다이어그램이나 시스템 맵으로 병합해 달라고 해

​
핵심 정리

  • 흐름, 로직, 데이터 이해를 위해 다이어그램을 활용해
  • 작은 프롬프트로 시작해서 다이어그램을 거기서부터 키워 나가
  • Mermaid가 Cursor에서 가장 쓰기 쉬운 포맷이야
  • C4 모델처럼 낮은 레벨에서 시작해 위로 추상화해
  • Cursor로 다이어그램을 쉽게 생성하고, 다듬고, 조합할 수 있어