3.1 플로우차트 생성 (Mermaid.js)
Mermaid.js란? 텍스트 기반으로 다이어그램을 생성하는 오픈소스 도구입니다. 코드를 작성하면 자동으로 시각적 다이어그램이 렌더링됩니다.
기본 플로우차트 문법
graph TD
A[시작] --> B{조건 판단}
B -->|Yes| C[작업 수행]
B -->|No| D[다른 작업]
C --> E[완료]
D --> E실제 렌더링 결과
graph TD
A[시작] --> B{조건 판단}
B -->|Yes| C[작업 수행]
B -->|No| D[다른 작업]
C --> E[완료]
D --> E
PM 업무 플로우차트 예시 — 기능 요청 처리
graph TD
A[기능 요청 접수] --> B{긴급도 판단}
B -->|긴급| C[핫픽스 검토]
B -->|일반| D[백로그 등록]
C --> E{기술 검토}
D --> F[우선순위 평가]
E -->|가능| G[즉시 개발]
E -->|불가| H[대안 검토]
F --> I[스프린트 배정]
G --> J[QA 테스트]
I --> J
H --> D
J --> K[배포]
AI에게 플로우차트 요청하는 프롬프트
다음 프로세스를 Mermaid.js 플로우차트 코드로 만들어주세요.
프로세스: 사용자 회원가입 흐름
1. 이메일 입력
2. 이메일 형식 검증 (실패 시 에러 메시지)
3. 비밀번호 입력 및 확인
4. 이용약관 동의
5. 인증 이메일 발송
6. 이메일 인증 완료
7. 프로필 설정 (선택)
8. 가입 완료
graph TD 형식으로 작성하고, 조건 분기는 다이아몬드({})로 표현해주세요.3.2 시스템 아키텍처 다이어그램
시스템의 전체 구조를 시각화하여 팀원과 이해관계자에게 기술 구조를 설명할 때 활용합니다.
웹 서비스 아키텍처 예시
graph LR
subgraph 클라이언트
A[웹 브라우저]
B[모바일 앱]
end
subgraph 서버
C[API 서버]
D[인증 서버]
end
subgraph 데이터
E[(데이터베이스)]
F[(캐시)]
end
A --> C
B --> C
C --> D
C --> E
C --> F
아키텍처 다이어그램 요청 프롬프트
다음 서비스의 시스템 아키텍처를 Mermaid.js로 그려주세요.
서비스: 온라인 교육 플랫폼
구성요소:
- 프론트엔드: React 웹앱, React Native 모바일앱
- 백엔드: Node.js API 서버
- 인증: OAuth2.0 (Google, GitHub)
- DB: PostgreSQL (사용자, 강의), Redis (세션, 캐시)
- 스토리지: AWS S3 (영상, 자료)
- CDN: CloudFront
subgraph로 그룹화하고 데이터 흐름 방향을 화살표로 표시해주세요.3.3 ER 다이어그램 / 데이터 모델링
ER(Entity-Relationship) 다이어그램은 데이터 구조와 테이블 간 관계를 시각화합니다. PM이 데이터 모델을 이해하면 개발팀과의 소통이 원활해집니다.
Mermaid erDiagram 문법
erDiagram
USER ||--o{ PROJECT : "생성"
USER ||--o{ COMMENT : "작성"
PROJECT ||--|{ TASK : "포함"
TASK ||--o{ COMMENT : "관련"
USER {
int id PK
string name
string email
date created_at
}
PROJECT {
int id PK
string title
string status
int owner_id FK
}
TASK {
int id PK
string title
string priority
int project_id FK
}
관계 표기법
| 기호 | 의미 | 예시 |
|---|---|---|
||--|| |
1:1 관계 | 사용자 — 프로필 |
||--o{ |
1:N 관계 (0 이상) | 사용자 — 게시글 |
||--|{ |
1:N 관계 (1 이상) | 프로젝트 — 태스크 |
}o--o{ |
N:M 관계 | 사용자 — 프로젝트(멤버) |
3.4 사용자 여정 맵 (User Journey Map)
사용자가 서비스를 이용하는 과정을 시각화하여 경험의 좋은 점과 개선점을 파악합니다.
Mermaid Journey 다이어그램
journey
title 신규 사용자 온보딩 여정
section 가입
홈페이지 방문: 5: 사용자
회원가입 클릭: 4: 사용자
정보 입력: 3: 사용자
이메일 인증: 2: 사용자
section 첫 사용
튜토리얼 시작: 4: 사용자
첫 프로젝트 생성: 5: 사용자
팀원 초대: 3: 사용자
section 정착
일주일 사용: 4: 사용자
유료 전환 검토: 3: 사용자
유료 결제: 4: 사용자
점수 의미: 1(매우 불만족) ~ 5(매우 만족). 점수가 낮은 단계가 개선 포인트입니다.
여정 맵 요청 프롬프트
다음 서비스의 사용자 여정 맵을 Mermaid.js journey 형식으로 만들어주세요.
서비스: 음식 배달 앱
사용자: 직장인 (점심 주문)
단계:
1. 앱 실행 → 2. 메뉴 탐색 → 3. 음식 선택 → 4. 주문/결제
→ 5. 배달 대기 → 6. 음식 수령 → 7. 리뷰 작성
각 단계의 만족도를 1~5로 평가하고,
만족도가 낮은 단계에 대한 개선 아이디어도 함께 제안해주세요.3.5 AI 도구별 도식화 비교
| 도구 | 방식 | 장점 | 단점 | 추천 용도 |
|---|---|---|---|---|
| Mermaid.js + AI | 코드 기반 생성 | 무료, 버전관리 가능, 수정 용이 | 복잡한 디자인 한계 | 플로우차트, ER, 시퀀스 |
| ChatGPT + Draw.io | XML 코드 생성 | 세밀한 레이아웃 가능 | 코드가 복잡 | 복잡한 아키텍처 |
| Claude + SVG | SVG 코드 직접 생성 | 완전한 커스텀 가능 | 수정 어려움 | 인포그래픽, 커스텀 도식 |
| Whimsical AI | 자연어 → 다이어그램 | 직관적, 예쁜 디자인 | 유료, 제한적 커스텀 | 프레젠테이션용 도식 |
| Excalidraw + AI | 손그림 스타일 | 친근한 느낌, 협업 가능 | 정형화된 다이어그램 부적합 | 화이트보드, 스케치 |
실습 과제
여러분의 프로젝트에서 다음 3가지 다이어그램을 AI를 활용해 만들어보세요:
- 핵심 사용자 플로우 (flowchart)
- 데이터 구조 (erDiagram)
- 사용자 여정 맵 (journey)
- 주요 API 상호작용 (sequenceDiagram)
3.6 시퀀스 다이어그램 (Sequence Diagram)
시퀀스 다이어그램이란? 시스템 구성요소 간의 상호작용을 시간 순서대로 표현하는 다이어그램입니다. API 호출 흐름, 사용자-시스템 상호작용을 개발팀에게 설명할 때 매우 유용합니다.
기본 시퀀스 다이어그램 문법
sequenceDiagram
participant A as 사용자
participant B as 프론트엔드
participant C as API 서버
participant D as 데이터베이스
A->>B: 로그인 버튼 클릭
B->>C: POST /api/login
C->>D: 사용자 조회
D-->>C: 사용자 정보
C-->>B: JWT 토큰 반환
B-->>A: 대시보드 이동실제 렌더링 결과
sequenceDiagram
participant U as 사용자
participant F as 프론트엔드
participant A as API 서버
participant D as 데이터베이스
U->>F: 로그인 버튼 클릭
F->>A: POST /api/login
A->>D: 사용자 조회
D-->>A: 사용자 정보
alt 인증 성공
A-->>F: JWT 토큰 반환
F-->>U: 대시보드 이동
else 인증 실패
A-->>F: 401 에러
F-->>U: 에러 메시지 표시
end
PM 업무 활용 예시 — 결제 프로세스
sequenceDiagram
participant C as 고객
participant W as 웹사이트
participant P as 결제 서버
participant PG as PG사(토스/카카오)
participant S as 재고 시스템
C->>W: 주문하기 클릭
W->>S: 재고 확인 요청
S-->>W: 재고 있음
W->>P: 결제 요청 생성
P->>PG: 결제 승인 요청
PG-->>C: 결제 인증 화면
C->>PG: 결제 인증 완료
PG-->>P: 결제 승인 완료
P->>S: 재고 차감
P-->>W: 결제 완료 응답
W-->>C: 주문 완료 페이지
시퀀스 다이어그램 표기법
| 기호 | 의미 | 용도 |
|---|---|---|
->> |
실선 화살표 (요청) | 동기 요청, API 호출 |
-->> |
점선 화살표 (응답) | 응답 반환 |
alt / else |
조건 분기 | 성공/실패 분기 처리 |
loop |
반복 | 재시도, 폴링 등 |
Note over |
메모 | 설명 추가 |
AI에게 시퀀스 다이어그램 요청하는 프롬프트
다음 프로세스를 Mermaid.js 시퀀스 다이어그램으로 만들어주세요.
프로세스: 소셜 로그인 (Google OAuth) 흐름
참여자: 사용자, 프론트엔드, 백엔드 API, Google OAuth, 데이터베이스
단계:
1. 사용자가 "Google로 로그인" 클릭
2. 프론트엔드가 Google OAuth 페이지로 리다이렉트
3. 사용자가 Google 계정으로 인증
4. Google이 인증 코드를 백엔드로 전달
5. 백엔드가 Google에 액세스 토큰 요청
6. Google이 사용자 정보 반환
7. 백엔드가 DB에서 사용자 확인 (없으면 생성)
8. JWT 토큰 발급 후 프론트엔드에 반환
sequenceDiagram 형식으로 작성하고,
성공/실패 분기를 alt/else로 표현해주세요.