VSCode・PlantUMLでアクティビティ図を描こう！16Tips！〜バツ2 シンパパが子供らの学費を稼ぐ！〜

9746 ワード
アクティビティ図 plantuml uml VSCode uml テキストリンク

はじめに

PLantUMLのアクティビティ図はプログラムのフローを描くためのものですが、業務フローを描く際にも使えます（応用できます）。
よく使う16のTipsを紹介します！

準備

PlantUMLを使ってみよう！と思ったけど、何を準備したらいいかわからない方は下記をクリック

VSCodeとPlantUMLインストールしてマークダウンでUMLを描いたらなんかカッコよくね？　Mac版

動画版

動画解説クリック→

1. コメント

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. コネクタ

()でコネクタを表現できます。1文字しか入れられません。

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

14. 矢印を消す

detachと入れると矢印が消えます。

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

15. 色を変える

スイムレーン

|#AliceBlue| DB |

アクティビティ

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

矢印

-[#blue]->

コネクタ

#Blue:(あ)

16. 終端記号

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

おしまい！

関連記事