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

-

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

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

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

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

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

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

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

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

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

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

導入

今回は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を選択すると指定した拡張子で出力されます。
便利な機能なので覚えくと良さげです。

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

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

コメント

コメントを投稿

このブログの人気の投稿

Braveブラウザ(iPhone,iPad)にオフラインでもYouTubeの動画が視聴可能なPlaylist機能が追加されていたので使い方をまとめてみた。

-
イメージ
アップデートしたら使えるようになっていた 公式 からリリースされている通り、 BraveのiPhoneとiPadアプリのユーザーは、 新機能「Playlist」 を、 v1.25版 から利用可能になりました。これはユーザーが動画・音声コンテンツを好きなプラットフォームから保存し、楽しめるようにする機能です。Brave Playlistを使うと、ユーザーは複数のプラットフォームから選んだコンテンツを1つのプレイリストに保存して、いつでも、どこでもアクセスできます。音楽、動画、ポッドキャストなどを、通勤や旅行、日常生活で楽しむのに最適な機能です。 オフライン でYouTubeの動画を手元にダウンロードし、どこでも視聴可能になる機能が今回のアップデートで追加されました。 いやいや、これ相当便利ですね。 Braveを使っている方なら、Braveを通してYouTubeを視聴すれば広告を見なくて済むということを知ってらっしゃるとは思うのですが、まさかオフラインでも視聴可能になるとは・・・ AdBlockなどを活用すれば他のブラウザでも広告をブロックすること自体はできたのですが、まさか無償でブラウザ側が実装してくれるとは！ ただ、広告収入をメインにしているYouTube側から規制されそうな気もしますが・・・ どうなんでしょうか？ ちなみにこの機能、よくみたら5日前の段階でリリースされていたようなのですが、チェックできていなかったので先ほどアップデートをしたときに驚きました。 使い方 直感的に使えるので、すぐに使い方は分かるようになるかと思います。 1. YouTubeを開く 2.保存したい動画を開く。この時、画面下部に「Brave Playlistに追加する」と表示されるのでタップ。 3.画面右下の「・・・」をタップし、表示されたPlaylistをタップ 4.ダウンロードが始まっているので、完了するまで待つ。 5.ダウンロードが完了次第いつでもどこでも楽しめるように！ これで完了です。 例えば機内モード(左上の飛行機マークに注目してください)にしたとしても問題なく動画は再生されます。 これで広告無し、しかもオフラインでもYouTubeを楽しめるようになりました！
続きを読む

自作のChrome Extensionをインポートした時に "Invalid value for 'content_scripts[0].matches[0]': Empty path."というエラーが出たので解決した

-
イメージ
タイトル通りのエラーが出た。 Chromeの拡張機能を作っていたところ試しに作った拡張機能をインポートした時にエラーが出た。 調べてみるとmanifest.jsonでエラーが起こっているようで、タイトルのように、"Invalid value for 'content_scripts[0].matches[0]': Empty path."と表示されている。 manifest.jsonの中に書いたmatchesのインデックスの0番目がどうやら空のパスになっているらしい。 ちなみにmanifest.jsonは設定ファイルのようなもので、ここで定義している 'content_scripts[0].matches[0]'はGoogleのURI。 { "name" : "Example Extension" , "version" : "1.0.0" , "manifest_version" : 2 , "description" : "Sample Extension" , "content_scripts" : [ { "matches" : [ "https://www.google.com" ] , "js" : [ "content.js" ] } ] } という内容で、このディレクトリには他に content.js のみ。 なんぞやということで色々調べてみると単純に末尾にスラッシュが足りなかっただけのよう。 { "name" : "Example Extension" , "version" : "1.0.0" , "manifest_version" : 2 , "description" : "Sample Extension" , "content_scrip...
続きを読む

【OSLog】How to log a Swift project

-
イメージ
Overview I found an article on the net that summarized how to use OSLog, I wanted a working sample. I am new to logging, so I wasn’t sure how to interpret the usage of OSLog. So I summarized it in my own way. What is OSLog? It is a library for logging that is provided by Apple and can be used in Swift projects. The official documentation is here . Sample https://github.com/Kuehar/OSLogSample When the above code is run, eight buttons are lined up as shown below. import SwiftUI import OSLog struct ContentView: View { let logger = Logger(subsystem: Bundle.main.bundleIdentifier!, category: "ApplicationCode") var body: some View { VStack { Button(action: { logger.trace("Trace Log") }, label: { Text("Trace") }) Button(action: { logger.debug("Debug Log") }, label: { Text("Debug") ...
続きを読む