우선 머메이드에 대한 소개를 해야할 것 같다
머메이드는 마크다운 쓰다보면 한번쯤 보게 되는
마크다운 코드블럭 기반의 다이어그램 제작 툴이다
그 중에서도 프로젝트의 프로세스 시각화에 도움을 줄 수 있다고 판단되는 시퀀스 다이어그램을 가져왔다
이걸 포스팅하게 된 이유는
일단 이 머메이드가 ```mermaid 라는 코드블럭 주석을 통해서
노션이나 옵시디언 git md 파일 등에서 호환 되고 ( velog는 안된다 )
같은 문법을 사용하니 당연히 마이그레이션도 수월하고
평면적이고 절차적인 문법으로 표현할 수 없는 것을 다이어그램으로 표현할 수 있기 때문에
언젠가 한번쯤은 사용하게 될 도구라고 할 수 있겠다..
만드는 것보다 쓰는 게 더 빠를거니까!
나는 빨리 말하면 입력되고 특정 트리거 단어에 대해 행동을 정할 수 있는 마이크 같은게 빨리 나왔으면 좋겠다 , (타이핑도 귀찮을 때가 있다..) 영어는 되는데 왜 한글은..
네이버 클로바 무료배포 기원!
공식 사이트
일단 공식 사이트의 문서를 보겠음
시퀀스 다이어그램
아래에서는 코드블럭은 작성하고 이미지는 이미지만 보여질 예정임
우선 머메이드에 대한 소개를 해야할 것 같다
머메이드는 마크다운 쓰다보면 한번쯤 보게 되는
마크다운 코드블럭 기반의 다이어그램 제작 툴이다
그 중에서도 프로젝트 시각화에 도움을 줄 수 있다고 판단되는 시퀀스 다이어그램을 가져왔다
이걸 포스팅하게 된 이유는
일단 이 머메이드가 ```mermaid 라는 코드블럭 주석을 통해서
노션이나 옵시디언 git md 파일 등에서 호환 되고 ( velog는 안된다 )
같은 문법을 사용하니 당연히 마이그레이션도 수월하고
평면적이고 절차적인 문법으로 표현할 수 없는 것을 다이어그램으로 표현할 수 있기 때문에
언젠가 한번쯤은 사용하게 될 도구라고 할 수 있겠다..
만드는 것보다 쓰는 게 더 빠를거니까!
나는 빨리 말하면 입력되고 특정 트리거 단어에 대해 행동을 정할 수 있는 마이크 같은게 빨리 나왔으면 좋겠다 , (타이핑도 귀찮을 때가 있다..) 영어는 되는데 왜 한글은.. 네이버 클로바 무료배포 기원!
기본
일단 공식 사이트의 문서를 보겠음
sequenceDiagram
participant Alice
participant John
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
메세지 유형 A~B : text
메시지는 실선 또는 점선으로 표시될 수 있습니다.
[Actor][Arrow][Actor]:Message text
Alice->John: 선 >화살표 유형
sequenceDiagram
Alice->John: 선 >
Alice-->John: 점선 ->
Alice->>John: 삼각형 >>
Alice-->>John: 삼각형 ->>
Alice-xJohn: 선 x
Alice--xJohn: 점선 -x
Alice-)John: 뾰족한 삼각형 )
Alice--)John: 뾰족한 점선 삼각형 )
Alice->>Alice: 돌아오기 예제
화살표 뜻 ( 컨벤션?)
참조
[UML] 시퀀스 다이어그램 (Sequence Diagram) :: 불곰
시퀀스 다이어그램 [Sequence Diagram] :: Thinking Out Loud - J.mini
정리
종류는 많지만 쓰는 건 정해져있다고 한다
내가 이해하는 그림은 아래와 같다
메세지는 요청 ( request ) 과 실행 등을 포함한 개념으로 읽혀지지만…
마땅한 단어를 모르겠어서 요청으로 적었음 …
sequenceDiagram
Alice->>John: 동기 요청 Sync request
John-->>Alice: 동기 반환 Sync responese ( Return )
Alice-)John: 비동기 요청 Async request
John--)Alice: 비동기 반환 Async responese ( Return )
Alice->>Alice: 자체 메세지
엑터 스타일, 명칭 변경 participant , actor
우선 공식적으로 Alice , John 등의 세로 줄은 각 [Actor]의 영역이다
세로 줄에 해당하는 엑터들을
sequenceDiagram
participant Alice
actor J as John
actor softer
J->Alice : text
엑터 별 스택 활성화 하기 activate , deactivate
우선 공식적으로 Alice , John 은 [Actor] 라고 부른다
화살표 옆에 추가로 + or - 를 붙여서 activate, deactivate 를 대체할 수 있으나
[arrow][activate] 방식은 한개만 사용된다
만약 한번에 여러 스택을 활성화 하고 , 여러 스택을 빼고 싶다면
메세지 바로 하단에 activate or deactivate [Actor] 를 붙여서
추가로 스택 조작을 할 수 있다
sequenceDiagram
Alice->>+John: 1번째: 냠
activate John
Alice->>John: 2번째 : 고냥
activate John
Alice->>+John: 3번째
Alice->>+John: 4번째
John-->>-Alice: 마이너스 1번째 : 냠
John-->>-Alice: 마이너스 2번째 : 고냥
deactivate John
deactivate John
John-->>Alice: 마이너스 3번째
John-->>-Alice: 마이너스 4번째
선의 출발점이 조금 애매해서 , 가독성이 떨어지긴 하지만
일단 먼저 선언된 것이 가장 마지막에 닫힌다 , 후입선출 , LIFO 방식 으로 되어 있다
동작의 이름을 지정하여 활성화와 비활성화에 태깅역할을 수행시키는 것도
행동을 추정하는 좋은 방법이 될 것 같다
메모 하기 Note
동작원리는 엑터를 선언하거나 메세지를 선언하거나 한 이후에 작성함으로써 동작한다
크게 두가지 동작을 하는데
선택 엑터의 왼쪽 또는 오른쪽에 메모를 생성하거나
엑더들을 감싸는 메모를 생성한다
sequenceDiagram
participant test
participant John
participant Alice
Note left of test: 엑터 줄의 왼쪽
Note right of Alice: 엑터 줄의 오른쪽
Alice->John: Hello John, how are you?
Note over Alice,test : 지정된 엑터를 감싸는
루프 만들기
sequenceDiagram
Alice->>John: 1분마다 신호를 줘! , 10분동안!
loop Every minute
John-->>Alice: ping!
end
John-->>Alice: 10분 지남!
특정 시퀀스 그루핑 ~ end
선택지와 옵션을 표시하는 alt ~ else , opt
sequenceDiagram
Alice->>Bob: 선택지 질문
alt 1번을 선택한다
Bob->>Alice: 이긴다
else 2번을 선택한다
Bob->>Alice: 진다
end
opt 그 외 행동을 했다
Bob->>Alice: 규정 위반으로 탈락
end
선택지들을 제공한다 alt 는 기본 선택지고 그 이외의 것을 제공하는 것임
opt 가 없어도 상관 없다
솔직히 직관적이진 않은 것 같다
병렬의 표시
시퀀스 다이어그램은 기본적으로 순차적인 흐름을 표시하는 목적으로 시퀀스 다이어그램을 쓴다는 것을
알 수 있게 해주는 기능이다
일반적인 사용
sequenceDiagram
par 병렬 작업 이름 1 : Alice to Bob
Alice->>Bob: Hello guys!
Alice->>Bob: 다른 작업!
and 병렬 작업 이름 2 : Alice to John
Alice->>John: Hello guys!
end
Bob-->>Alice: Bob 의 반응
John-->>Alice: John 의 반응
par 안의 동작은 명시적으로 동시 수행되었다 라는 의미를 내포하고 있다
안에 여러 메세지를 넣을 수 있다
sequenceDiagram
par Alice to Bob
Alice->>Bob: Go help John
and Alice to John
Alice->>John: I want this done today
par John to Charlie
John->>Charlie: Can we do this today?
and John to Diana
John->>Diana: Can you help us today?
end
end
and 되기전에 또 다른 par 가 등장하면서 par를 중첩시켰다
여기서 관찰 할 수 있는 것은
들여쓰기는 그저 시각화를 도와줄 뿐이라는 것이다 들여쓰기를 없애도 동작에는 차이가 없다
하지만 들여쓰기를 해주는게 정신건강에 이로울것이라 생각함
색상 부여
감싸고자하는 영역의 사각형 색상을 선택하는 기능을 가지고 있다
구획 나누기 좋을듯
sequenceDiagram
participant Alice
participant John
rect rgb(191, 223, 255)
note right of Alice: Alice calls John.
Alice->>+John: Hello John, how are you?
rect rgb(200, 150, 255)
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
end
John-->>-Alice: I feel great!
end
Alice ->>+ John: Did you want to go to the game tonight?
John -->>- Alice: Yeah! See you there.
머메이드 안에 코멘트 남기기
sequenceDiagram
Alice->>John: 안에 주석 있음
%% 나 주석 응애
John-->>Alice: 안보여!
번호 넣기
암시적으로 순서대로긴 한데 보기 힘들 수 있다
그래서 넘버링을 부여할 수 있는 기능이 있음 ㄷㄷ
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!
그 외
안에 특수문자 이스케이프로 넣기
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
엑터에 링크 넣기
velog 와 github에선 동작하지 않는다
sequenceDiagram
participant Alice
participant John
link Alice: Dashboard @ https://dashboard.contoso.com/alice
link Alice: Wiki @ https://wiki.contoso.com/alice
link John: Dashboard @ https://dashboard.contoso.com/john
link John: Wiki @ https://wiki.contoso.com/john
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
동작하지 않는 표시
중요 지역 표시 critical
공식 예제 코드임에도 동작하지 않는다
sequenceDiagram
critical Establish a connection to the DB
Service-->DB: connect
end
중단점 , break 표시
sequenceDiagram
Consumer-->API: Book something
API-->BookingService: Start booking process
break when the booking process fails
API-->Consumer: show failure
end
API-->BillingService: Start billing process
작성하면서 정리한 동작 원리
일단 위에서 아래로 읽는게 기본이고
이건 엑터의 위치도 그렇다
먼저 생성될 수록 왼쪽에 있고 이 위치는 변하지 않는다
그래서 Note over 도 딱 양 끝 두 개의 값만으로 note over를 생성한다
각각의 기능은 각각의 스택으로 동작한다
대부분 한줄로 끝나지만 loop 나 alt 같이 end 로 끝나는 조건이 만족할 때 스택이 닫힌다
엑터는 대소문자를 구분하기 때문에 잘 써줘야한다 ( 애초에 티가 제대로 난다 )
쓰게 된 이유...
기능을 제대로 이해해야 문서화할 수 있다
그리고 문서화할 수 있는 코드가 읽기 좋은 코드고 , 이해했다고 말할 수 있는 코드라 할 수 있을 것 같다
무작정 만드는 개인 프로젝트, 팀 프로젝트를 하면서 굉장한 스파게티를 만들어보고 느낀 것은 .. 아 .. 무지성으로 하면 답이 없었다
어떤 건 요소를 함수로 보내서 요소에 내장된 메서드들을 써서 요소를 제어하고
어떤 건 특정 값을 보내면 요소를 반환 받아서 그걸로 요소를 제어할 수 있게한다
똑같은 엘리먼트를 만들 때 다양한 함수들을 쓰고 다양한 동작을 하니 그 코드덩어리를 다룰 수 있는 것은 기문진법 코딩을 한 닌자 밖에 없었다...
기획만 보고 기능만 되게 만들면 유지보수가.. 수정도 협업도 안된다
코드를 읽을 수 있어야하고, 이해할 수 있어야하고 예측할 수 있어야한다
예측은 프로젝트 내에서의 코드 스타일의 일관성을 통해서도 예측하게 될 수 있는 점이 있다
대부분의 개발자가 그러한 규칙을 라이브러리, 웹 프레임 워크를 통해서 지키곤 한다
( 전자정부 웹 프레임워크의 취지 역시도.. 그러하다 )
문서화를 쉽게 하기위해 각 함수들의 동작을 단순하게하거나 , 단일 책임의 원칙을 지키게 할 수 있을거란 기대가 된다
그나마 가장 간단하고 직관적이게 쓸 수 있는 다이어그램
마우스를 쓰지 않아도 되고 , 설정이 필요하지도 않아도 된다
그리고 자동화 툴은 이미 있는 것을 있는 그대로 보여주지만
직접 쓰는 것은 없는 것을 설계할 때 사용할 수 있다
아주 깊은 것을 표현할 때 제약이 있을 수 있지만
actor 를 함수 단위로 쓰고
자동화 툴
다이어그램을 그리는 목적에는 ... 본인이 작성하는 코드를 더 잘 인지하는 것에 의의를 두고 싶다
하지만 자동화가 좋다면 ...
일단 C++ 에서는
visual studio 클래스 다이어그램
일단 C++의 visual studio 에 노드 그래프 방식으로 만들어주는 것 같다
C++ 관련 포스팅
Java
인텔리제이 내장 기능
인텔리제이에 클래스 다이어그램 생성기와 시퀀스 다이어그램 생성기가 있다고 함
잘 봤습니다~! 감사합니다!