깃허브 머메이드 - 클래스 다이어그램 그리기 (Draw Class Diagram using GitHub Mermaid)

깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기)

 

Git / GitHub 전체 링크

 

참고

- https://mermaid.js.org/syntax/classDiagram.html

- 클래스 다이어그램

 

깃허브 머메이드를 이용해 클래스 다이어그램을 그려보자.

 

비주얼 스튜디오 코드에서 mermaid를 검색하면 Preview 플러그인을 다운 받을 수 있다.

 

플러그인을 설치하면 아래와 같이 클래스 다이어그램을 미리볼 수 있다.

---

클래스 다이어그램 화살표 

 

머메이드에서 아래 코드를 작성해보자.

```mermaid
---
title: Class Diagram example
---
  classDiagram
    classA <|-- classB
```

 

클래스의 관계는 다이어그램에서 아래와 같이 화살표로 정의된다. (레퍼런스마다 모양이 조금 다를 수 있다.)

 

위의 화살표 모양은 Type에 정의되어 있다.

Type	Description
--	Association : Link (Solid)
..	Link (Dashed)
-->	Navigable Association (A에는 B가 있다. A has B)
<|--	Inheritance / Generalization (상속, 확장, 일반화)
..|>	Realization / Implementation (실체화, 인터페이스 구현)
..>	Dependency (의존)
o--	Aggregation (집합)
*--	Composition (합성)

 

깃허브의 Markdown에서 화살표 모양을 직접 확인해 보자.

: description 을 추가하면 화살표 사이에 설명문이 추가된다.

```mermaid
  classDiagram
    classA -- classB : Association
    classC .. classD : Link(Dashed)
    classE --> classF : Navigable_Association
    Parent <|-- Child : Inheritance
    classG ..|> classH : Realization
    classI ..> classJ : Dependency
    classK --o classL : Aggregation
    classM --* classN : Composition
```

 

참고로 양 옆도 가능하다.

```mermaid
  classDiagram
    classA <|--* classB : 2 way
```

 

그리고 관계의 다중성도 표현할 수 있다.

```mermaid
  classDiagram
    Customer "1" --> "*" Ticket
    Student "1" --> "1..*" Course
    Galaxy --> "many" Star : Contains
```

---

클래스 만들기

 

아래 코드를 실행해 보자.

```mermaid
  classDiagram 
    %% Animal Class    
    class Animal { 
      String name
      +Integer Age
      -AnymalType animalType
      List~Int~ messages
      +Animal(String name) 
      -String getName() 
      -String staticGetName() $
      -String abstractGetName() *       
      #void setName(String name)
      ~void makeSound()
    }

    class Dog {
      +Dog(String name)
      +void makeSound()
    }
    class `My Cat` {
      +Cat(String name)
      +void makeSound()
    }
     
    %% 추상화 클래스 표시
    <<Abstract>> Animal

    %% Dog 클래스를 강아지로 라벨링
    class Dog["강아지"]    

    %% Aniaml 클래스에 메모 추가
    note for Animal "This is\nAnimal Note."

    %% 상속 관계 표시
    Dog --|> Animal
    `My Cat` --|> Animal
```

 

주석은 "%%"를 사용한다.

%% Animal Class

 

꺽쇠는 "~...~"를 이용한다.

List~Int~ messages

 

Static은 "$"를 끝에 붙이고 Abstract는 "*"를 붙인다. 

각각 밑줄과 기울임 효과가 생긴다.

-String staticGetName() $
-String abstractGetName() *

 

변수 타입은 아래와 같다.

 

클래스 이름에 띄어쓰기를 포함하고 싶다면 백쿼트 ` 로 덮어서 쓰면 된다.

class `My Cat`

 

"<<...>>"으로 클래스 이름 위에 추가로 표시를 할 수 있다.

%% 추상화 클래스 표시
<<Abstract>> Animal

 

클래스 이름을 라벨링하고 싶다면 "[ ]"를 이용한다.

%% Dog 클래스를 강아지로 라벨링
class Dog["강아지"]

 

메모(노트)도 추가할 수 있다.

%% Aniaml 클래스에 메모 추가
note for Animal "This is\nAnimal Note."