메인 콘텐츠로 건너뛰기
아키텍처 다이어그램은 시스템이 어떻게 동작하는지 이해하는 데 도움이 돼. 논리를 탐색하고, 데이터를 추적하고, 구조를 전달하는 데 쓸 수 있어. Cursor는 Mermaid 같은 도구로 다이어그램을 바로 생성하는 걸 지원해서, 몇 번의 프롬프트만으로 코드에서 시각화까지 곧바로 이어갈 수 있어.
아키텍처 다이어그램 예시

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

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

​
고려해야 할 두 가지 차원

몇 가지 관점에서 생각해볼 수 있어:
  • Purpose: 로직, 데이터 흐름, 인프라, 아니면 다른 걸 매핑하려는 거야?
  • Format: 빠르게 그릴 수 있는 것(예: 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로 다이어그램을 손쉽게 생성하고, 다듬고, 결합할 수 있어