아키텍처 다이어그램은 시스템이 어떻게 작동하는지 이해하는 데 도움을 줍니다. 이를 통해 로직을 탐색하고, 데이터를 추적하며, 구조를 소통할 수 있습니다. Cursor는 Mermaid와 같은 도구를 사용하여 이러한 다이어그램을 직접 생성하는 것을 지원하므로, 몇 번의 프롬프트만으로 코드에서 시각적 표현으로 전환할 수 있습니다.
아키텍처 다이어그램 예시

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

다이어그램은 데이터가 어떻게 흐르고 컴포넌트들이 어떻게 상호작용하는지를 명확하게 보여줍니다. 다음과 같은 경우에 유용합니다:
  • 코드베이스의 흐름 제어를 이해하고 싶을 때
  • 입력에서 출력까지의 데이터 계보를 추적해야 할 때
  • 다른 사람들을 온보딩하거나 시스템을 문서화할 때
또한 디버깅과 더 스마트한 질문을 하는 데도 훌륭합니다. 시각적 자료는 여러분(그리고 모델)이 더 큰 그림을 볼 수 있도록 도와줍니다.

​
고려해야 할 두 가지 차원

생각해볼 수 있는 몇 가지 다른 관점들이 있습니다:
  • 목적: 로직, 데이터 흐름, 인프라스트럭처, 또는 다른 것을 매핑하고 있나요?
  • 형식: 빠른 것(Mermaid 다이어그램 같은)을 원하나요, 아니면 공식적인 것(UML 같은)을 원하나요?

​
프롬프트 작성 방법

명확한 목표로 시작하세요. 다음은 일반적인 질문 방법들입니다:
  • 플로우 제어: “컨트롤러에서 데이터베이스까지 요청이 어떻게 흘러가는지 보여주세요.”
  • 데이터 계보: “이 변수가 입력되는 지점부터 최종 도달 지점까지 추적해주세요.”
  • 구조: “이 서비스의 컴포넌트 레벨 뷰를 보여주세요.”
시작점과 끝점을 포함하거나, Cursor가 전체 경로를 찾도록 요청할 수 있습니다.

​
Mermaid 작업하기

Mermaid는 배우기 쉽고 (적절한 확장 프로그램과 함께) Markdown에서 직접 렌더링됩니다. Cursor는 다음과 같은 다이어그램을 생성할 수 있습니다:
  • 로직과 시퀀스를 위한 flowchart
  • 상호작용을 위한 sequenceDiagram
  • 객체 구조를 위한 classDiagram
  • 간단한 방향성 맵을 위한 graph TD
다이어그램을 미리 보려면 Mermaid 확장 프로그램을 설치할 수 있습니다.
  1. Extensions 탭으로 이동
  2. Mermaid 검색
  3. 설치
Mermaid 확장 프로그램 설치

​
다이어그램 전략

작게 시작하세요. 한 번에 모든 것을 매핑하려고 하지 마세요.
  • 하나의 함수, 라우트, 또는 프로세스를 선택하세요
  • Cursor에게 Mermaid를 사용해서 해당 부분을 다이어그램으로 만들어달라고 요청하세요
  • 몇 개가 완성되면, 이들을 결합해달라고 요청하세요
이는 C4 모델을 반영합니다 – 낮은 수준(코드 또는 컴포넌트)에서 시작해서 더 높은 수준의 개요로 올라가는 방식입니다.

​
권장 플로우

  1. 상세한 저수준 다이어그램으로 시작하세요
  2. 이를 중간 수준 뷰로 요약하세요
  3. 원하는 추상화 수준에 도달할 때까지 반복하세요
  4. Cursor에게 이들을 단일 다이어그램이나 시스템 맵으로 병합해달라고 요청하세요

​
핵심 요점

  • 다이어그램을 사용하여 흐름, 로직, 데이터를 이해하세요
  • 작은 프롬프트로 시작하여 다이어그램을 점진적으로 확장하세요
  • Mermaid는 Cursor에서 작업하기 가장 쉬운 형식입니다
  • C4 모델처럼 낮은 수준에서 시작하여 위쪽으로 추상화하세요
  • Cursor는 다이어그램을 생성, 개선, 결합하는 데 쉽게 도움을 줄 수 있습니다