MacでのPlantUMLを使ったアクティビティ図の書き方あれこれ①

• アクティビティ図について
  • アクティビティ図とは何ぞや？
  • それでそれで？どうやって記述するの？
• 導入
  • 実行環境
  • 導入要素
    • JDK
    • graphviz
    • PlantUML
    • VSCode
• 実例

アクティビティ図について

UMLでアクティビティ図を書く機会があったので復習がてら基本的な流れをメモしておこうと思い、例で考えながら各構成要素について書き残しておこうと思います。

アクティビティ図とは何ぞや？

処理と処理の順番を表現するために作られた表記法で、具体的な業務の流れを各人で共有し、足りないものはないか、もしくは余分な構成要素が存在しないかをお互いに認知するきっかけともなりうるので多くの開発現場で導入されています。

アルゴリズムなどの考え方もこのアクティビティ図で表現されることが多く、抽象的な流れを具体的なものに落とし込むことはITエンジニアとして重要な能力の一つでしょう。

それでそれで？どうやって記述するの？

今回はPlantUMLを使って記述します。
公式サイトに記述がある通り、

PlantUML は、以下のようなダイアグラムを素早く作成するためのコンポーネントです。

• シーケンス図
• ユースケース図
• クラス図
• アクティビティ図（古い文法はこちら）
• コンポーネント図
• 状態遷移図（ステートマシン図）
• オブジェクト図
• 配置図
• タイミング図
  以下のような、UML以外の図もサポートしてます。
• ワイヤーフレーム
• アーキテクチャ図
• 仕様及び記述言語 (SDL)
• Ditaa
• ガントチャート
• マインドマップ
• WBS図(作業分解図)
• AsciiMath や JLaTeXMath による、数学的記法
• ER図
  引用:https://plantuml.com/ja/

とある通り、様々な設計図やフロー図を素早く書けることから多くの人に使われています。

コードっぽく書けるというのが非常にありがたい点で、最初は特有の文法に慣れるのに時間がかかるかもしれませんが、慣れてしまえば非常に手早く書くことができるようになります。

導入

今回はVSCodeで使います。
環境的には以下を導入しましょう。

実行環境

• OSX Catalina 10.15.7
• Homebrew 2.5.6

導入要素

• JDK
• graphviz
• VSCode

JDK

Javaを使えるようにしていないとそもそも使えないので以下のコマンドでインストール。

$ brew cask install adoptopenjdk

graphviz

シーケンス図とアクティビティ図 以外 のダイアグラムを使いたい場合は、Graphviz software をインストールする必要があるのでインストールしましょう。

$ brew install graphviz

PlantUML

$ brew install plantuml

VSCode

インストールし、拡張機能で’PlantUML’と検索すればでます。
インストールすればひとまずVSCodeの設定は終了です。

ちなみにVSCodeでoption+Dでリアルタイムで更新したUMLが描画されます。
便利。

実例

例えば、100円両替機のアクティビティ図の例は以下のようになります。

これをPlantUMLで書くと以下のようになります。

@startuml
start
:投入金の種類を判別する;
if()then(1000円紙幣または500円硬貨)
:100円硬貨を出す;
else(それ以外)
:投入金を戻す;
endif
stop
@enduml

以上の要素をそれぞれ分解して考えてみましょう。

まずは最初の@startumlです。これは最後の要素の@endumlとセットで始点と終点を宣言しています。これがないと No ファイル名 Foundと表示されます。

次にstartとstopです。
これは最初の●と最後の◉を表しています。
その次の:投入金の種類を判別する;ですが、アクティビティ図で何かしらの行動を表すアクションを表してます。
PlantUMLでは、

:アクションとして表示したい行動;

でアクションを表すことが出来ます。

次に

if()then(1000円紙幣または500円硬貨)
:100円硬貨を出す;
else(それ以外)
:投入金を戻す;
endif

ですが、分岐を表します。
thenの直後にifの条件を書き、その場合のアクションを直後に記入します。

そして、分岐ということでelseが必要です。
ちなみにifと同じ書き方でelifも書けますし、入れ子構造の分岐も書けます。

elseは直後に条件を記述し、あとはアクションを書くだけです。

最後に分岐が終わったことを宣言するためにendifを書くと分岐が認識されます。

ちなみに、最初のifの直後の()が空欄ですが、これは分岐の段階でのデシジョンノードに条件を記入する必要がないためで、必要であれば以下のように記入できます。

@startuml
start
:投入金の種類を判別する;
if(true)then(1000円紙幣または500円硬貨)
:100円硬貨を出す;
else(それ以外)
:投入金を戻す;
endif
stop
@enduml

こうすると以下のようになります。

少し余談ですが、VSCodeの場合はcommand+shift+Pでコマンドパレットを呼び出します。
コマンドパレットにPlantUMLを入力し、PlantUML:Export Current Diagramを選択すると指定した拡張子で出力されます。
便利な機能なので覚えくと良さげです。

ここまでで基本的なアクションと分岐の書き方はまとめました。

次はループや細かいオブジェクトについての書き方を書いていきたいと思います。