VSCode · PlantUML로 액티비티 다이어그램을 그립니다! 16Tips! ~바투 2 심파파가 아이들의 학비를 벌다! ~

7904 단어 활동 다이어그램 plantuml uml VSCode

소개

PLantUML의 액티비티 다이어그램은 프로그램의 흐름을 그리기 위한 것입니다.
자주 사용하는 16개의 Tips를 소개합니다!

준비

PlantUML을 사용해 보자! 라고 생각했지만, 무엇을 준비하면 좋을지 모르는 분은 아래를 클릭

VSCode와 PlantUML을 설치하고 마크 다운으로 UML을 그리면 뭔가 멋지다? Mac 버전

동영상 버전

1. 코멘트

한 줄 주석은 단일 따옴표(')를 사용합니다.
여러 줄 주석을 작성하려면/''/로 묶습니다.

' 1-1. 1行コメント
/' 
   1-2. 複数行コメント
'/

2. PlantUML 쓰기 시작

이름은 반드시 쓰자!


@startuml  [名前]
    ' 処理
@enduml

3. 시작과 종료

시작은 "start", 종료는 "stop"이라고 씁니다.

start
    ' 処理
stop

"stop"대신 "end"도 사용할 수 있습니다.

start
    ' 処理
end

4. 분기

if/else로 분기 할 수 있습니다. 분기가 많으면 elseif를 사용합니다.
마지막은 endif로 닫습니다.

if (選手) then (はい)
   :選手登録画面;
elseif (団体) then (はい)
   :団体登録画面;
elseif (大会) then (はい)
   :大会登録画面;
elseif (試合) then (はい)
   :試合登録画面;
else (何もしない)
   :特になし;
endif

분기를 수직으로 만들 수도 있습니다.

!pragma useVerticalIf on
if (選手) then (はい)
    :選手登録画面;
elseif (団体) then (はい)
    :団体登録画面;
elseif (大会) then (はい)
    :大会登録画面;
elseif (試合) then (はい)
    :試合登録画面;
else (何もしない)
    :特になし;
endif

5. 반복(오류 등으로 처리 되돌리는 경우에 적용 가능)

처리 후에 판정하는 경우와 처리 전에 판정하는 경우에 쓰는 방법이 다릅니다.

후 판정

repeat :繰り返し;
    backward: 戻る;
repeat while (後判定) is (はい) not (いいえ)

루프를 표현할 때 사용하지만 업무 흐름에서 반환이 발생하는 장면에 응용할 수 있습니다.
예: 입력 화면에서 오류가 발생한 경우

전 판정

while (前判定) is (はい)
    :処理;
endwhile

6. 병렬 처리

fork를 사용하여 병렬 처리를 표현할 수 있습니다. 여러 개가 있으면 fork again을 사용하고 마지막으로 end fork라고 설명합니다.

fork
    :並列処理1;
fork again
    :並列処理2;
fork again
    :並列処理3;
end fork

7. 코멘트(주석)

note를 사용하면 주석 (주석)을 넣을 수 있습니다.
floating을 붙이면 이미지가 뜨게 됩니다.
주석(주석)의 위치는 right/left로 지정할 수 있습니다.
note 와 end note 로 둘러싸는 것으로 복수행의 코멘트 (주석)를 추가할 수 있습니다.

' 7-1. コメント right/left
floating note left: 試合登録完了メッセージ
' 7-2. コメント 複数
note right
    複
    数
    行
end note

8. 색

RGB에서의 지정과 색명 지정을 할 수 있습니다.

#AAAAAA:諦めたら;
#HotPink:終了;

9. 화살표

코멘트를 추가할 수 있습니다.

색상도 변경할 수 있습니다.

점선(dashed), 점선(dotted) 또는 굵은 선(bold)으로 할 수 있습니다.

:矢印に;
-> コメント付けられる;
:矢印に色;
-[#blue]->
:矢印を破線;
-[#green,dashed]->
:矢印を点線;
-[#black,dotted]->
:矢印を太くする;
-[#gray,bold]->

10. 화살표 없음

아래를 기재하면 화살표가 사라집니다.

skinparam ArrowHeadColor none

11. 수영 차선

프로그램이나 시스템이나 부서를 넘어서는 표현도 가능합니다.

| 管理者 |
|#AntiqueWhite| ウェブサーバ |
|#AliceBlue| DB |

12. 그룹핑

partition을 사용하여 그룹화할 수 있습니다.

partition 矢印 {
    :矢印に;
    -> コメント付けられる;
    :矢印に色;
    -[#blue]->
    :矢印を破線;
    -[#green,dashed]->
    :矢印を点線;
    -[#black,dotted]->
    :矢印を太くする;
    -[#gray,bold]->
}

13. 커넥터

()로 커넥터를 표현할 수 있습니다. 한 문자만 넣을 수 있습니다.

:コネクタ;
#Blue:(あ)
detach
(あ)

14. 화살표 지우기

detach를 넣으면 화살표가 사라집니다.

:コネクタ;
#Blue:(あ)
detach
(あ)

15. 색상 변경

수영 레인

|#AliceBlue| DB |

활동

#AAAAAA:諦めたら;
#HotPink:終了;

화살

-[#blue]->

커넥터

#Blue:(あ)

16. 종단 기호

:処理|
:処理<
:処理>
:処理/
:処理\\
:処理]
:処理}

끝내!