Mermaid란?
Mermaid는 텍스트로 다이어그램을 그릴 수 있는 도구입니다. 코드로 작성하므로 Git에서 버전 관리가 가능하고, GitHub에서 자동으로 렌더링됩니다.
기본 문법
클래스 다이어그램 시작
classDiagram
Plain Text
복사
모든 클래스 다이어그램은 이 선언으로 시작합니다.
클래스 정의
기본 클래스
classDiagram
class Animal {
String name
int age
}
Mermaid
복사
classDiagram
class Animal {
String name
int age
}
Plain Text
복사
메소드와 필드 구분
classDiagram
class Animal {
-String name
-int age
+getName() String
+setName(String) void
}
Mermaid
복사
classDiagram
class Animal {
-String name
-int age
+getName() String
+setName(String) void
}
Plain Text
복사
접근 제어자
•
+ : public
•
: private
•
# : protected
•
~ : package
클래스 타입 표시
추상 클래스
classDiagram
class Animal {
<<abstract>>
-String name
+makeSound()* String
}
Mermaid
복사
classDiagram
class Animal {
<<abstract>>
-String name
+makeSound()* String
}
Plain Text
복사
인터페이스
classDiagram
class Flyable {
<<interface>>
+fly() void
}
Mermaid
복사
classDiagram
class Flyable {
<<interface>>
+fly() void
}
Plain Text
복사
열거형
classDiagram
class Food {
<<enumeration>>
MEAT
FISH
PLANTS
}
Mermaid
복사
classDiagram
class Food {
<<enumeration>>
MEAT
FISH
PLANTS
}
Plain Text
복사
관계 표현
상속 (Inheritance)
classDiagram
Animal <|-- Dog
Mermaid
복사
classDiagram
Animal <|-- Dog
Plain Text
복사
Dog가 Animal을 상속
인터페이스 구현 (Implementation)
classDiagram
Eagle ..|> Flyable
Mermaid
복사
classDiagram
Eagle ..|> Flyable
Plain Text
복사
Eagle이 Flyable 인터페이스를 구현
구성 (Composition)
classDiagram
Zoo *-- Animal
Mermaid
복사
classDiagram
Zoo *-- Animal
Plain Text
복사
Zoo가 Animal을 포함 (강한 관계)
집합 (Aggregation)
classDiagram
Zoo o-- Animal
Mermaid
복사
classDiagram
Zoo o-- Animal
Plain Text
복사
Zoo가 Animal을 포함 (약한 관계)
연관 (Association)
classDiagram
ZooKeeper --> Animal
Mermaid
복사
classDiagram
ZooKeeper --> Animal
Plain Text
복사
단방향 연관
classDiagram
ZooKeeper <--> Animal
Mermaid
복사
classDiagram
ZooKeeper <--> Animal
Plain Text
복사
양방향 연관
의존 (Dependency)
classDiagram
ZooManager ..> Zoo
Mermaid
복사
classDiagram
ZooManager ..> Zoo
Plain Text
복사
ZooManager가 Zoo를 사용
다중성 표현
classDiagram
Zoo "1" --> "*" Animal : contains
ZooKeeper "1" --> "1..*" Animal : manages
Mermaid
복사
classDiagram
Zoo "1" --> "*" Animal : contains
ZooKeeper "1" --> "1..*" Animal : manages
Plain Text
복사
•
1 : 정확히 1개
•
: 0개 이상
•
1..* : 1개 이상
•
0..1 : 0개 또는 1개
라벨 추가
classDiagram
Zoo --> Animal : contains
ZooKeeper --> Animal : cares for
Mermaid
복사
classDiagram
Zoo --> Animal : contains
ZooKeeper --> Animal : cares for
Plain Text
복사
실습 예제
간단한 예제
classDiagram
class Animal {
-String name
-int age
+Animal(String, int)
+getName() String
+makeSound() String
}
class Dog {
+Dog(String, int)
+makeSound() String
}
Animal <|-- Dog
Mermaid
복사
복잡한 예제
classDiagram
class Animal {
<<abstract>>
-String name
-int age
+Animal(String, int)
+getName() String
+makeSound()* String
}
class Mammal {
<<abstract>>
-int bodyTemp
+Mammal(String, int)
}
class Dog {
+Dog(String, int)
+makeSound() String
+bark() void
}
class Flyable {
<<interface>>
+fly() void
}
class Bird {
<<abstract>>
-int wingSpan
+Bird(String, int)
}
class Eagle {
+Eagle(String, int)
+makeSound() String
+fly() void
}
Animal <|-- Mammal
Animal <|-- Bird
Mammal <|-- Dog
Bird <|-- Eagle
Eagle ..|> Flyable
Mermaid
복사
작성 도구
GitHub에서 사용
README.md 파일에 다음과 같이 작성:
```mermaid
classDiagram
class Animal {
-String name
+getName() String
}
```
Plain Text
복사
온라인 에디터
•
Mermaid Live Editor : 실시간 미리보기
•
VS Code의 Mermaid 확장프로그램
로컬 도구
•
VS Code + Mermaid 확장프로그램
•
IntelliJ IDEA + Mermaid 플러그인
작성 팁
1.
간단하게 시작하기
•
먼저 핵심 클래스들만 그리기
•
세부 메소드는 나중에 추가
2.
레이아웃 고려
•
상속 관계는 위에서 아래로
•
연관 관계는 좌우로 배치
3.
가독성 우선
•
너무 많은 정보를 한 번에 넣지 않기
•
필요에 따라 여러 다이어그램으로 분할
4.
일관성 유지
•
같은 스타일의 표기법 사용
•
명명 규칙 통일
자주 사용하는 패턴
기본 상속 구조
classDiagram
Parent <|-- Child1
Parent <|-- Child2
Plain Text
복사
인터페이스 구현
classDiagram
Interface <|.. Implementation
Plain Text
복사
컴포지션 패턴
classDiagram
Container "1" *-- "*" Component
Plain Text
복사