레슨 3 / 8·20분
다양한 다이어그램
클래스 다이어그램
classDiagram은 객체지향 설계에서 클래스 간의 관계를 나타냅니다. 속성(attribute)과 메서드(method)를 정의하고, 상속/구현/연관 등 다양한 관계를 표현할 수 있습니다.
mermaid
classDiagram
class Animal {
+String name
+int age
+makeSound() void
}
class Dog {
+String breed
+fetch() void
}
class Cat {
+bool isIndoor
+purr() void
}
Animal <|-- Dog : 상속
Animal <|-- Cat : 상속
Dog "1" --> "*" Toy : 소유ER 다이어그램
erDiagram은 데이터베이스의 엔티티와 관계를 설계할 때 사용합니다. 각 엔티티의 속성과 카디널리티(1:1, 1:N, M:N)를 명확하게 표현합니다.
mermaid
erDiagram
USER {
int id PK
string name
string email
}
ORDER {
int id PK
date created_at
float total_price
}
PRODUCT {
int id PK
string title
float price
}
USER ||--o{ ORDER : "주문한다"
ORDER }o--|| PRODUCT : "포함한다"간트 차트
gantt 차트는 프로젝트 일정을 타임라인 형태로 시각화합니다. section으로 단계를 구분하고 각 task의 시작일과 기간을 지정합니다.
mermaid
gantt
title 프로젝트 일정
dateFormat YYYY-MM-DD
section 기획
요구사항 분석 :a1, 2024-01-01, 7d
화면 설계 :a2, after a1, 5d
section 개발
프론트엔드 개발 :b1, after a2, 14d
백엔드 개발 :b2, after a2, 14d
section 테스트
통합 테스트 :c1, after b1, 7d
배포 :milestone, after c1, 0d파이 차트
mermaid
pie title 기술 스택 사용 비율
"JavaScript" : 40
"TypeScript" : 30
"Python" : 20
"기타" : 10💡
Mermaid는 GitHub, GitLab, Notion 등 다양한 플랫폼에서 기본 지원됩니다. Markdown 코드 블록 언어를 mermaid로 지정하면 자동으로 렌더링됩니다.