플로우 다이어그램, 시퀀스 다이어그램 그리기 - mermaid

특허 출원 업무 및 자사 제품 초기 설계 단계 업무를 받고 차트를 그려야 하는 상황이 되었다.

 

플로우 다이어그램의 경우 그냥 만들면 정신이 없기 때문에 깔끔한 툴을 쓰는게 좋은데 코드로 작성하면 알아서 표를 그려주는 툴이 있어서 이를 이용하여 산출물을 작성하기로 하였다.

플로우다이어그램/ 플로우 차트 그리기

https://mermaid-js.github.io/mermaid-live-editor/edit/#pako:eNpVkE1qw0AMha8itEohvoAXhcZOsgmk0Ow8WQiPnBmS-WEsU4Ltu3ccU2i1kt77nhAasQ2ascRbomjgUisPuT6ayiTbi6P-CkXxPh1ZwAXPzwl2m2OA3oQYrb-9rfxugaAaTwvGIMb6-7xa1St_9jxB3ZwoSojXv87lO0ywb-ynyev_OyZxTh2ajsqOipYSVJReCG7RcXJkdT59XBSFYtixwjK3mjsaHqJQ-TmjQ9QkvNdWQsJS0sBbpEHC19O3v_PK1JbyI9wqzj8k-lxH

Online FlowChart & Diagrams Editor - Mermaid Live Editor

 

일단 검색하니 예제가 하나 나온다. 위의 링크를 보면 확인할 수 있다.

각 엔티티의 경우 알파벳으로 정의하고 문자를 쓰면 되는것 같다.

 

사용법도 간단하다.

 

1. 플로우 차트

graph TD
    A[testing] -->|Get money 1| B[Go shopping]
    B --> C{Let me think} 
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

일단 --> | |  이렇게하면 화살표 안에 글씨가 들어가고

 [ 글자1 ] 이렇게 하면 글자1이 포함되어 사각형 박스가 나오게 된다.

{ 글자1 } 이렇게 하면 삼각형이 나오게 되고

(글자1) 이렇게 하면 모서리가 둥근 원형이 나온다.

 

그리고 위에서부터 엔티티는 순서대로 A,B,C로 두면 된다.

 

2. 시퀀스 다이어그램

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

엔티티의 경우 화살표 전후에 이름을 적어주면 되며

실선의 경우는 -> 이며, 점선의 경우는 -->이다.

또한 한번에 진행되는 실행을 표시하기 위해서 요청에는 +를 넣고 해당 부분에 대한 응답의 경우에는 -를 넣으면 된다.

만약 같은 인스턴스 내부에서 함수가 실행되는 경우는 좌우 인스턴스에 같은 값을 넣어주면 된다.

그리고 : 에는 메세지 내용을 쓰면 된다.

https://mermaid-js.github.io/mermaid/#/

mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

더 깔끔한 산출물은 위의 링크에서 확인할 수 있다.

 

일단 같은 실행에서 다른 응답에 따라 다른 값이 나올 경우도 있었는데

 

1. if / else 를 표현하고 싶은 경우

이 경우 Alt 를 쓰면된다.

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end

2. 병렬 작업을 표현하고 싶은 경우

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Hello guys!
    and Alice to John
        Alice->>John: Hello guys!
    end
    Bob-->>Alice: Hi Alice!
    John-->>Alice: Hi Alice!

 nested 병렬도 가능하다.

시퀀스에 숫자를 붙이는 방법 - auto number

sequenceDiagram
    autonumber
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
Alice

actor 그리는 법

sequenceDiagram
    actor Alice
    actor Bob
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice