[kz] PlantUMLのセットアップからハンズオンまで

2019.05.06
engineering
アプリ

こんにちは、kazscapeです。

本日は、PlantUMLをさわってみます。

1. PlantUML ハンズオン
2. まとめ

PlantUMLとは

「PlantUML」とは、ソフトウェア開発の業務で作成するUML（Unified Modeling Language））ダイアグラムというさまざまな図を、ExcelやVisioといった図形描画のツールで書くのではなく、テキストをつらつら書くことで図が作成できるオープンソースの開発言語です。
書くことができるダイアグラムの種類には、

シーケンス図
ユースケース図
クラス図
アクティビティ図（古い文法はこちら）
コンポーネント図
状態遷移図（ステートマシン図）
オブジェクト図
配置図
タイミング図
ワイヤーフレーム
アーキテクチャ図
仕様及び記述言語 (SDL)
Ditaa
ガントチャート
マインドマップ
WBS図(作業分解図)
AsciiMath や JLaTeXMath による、数学的記法

があります。

セットアップ

セットアップ環境

今回はWindowsやMacで使えるクロスプラットフォームなエディタであるVisual Studio Codeの拡張機能としてPlantUMLをセットアップしました。
この記事では、Macにセットアップしましたが、概ねWindowsでもあまり違いはないと思います。
セットアップした環境は、

macOS Mojave ver.10.14.4
Visual Studio Code ver.1.33.1
Java JDK ver.11.0.2
Graphviz ver.2.40.1

になります。
さらに、Visual Studo Codeの拡張機能（Extension)として、

PlantUML ver.2.10.9

をいれました。

Visual Studio Codeのインストール

Visual Studio Codeのダウンロードサイトから、Mac用のものをダウンロードします。

VSCode-darwin-stable.zipというzipファイルがダウンロードできるので、解凍したVisual Studio Code.appをアプリケーションに移動します。
起動するとWelcome画面が表示されます。さっそく拡張機能をインストールします。
左のサイドバーにある拡張機能（Extension）を選択します。

左上のSearch Extensions in MarketplaceにPlantUMLと入力して、検索されたPlantUMLを選択します。

Installボタンを押して、

InstallボタンがUninstallになれば、インストールされています。

Javaのインストール

Javaのインストールは、Mac用のパッケージマネージャーであるHomebrewでインストールします。
Homebrewがインストールされていないようでしたら、前回の投稿を参考にしてください。
ターミナルを起動して、HomebrewでJavaをインストールします。
version 12のJavaを入れると、Previewの際にWarningが出るので、version 11をインストールします。
※これについては、PlantUMLのForumでも話題になっているので、解決したらversion 12に入れ替えることにします。
過去のversionをインストールできるように、homebrew-cask-versionsを導入します。

brew tap homebrew/cask-versions

1	brew tap homebrew/cask-versions

そして、Javaのversion 11をインストールします。

$ brew cask install java11

1	$ brew cask install java11

バージョンを確認します。

$ /usr/libexec/java_home -V

1	$ /usr/libexec/java_home -V

実行結果

Matching Java Virtual Machines (1):
    11.0.2, x86_64:    "OpenJDK 11.0.2"    /Library/Java/JavaVirtualMachines/openjdk-11.0.2.jdk/Contents/Home

1 2	Matching Java Virtual Machines (1): 11.0.2, x86_64: "OpenJDK 11.0.2" /Library/Java/JavaVirtualMachines/openjdk-11.0.2.jdk/Contents/Home

さらに、Javaへのpathを通す必要があります。
ホームディレクトリに.bash_profileがない場合は、

$ touch ~/.bash_profile

1	$ touch ~/.bash_profile

で作成をします。
.bash_ProfileにJavaへのpathを記載します。
バージョンの確認の実行結果で表示された、Javaがインストールされたディレクトリを使って、

export PATH=$PATH:/Library/Java/JavaVirtualMachines/openjdk-11.0.2.jdk/Contents/Home/bin
export JAVA_HOME=/Library/Java/JavaVirtualMachines/openjdk-11.0.2.jdk/Contents/Home

1 2	export PATH=$PATH:/Library/Java/JavaVirtualMachines/openjdk-11.0.2.jdk/Contents/Home/bin export JAVA_HOME=/Library/Java/JavaVirtualMachines/openjdk-11.0.2.jdk/Contents/Home

と記載します。
sourceコマンドでbash_profileの更新を反映します。

$ source ~/.bash_profile

1	$ source ~/.bash_profile

pathが設定されているか確認します。

$ echo $PATH
$ echo $JAVA_HOME

1 2	$ echo $PATH $ echo $JAVA_HOME

graphvizのインストール

PlantUMLで書かれたダイアグラム作成のための言語を描画するためのパッケージです。
Homebrewでインストールします。

$ brew install graphviz

1	$ brew install graphviz

PlantUML ハンズオン

ここまででPlantUMLでダイアグラムを書く準備が整ったので、PDFガイドを使って、ハンズオンしてみます。
例えば、シーケンス図をこんな風に書いてみます。

@startuml
Alice -> Bob: Authentication Request
alt successful case
Bob -> Alice: Authentication Accepted
else some kind of failure
Bob -> Alice: Authentication Failure
group My own label
Alice -> Log : Log attack start
loop 1000 times
Alice -> Bob: DNS Attack
end
Alice -> Log : Log attack end
end
else Another type of failure
Bob -> Alice: Please repeat
end
@enduml

@startuml

Alice -> Bob: Authentication Request

alt successful case

Bob -> Alice: Authentication Accepted

else some kind of failure

Bob -> Alice: Authentication Failure

group My own label

Alice -> Log : Log attack start

loop 1000 times

Alice -> Bob: DNS Attack

end

Alice -> Log : Log attack end

end

else Another type of failure

Bob -> Alice: Please repeat

end

@enduml

これを、.puという拡張子で保存して、Alt+Dでプレビュー表示すると、

こんな風に表示してくれます。
描画されたダイアグラムはCommand PaletteでExport Current Diagramから、

pngやpdfでExportすることができます。

PDFガイドを一通りやってみると、さまざまな応用ができることが理解でき、幅広くダイアグラムが書けることがわかります。

まとめ

PlantUMLは慣れこそ必要ですが、ソフトウェア開発だけでなく、Blogにちょっとした図を掲載したいときなどにも使えそうです。
Excelなどで書いた場合、図の中に記載した文字列は検索できないですが、PlantUMLならテキストですから検索が可能になります。
また、ダイアグラムのために書いたコードは、GitHubなどで管理をするとDiffが取りやすく、バージョン管理にも優れています。
使い方に慣れて、さまざまシーンで活用したいですね。

今日はちょっとテクニカルなお話でした。

ではっ！

前の記事

[kz] ほったらかしてたMacにgitをセットアップ 2019.04.30
次の記事

[kz] サイトをリニューアルしました。 2021.02.07