[Mermaid] Flowchart, Sequence Diagram , Class Diagram 그리기 예시

 

Mermaid은 텍스트 기반으로 그래프 및 다이어그램을 그릴 수 있는 마크업(Markup) 언어입니다. 다양한 형태의 그래프 및 다이어그램을 간단한 텍스트로 표현할 수 있어서 문서 작성이나 프로젝트 문서화에 유용합니다.

(참고: Markdown은 마크업 언어의 일종으로, 특히 가독성이 높고 간단한 문서 작성을 목적으로 합니다.)

Mermaid는 브라우저에서 렌더링되기 때문에 Markdown 문서나 HTML 페이지에서 사용할 수 있습니다.

그리고 Notion 에서도 mermaid 차트들을 그릴 수 있습니다.

1. Flowchart (플로우 차트)

• 플로우 차트는 작업이나 프로세스의 흐름을 나타냅니다.
• 각 단계는 상자로 표시되며, 화살표는 작업의 흐름을 나타냅니다.
• 시작점과 끝점이 명시되며, 각 단계의 작업이 어떻게 이어지는지를 시각적으로 보여줍니다.

 graph LR;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
    
    
flowchart TD
    A[노출] --> B;
    B[유저,\n 어뷰징 검증] --> C;
    C{확인} -->|Yes| E;
    C -->|No| G;
    E[안드로이드 Proxy 처리] --> G;
    G[(DB)] --> I;
    I[응답];

 

각각 다양한 노드와 선으로 구성된 flow 차트를 그립니다. 처음 flow chart 선언시 flow의 방향을 설정할 수 있습니다.

• TB(= TD) : 위에서 아래로
• BT : 아래에서 위로
• RL : 오른쪽에서 왼쪽으로
• LR : 왼쪽에서 오른쪽으로

2. Sequence Diagram (시퀀스 다이어그램)

• 시퀀스 다이어그램은 객체 간 상호 작용을 시간순으로 표현합니다.
• 시간 흐름에 따라 객체 간의 메시지 교환을 시각화합니다.
• 객체는 세로로 배치되며, 메시지는 수평으로 그려집니다.

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
    
    Bob-->>Alice: Checking with John...
    Alice->>John: Yes... John, how are you?

3. Class Diagram (클래스 다이어그램)

• 클래스 다이어그램은 시스템 내의 클래스 및 그들 간의 관계를 표현합니다.
• 클래스, 속성, 메서드, 클래스 간의 상속 및 연관성을 시각적으로 나타냅니다.

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }