🎨 Mermaid 다이어그램

클릭하고, 수정하고, 배우는 인터랙티브 가이드

Created by @루쿠쿠 이은재 Tony

0 Mermaid가 뭐예요?

Mermaid는 텍스트로 다이어그램을 그리는 도구예요!

💡 이런 거예요:

이렇게 쓰면 ↓

graph LR
    출발 --> 도착

↓ 이렇게 보여요!

graph LR 출발 --> 도착

✨ 뭘 할 수 있나요?

🏗️
시스템 아키텍처

시스템 구조도

📊
플로우차트

프로세스 흐름도

🗂️
조직도

팀 구조 표현

🗄️
데이터베이스

ER 다이어그램

📅
타임라인

일정 계획

🎯 왜 좋아요?

  • 쉬워요: 코드 3줄이면 다이어그램 완성!
  • 빨라요: 마우스로 그리는 것보다 훨씬 빠름
  • 수정 간편: 텍스트만 바꾸면 끝
  • 버전 관리: Git으로 변경 이력 추적 가능
  • 무료: 완전 무료! 오픈소스

🚀 누가 사용하나요?

개발자, 기획자, PM, 디자이너, 학생...
문서에 그림이 필요한 모든 사람이 사용해요!

GitHub, Notion, ClickUp, 많은 위키에서도 공식 지원합니다!

🎉 준비되셨나요? 지금부터 5분만 따라하면 여러분도 Mermaid 전문가가 될 수 있어요!

1 가장 간단한 시작

박스 2개를 화살표로 연결하는 게 전부예요! 

graph LR
    A --> B
graph LR A --> B
코드를 수정한 후 아래 버튼을 눌러주세요!
여기에 그림이 나타납니다
💡 팁: graph LR은 "왼쪽에서 오른쪽으로"란 뜻이에요. A와 B를 다른 글자로 바꿔보세요!

2 박스에 이름 붙이기

대괄호 [ ] 안에 원하는 글자를 쓰면 돼요. 

graph LR
    A[시작] --> B[끝]
graph LR A[시작] --> B[끝]
코드를 수정한 후 아래 버튼을 눌러주세요!
여기에 그림이 나타납니다
💡 팁: [아침] → [점심] → [저녁] 이렇게 바꿔보세요!

3 여러 개 연결하기

화살표 -->를 계속 이어서 쓰면 됩니다. 

graph LR
    A[일어남] --> B[씻기]
    B --> C[밥먹기]
    C --> D[출근]
graph LR A[일어남] --> B[씻기] B --> C[밥먹기] C --> D[출근]
코드를 수정한 후 아래 버튼을 눌러주세요!
여기에 그림이 나타납니다
💡 팁: 박스를 5개, 6개로 늘려보세요!

4 위에서 아래로 그리기

graph TD로 바꾸면 세로로 그려져요. (Top → Down) 

graph TD
    A[집 나가기] --> B[버스 타기]
    B --> C[회사 도착]
graph TD A[집 나가기] --> B[버스 타기] B --> C[회사 도착]
코드를 수정한 후 아래 버튼을 눌러주세요!
여기에 그림이 나타납니다
💡 팁: TD를 LR로 바꾸면 다시 가로로!

5 선택 만들기 (분기)

하나에서 여러 개로 갈라지게 할 수 있어요. 

graph TD
    A[배고프다] --> B[뭐 먹지?]
    B --> C[라면]
    B --> D[피자]
    B --> E[치킨]
graph TD A[배고프다] --> B[뭐 먹지?] B --> C[라면] B --> D[피자] B --> E[치킨]
코드를 수정한 후 아래 버튼을 눌러주세요!
여기에 그림이 나타납니다
💡 팁: 선택지를 더 추가하거나 줄여보세요!

6 다이아몬드 모양 (조건)

중괄호 { }를 쓰면 다이아몬드가 돼요. 보통 질문/조건에 사용! 

graph TD
    A[비 오나?] --> B{우산 있어?}
    B --> C[집에 있어]
    B --> D[없어]
graph TD A[비 오나?] --> B{우산 있어?} B --> C[집에 있어] B --> D[없어]
코드를 수정한 후 아래 버튼을 눌러주세요!
여기에 그림이 나타납니다
💡 팁: [ ] 사각형, { } 다이아몬드!

7 화살표에 설명 붙이기

화살표에 |설명|을 추가할 수 있어요. 

graph LR
    A[집] -->|10분| B[버스 정류장]
    B -->|30분| C[회사]
graph LR A[집] -->|10분| B[버스 정류장] B -->|30분| C[회사]
코드를 수정한 후 아래 버튼을 눌러주세요!
여기에 그림이 나타납니다
💡 팁: "예", "아니오" 같은 조건을 화살표에 쓰면 좋아요!

8 둥근 박스 만들기

시작과 끝은 ([ ])로 둥글게 만들어요. 

graph LR
    A([시작]) --> B[처리중]
    B --> C([끝])
graph LR A([시작]) --> B[처리중] B --> C([끝])
코드를 수정한 후 아래 버튼을 눌러주세요!
여기에 그림이 나타납니다
💡 팁: [ ] 사각형, { } 다이아몬드, ([ ]) 둥근 박스!

9 최종 프로젝트: 편의점 가기 실전

지금까지 배운 걸 다 써서 만들어봐요! 

graph TD
    Start([편의점 가기]) --> A{뭐 살까?}
    A -->|간식| B[과자 고르기]
    A -->|음료| C[음료 고르기]
    A -->|둘 다| D[둘 다 고르기]

    B --> E[계산대]
    C --> E
    D --> E

    E --> F{결제 방법은?}
    F -->|카드| G[카드 긁기]
    F -->|현금| H[현금 내기]

    G --> End([집에 가기])
    H --> End
graph TD Start([편의점 가기]) --> A{뭐 살까?} A -->|간식| B[과자 고르기] A -->|음료| C[음료 고르기] A -->|둘 다| D[둘 다 고르기] B --> E[계산대] C --> E D --> E E --> F{결제 방법은?} F -->|카드| G[카드 긁기] F -->|현금| H[현금 내기] G --> End([집에 가기]) H --> End
코드를 수정한 후 아래 버튼을 눌러주세요!
여기에 그림이 나타납니다
🎉 축하합니다! 이제 여러분은 Mermaid 다이어그램을 만들 수 있어요!
"아침 루틴", "주말 계획", "요리 레시피" 등 뭐든지 그려보세요!

10 Claude와 함께 사용하기

직접 그리지 마세요! Claude한테 시키면 몇 초만에 완성돼요 🚀

💎 핵심 포인트

여러분이 배운 건 "읽는 법"이에요.
실제로는 Claude가 그려줘요!

📝 Claude에게 이렇게만 말하세요

예시 1: 프로세스 만들기

"회원가입 프로세스를 Mermaid 다이어그램으로 그려줘"

→ Claude가 알아서 코드 작성 + 다이어그램 생성!

예시 2: 데이터베이스 구조

"쇼핑몰 데이터베이스 ER 다이어그램을 Mermaid로 만들어줘. 고객, 주문, 상품 테이블 포함해서"

→ 테이블 관계까지 자동으로 그려줘요!

예시 3: 의사결정 트리

"고객 문의 처리 프로세스를 Mermaid 플로우차트로 만들어줘. 환불, 교환, 배송 문의 케이스 포함"

→ 모든 케이스를 알아서 분기 처리!

⚠️ 중요: Claude가 만들어줘도 꼭 직접 수정해보세요!

Claude가 코드를 만들어주면 편하지만,
직접 수정해봐야 진짜 배울 수 있어요! 💪

  • ✏️ 박스 이름을 바꿔보세요
  • 🔄 방향을 LR에서 TD로 바꿔보세요
  • ➕ 새로운 단계를 추가해보세요
  • 🎨 색상을 바꿔보세요

→ 읽기만 하면 금방 까먹어요. 손으로 직접 바꿔봐야 기억에 남아요!

🎯 더 좋은 결과를 얻는 팁

  • 구체적으로 설명: "로그인 프로세스" 보다는 "이메일 로그인, 소셜 로그인, 비밀번호 찾기 포함한 로그인 프로세스"
  • 수정도 쉬워요: "여기에 비밀번호 찾기 단계도 추가해줘" → 즉시 수정!
  • 스타일 변경: "가로 방향으로 바꿔줘" → 방향 변경!
  • 색상도 가능: "에러는 빨강색, 성공은 초록색으로 표시해줘"

⚡ 실전 작업 흐름

1️⃣ Claude한테 "○○○ 다이어그램 그려줘" 요청
2️⃣ Claude가 Mermaid 코드 작성
3️⃣ 마음에 안 들면 "여기 수정해줘" 요청
4️⃣ 완성! 코드 복사해서 사용
🚀 핵심 요약:
여러분은 Mermaid 코드를 외울 필요 없어요!
Claude한테 원하는 다이어그램 설명만 하면 끝!
이 가이드로 배운 건 Claude가 만든 결과물을 이해하고 요청하는 법이에요 💪

11 Mermaid 보는 법 & 이미지 저장하기

Claude가 만든 Mermaid 코드를 어떻게 보고, 이미지로 저장할까요?

✅ 방법 1: 온라인 에디터 (가장 쉬움!)

1️⃣ Mermaid Live Editor 접속
🔗 mermaid.live 열기

2️⃣ Claude가 준 코드를 왼쪽에 붙여넣기
→ 오른쪽에 다이어그램이 바로 나타나요!

3️⃣ 이미지로 저장하기
우측 상단 Download PNG 클릭!

💡 팁: 설치 필요 없이 바로 사용 가능! 가장 추천하는 방법이에요.

📝 방법 2: VS Code에서 보기

1️⃣ VS Code 확장 설치
확장 프로그램에서 "Markdown Preview Mermaid Support" 검색해서 설치

2️⃣ .md 파일 만들기
예: diagram.md

3️⃣ Mermaid 코드 붙여넣기

```mermaid
graph LR
    A --> B
```
4️⃣ 미리보기 열기
Cmd + Shift + V (Mac) 또는 Ctrl + Shift + V (Windows)

🖼️ 방법 3: 이미지 파일로 저장 (CLI)

개발자용 - 여러 개를 한번에 이미지로 변환

1️⃣ 설치

npm install -g @mermaid-js/mermaid-cli
2️⃣ 변환
mmdc -i diagram.md -o diagram.png
→ PNG 파일 완성!

⚠️ 참고: 이 방법은 개발자들이 자동화할 때 사용해요. 처음이라면 방법 1 추천!

📱 방법 4: Notion, GitHub에서 바로 보기

Notion
코드 블록 타입을 "Mermaid"로 선택하고 코드 붙여넣기!

GitHub
README.md나 이슈에 그냥 붙여넣으면 자동으로 렌더링!

```mermaid
graph LR
    A --> B
```

🚀 추천 작업 흐름:
1️⃣ Claude한테 "○○○ 다이어그램 그려줘"
2️⃣ Mermaid 코드 받기
3️⃣ mermaid.live 열어서 코드 붙여넣기
4️⃣ 확인하고 PNG로 다운로드!

이게 가장 쉬운 방법이에요! 👍

12 업무 적용 사례

실제 회사에서 이렇게 사용해요!

💼 기획자

  • 기능 명세서에 플로우차트 추가
  • 사용자 여정(User Journey) 시각화
  • 화면 전환 흐름도

👨‍💻 개발자

  • API 플로우 문서화
  • Git 브랜치 전략 설명
  • 데이터베이스 스키마 설계

📊 PM

  • 프로젝트 타임라인
  • 의사결정 프로세스
  • 팀 간 협업 구조

📚 실제 사용 예시

1️⃣ 기획자: 버튼 클릭했을 때 일어나는 일

"좋아요 버튼 누르면 어떻게 되나요?" 같은 질문에 이렇게 답하면 돼요!

graph LR Click[좋아요 버튼 클릭] --> Check{로그인
했나요?} Check -->|아니오| Login[로그인 화면] Check -->|예| Like[하트 빨강게 변함] Like --> Count[숫자 1 증가] style Click fill:#E3F2FD style Like fill:#FFB6C1 style Count fill:#90EE90

2️⃣ 개발자: 코드 수정하고 배포하기

신입 개발자한테 "우리 팀은 이렇게 일해요" 설명할 때 좋아요!

graph LR Code[코드 수정] --> Test[내 컴퓨터에서 테스트] Test --> Push[GitHub에 올리기] Push --> Review[팀장님 확인] Review --> Deploy[서버에 배포] style Code fill:#E3F2FD style Deploy fill:#90EE90

3️⃣ PM: 고객 문의 처리하기

"고객센터 직원은 이렇게 일하면 돼요" 매뉴얼 만들 때 유용해요!

graph TD Start([문의 접수]) --> Type{문의 유형?} Type -->|배송 문의| Ship[배송팀에 전달] Type -->|환불 요청| Refund[환불 처리] Type -->|상품 문의| Answer[답변 작성] Ship --> Done([완료]) Refund --> Done Answer --> Done style Start fill:#E3F2FD style Done fill:#90EE90
💪 시작해보세요: 오늘 작성할 문서에 Mermaid 다이어그램 하나만 추가해보세요. 동료들이 좋아할 거예요!

🎓 완료!

이제 여러분은 Mermaid 마스터예요!

배운 내용 정리:

  • ✅ 박스 모양: [ ], { }, ([ ])
  • ✅ 방향: LR (가로), TD (세로)
  • ✅ 화살표: -->, -->|설명|
  • ✅ 분기: 한 박스에서 여러 박스로
  • ✅ Claude 연동 & 이미지 저장
  • ✅ 실무 활용법

🚀 이제 여러분의 문서에 Mermaid를 적용해보세요!

복잡한 설명보다 하나의 다이어그램이 더 강력해요 💪

📚 더 알아보기

🌐 Mermaid 공식 문서
mermaid.js.org - 더 많은 다이어그램 타입과 고급 기능

💬 도움이 필요하신가요?

막히는 부분이 있거나 궁금한 점이 있다면
@루쿠쿠 이은재 Tony에게
슬랙 DM 보내주세요! 🙌

언제든지 도와드릴게요!

Happy Diagramming! 🎨✨